해당 강의에서는 내 컴퓨터에 서버도 만들고, 요청도 하고... 즉 클라이언트 = 서버이기 때문에 -> 이를 바로 "로컬 개발환경"이라 한다.
1. Flask 시작하기 - 서버만들기
1) Flask 패키지 설치하고 시작
*패키지 설치 화면 진입하기
윈도우 : 좌상단File → setting → Python interpreter
맥 : 좌상단Pycharm → Preference → Python Interpreter
python interpreter 화면에서 + 버튼을 누르면 아래 창이 뜬다!
flask 로 검색한 후, Install package 클릭
2) Flask 기초 : 기본 실행
-Flask 프레임워크 : 서버를 구동시켜주는 편한 코드 모음. 서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있다. (프레임워크는 3분요리/소스 세트라고 생각하면 된다고 한다!)
-app.py 파일을 만들어 아래 코드를 붙여넣어봅니다.
: 파일 이름은 아무렇게나 해도 상관없지만 통상적으로 flask 서버를 돌리는 파일은 app.py라고 짓는다.
flask 시작 코드
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'This is Home!'
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)시작 코드를 붙여넣고, 화면 아무데나 우클릭하고 'Run app'을 클릭했을 때, 터미널에 아래와 같은 메시지가 뜨면 실행 성공이다.
위의 터미널에서 파랗게 표시된 링크를 클릭하면 크롬으로 접속된다!
그럼 This is Home! 이라는 글씨가 크롬 화면의 좌측상단에 뜰 것이다.
*종료하는 방법: 위 이미지에 해당하는 터미널 창을 클릭하고, ctrl + C를 누르면 서버가 종료된다.
3) Flask 기초 : URL 나눠보기
@app.route('/') 부분을 수정해서 URL을 나눌 수 있다.
url별로 함수명이 같거나, route('/')내의 주소가 같으면 안된다.
예시:
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'This is Home!'
@app.route('/mypage')
def mypage():
return 'This is My Page!'
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
2. Flask 시작하기 - HTML 파일 주기
1) Flask 기초 : 기본 폴더구조 - 항상 이렇게 세팅하고 시작!
Flask 서버를 만들 때 항상,
프로젝트 폴더 안에,
ㄴstatic 폴더 (이미지, css파일을 넣어둡니다)
ㄴtemplates 폴더 (html파일을 넣어둡니다)
ㄴapp.py 파일
이렇게 세 개를 만들어두고 시작하자.
3. Flask 기초 : HTML 파일 불러오기
1) 간단한 index.html 파일을 templates 안에 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>[스파르타코딩클럽] 웹개발 종합반 - 4주차 6
<title>Document</title>
</head>
<body>
<h1>서버를 만들었다!</h1>
</body>
</html>2) html 파일 불러오기
* flask 내장함수 render_template를 이용한다!
from flask import Flask, render_template
app = Flask(__name__)
## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됩니다.
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
4. Flask 시작하기 - 본격 API 만들기
- GET 요청 API코드(app.py)
- GET 요청 확인 Ajax코드(index.html)
- POST 요청 API코드(app.py)
- POST 요청 확인 Ajax코드(index.html)
5. [모두의책리뷰] 서버 만들기 (app.py 코드)
from flask import Flask, render_template, jsonify, request
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta
## HTML을 주는 부분
@app.route('/')
def home():
return render_template('index.html')
## API 역할을 하는 부분
@app.route('/review', methods=['POST'])
def write_review():
title_receive = request.form['title_give']
author_receive = request.form['author_give']
review_receive = request.form['review_give']
doc = {
'title': title_receive,
'author': author_receive,
'review': review_receive
}
db.bookreview.insert_one(doc)
return jsonify({'msg': '저장완료!'})
@app.route('/review', methods=['GET'])
def read_reviews():
reviews = list(db.bookreview.find({}, {'_id': False}))
return jsonify({'all_reviews': reviews})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
6. [모두의책리뷰] 클라이언트 만들기 (index.html 코드)
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- Webpage Title -->
<title>모두의 책리뷰 | 스파르타코딩클럽</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<!-- 구글폰트 -->
<link href="https://fonts.googleapis.com/css?family=Do+Hyeon&display=swap" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function () {
$("#reviews-box").html("");
showReview();
});
function makeReview() {
let title = $('#title').val()
let author = $('#author').val()
let review = $('#bookReview').val()
$.ajax({
type: "POST",
url: "/review",
data: {title_give:title, author_give:author, review_give:review},
success: function (response) {
alert(response["msg"]);
window.location.reload();
}
})
}
function showReview() {
$.ajax({
type: "GET",
url: "/review",
data: {},
success: function (response) {
let reviews = response['all_reviews']
for(let i = 0; i < reviews.length; i++){
let title = reviews[i]['title']
let author = reviews[i]['author']
let review = reviews[i]['review']
let temp_html = `<tr>
<td>${title}</td>
<td>${author}</td>
<td>${review}</td>
</tr>`
$('#reviews-box').append(temp_html)
}
console.log(reviews)
}
})
}
</script>
<style type="text/css">
* {
font-family: "Do Hyeon", sans-serif;
}
h1,
h5 {
display: inline;
}
.info {
margin-top: 20px;
margin-bottom: 20px;
}
.review {
text-align: center;
}
.reviews {
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<img src="https://previews.123rf.com/images/maxxyustas/maxxyustas1511/maxxyustas151100002/47858355-education-concept-books-and-textbooks-on-the-bookshelf-3d.jpg"
class="img-fluid" alt="Responsive image">
<div class="info">
<h1>읽은 책에 대해 말씀해주세요.</h1>
<p>다른 사람을 위해 리뷰를 남겨주세요! 다 같이 좋은 책을 읽는다면 다 함께 행복해질 수 있지 않을까요?</p>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">제목</span>
</div>
<input type="text" class="form-control" id="title">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">저자</span>
</div>
<input type="text" class="form-control" id="author">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">리뷰</span>
</div>
<textarea class="form-control" id="bookReview"
cols="30"
rows="5" placeholder="140자까지 입력할 수 있습니다."></textarea>
</div>
<div class="review">
<button onclick="makeReview()" type="button" class="btn btn-primary">리뷰 작성하기</button>
</div>
</div>
<div class="reviews">
<table class="table">
<thead>
<tr>
<th scope="col">제목</th>
<th scope="col">저자</th>
<th scope="col">리뷰</th>
</tr>
</thead>
<tbody id="reviews-box">
</tbody>
</table>
</div>
</div>
</body>
</html>
'TIL저장소' 카테고리의 다른 글
| [네이버 부스트코스]CS50 2019 모두를 위한 컴퓨터 과학 5. 메모리 (0) | 2021.06.27 |
|---|---|
| [네이버 부스트코스]CS50 2019 모두를 위한 컴퓨터과학 4.Algorithms (0) | 2021.06.26 |
| [스파르타코딩클럽]웹개발 3주차 MongoDB/robo3T/pymongo/웹스크래핑(크롤링) (0) | 2021.06.22 |
| [스파르타코딩클럽] 웹개발 3주차 파이참 패키지 설치(bs4/requests)/웹스크래핑(크롤링)/DB설치(robo3t) (0) | 2021.06.22 |
| [스파르타코딩클럽]웹개발 3주차 Robo3T 설치방법 (0) | 2021.06.22 |