•Flask 프레임워크란?
-> 서버를 구동시켜주는 편한 코드 모음
1) 클라이언트
- static directory(이미지, css파일)
- templates directory(index.html)
2) 서버
- app.py
-> flask 서버를 구동시켜줄 때는 항상 위 3개의 파일들을 만들고 시작한다.
1. Flask 사용하기(GET, POST)(ex: bucket list)
- app.py(서버)
// render_template이라는 내장함수를 사용하게 됨
from flask import Flask, _**render_template**_
app = Flask(__name__)
## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됩니다.
@app.route('/')
def home():
return _**render_template('index.html')**_
// a) POST 요청 API 코드
@app.route("/bucket", methods=["POST"])
def bucket_post():
bucket_receive = request.form['bucket_give']
bucket_list = list(db.bucket.find({}, {'_id': False}))
count = len(bucket_list) + 1
doc = {
'num': count,
'bucket': bucket_receive,
'done':0
}
db.bucket.insert_one(doc)
return jsonify({'msg': '등록 완료!'})
// b) GET 요청 API 코드
@app.route("/bucket", methods=["GET"])
def bucket_get():
buckets_list = list(db.bucket.find({},{'_id':False}))
return jsonify({'buckets':buckets_list})
// c) POST 요청 API 코드
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
num_receive = request.form['num_give']
db.bucket.update_one({'num': int(num_receive)}, {'$set':{'done':1}})
return jsonify({'msg': 'bucket 완료!'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
a) POST 요청 API 코드 해석:
클라(ajax)에서 서버(flask)로 bucket_give형태로 정보를 전달. 서버에서는 새로 들어온 데이터를 mongoDB에 num, bucket, done이라는 var로 저장. count가 필요한 이유는 각각의 버킷리스트에 번호를 부과하여 이후 업데이트가 가능할 수 있게 하기 위함.
b) GET 요청 API 코드 해석:
bucket_list를 'buckets'에 담아서 내려주기만 하면 됨.
c) POST 요청 API 코드 해석:
'num_give'를 클라(ajax)로부터 받아서 num과 done을 각각 업데이트 해주기. 단, num_receive는 문자열 형태로 서버로 들어오기 때문에, int()를 사용하여 숫자로 바꿔주는 것이 중요함.
- index.html(templates directory)(클라이언트)
// a) POST 요청 확인 Ajax 코드
function save_bucket() {
let bucket = $('#bucket').val()
$.ajax({
type: "POST",
url: "/bucket",
data: {bucket_give: bucket},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}
// b) GET 요청 확인 Ajax 코드
$(document).ready(function () {
show_bucket();
});
function show_bucket() {
$.ajax({
type: "GET",
url: "/bucket",
data: {},
success: function (response) {
let rows = response['buckets']
for (let i=0; i<rows.length;i++) {
let bucket = rows[i]['bucket']
let num = rows[i]['num']
let done = rows[i]['done']
let temp_html = ``
if (done == 0) {
temp_html = `<li>
<h2>✅ _**${bucket}**_</h2>
<button
onClick="done_bucket(_**${num}**_)"
type="button" className="btn btn-
outline-primary">완료!
</button>
</li>`
} else {
temp_html = `
<li>
<h2 class="done">✅ ${bucket}</h2>
</li>`
}
$('#bucket-list').append(temp_html)
}
}
});
}
c) POST 요청 확인 Ajax 코드
function done_bucket(num) {
$.ajax({
type: "POST",
url: "/bucket/done",
data: {num_give: num},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}
a) POST 요청 확인 Ajax 코드 해석:
클라(ajax)에서 bucket(ex: 제주에서 스카이 다이빙 하기)의 데이터를 저장한 후 서버(flask)한테 bucket_give형태로 전달. 성공적으로 작동한다면 eturn jsonify({'msg': '등록 완료!'})가 response로 들어가게 되고 '등록 완료!'라는 문구가 보이게 됨.
b) GET 요청 확인 Ajax 코드 해석:
로딩되자마자 showbucket()이 콜 됨. 서버(flask)로부터 내려받은 buckets의 bucket, num, done을 vars에 저장한 후 temp_html(붙여야 할 단일체, 이전 노트 참고)로 두어 bucket-list에 append 해 줌. 단, 아직 완료되지 않은 버킷의 경우 '완료!'표시가 살아 있기 때문에 if, else 절로 구분하여 상황에 맞게 temp_html이 다르게 붙도록 함. 이 내장되어 있는데 이유는 누를 때마다 num이 하나씩 늘어나게 하기 위함.
c) POST 요청 확인 Ajax 코드 해석:
num(각각의 버킷에 순서 부과)한 것은 num_give로 서버에 전달한 후 성공하면 서버쪽에 jsonify안에 있는 msg가 콜되게 되고 window.location.reload()를 통해 화면이 새로고침 되게 됨.
