버킷리스트 만들기 ▼
나머지는 동일하지만 추가되는 기능이 하나있다.
완료하지 않은 버킷리스트에는 "완료"라는 버튼이 있고,
버튼을 누르면 버튼이 없어지면서, 버킷리스트에 줄을 치는 기능을 구현한다.
app.py ▼
from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.c2foku9.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route("/bucket", methods=["POST"])
def bucket_post():
bucket_receive = request.form['bucket_give']
# 등록될것들 num에 +1씩 해주는 역할
bucket_list = list(db.bucket.find({}, {'_id': False}))
count = len(bucket_list) + 1
doc = {
# 완료 안한곳에 완료버튼을 줘야하고, 완료한 곳에는 줄치고 버튼도 있어야하는데 이것을 구분하려면
# 각 버킷리스트의 번호(num)가 필요하다. 몇번은 완료, 몇번은 미완료 이렇게 구분해서 각 리스트에 맞게 UI를 보여준다.
'num': count,
'bucket':bucket_receive,
'done':0 # 완료 여부 0,1로 저장
}
db.bucket.insert_one(doc)
return jsonify({'msg': '등록 완료!'})
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
num_receive = request.form['num_give']
#숫자를 클라이언트로부터 받아오기 때문에 num_receive도 숫자로 바꿔줘야한다(파싱)
db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
return jsonify({'msg': '버킷 완료!'})
@app.route("/bucket", methods=["GET"])
def bucket_get():
bucket_list = list(db.bucket.find({}, {'_id': False}))
return jsonify({'buckets': bucket_list})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
index.html ▼
// 스크립트
<script>
$(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 = ``
// done이 0일때 : 완료하지 않았을때의 html
if (done == 0){
temp_html = `<li>
<h2>✅ ${bucket}</h2>
// 완료버튼을 누르면 num값을 done_bucket에 준다.
<buttontoken interpolation">${num})" type="button" class="btn btn-outline-primary">완료!</button>
</li>`
// done이 1일때 : 완료했을 때의 html
} else {
temp_html = `<li>
<h2 class="done">✅ ${bucket}</h2>
</li>`
}
$('#bucket-list').append(temp_html)
}
}
});
}
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()
}
});
}
// num을 받아온다.
function done_bucket(num) {
$.ajax({
type: "POST",
url: "/bucket/done",
data: {num_give: num},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}
</script>
//html
<div class="mypic">
<h1>나의 버킷리스트</h1>
</div>
<div class="mybox">
<div class="mybucket">
<input id="bucket" class="form-control" type="text" placeholder="이루고 싶은 것을 입력하세요">
<button onclick="save_bucket()" type="button" class="btn btn-outline-primary">기록하기</button>
</div>
</div>
<div class="mybox" id="bucket-list"></div>
조건에 따라 구현해야할 것이 약간 추가된거지만 또 새로운거라서 처음엔 조금 어려웠고, 코드를 다시한번 읽으면서 해석해보니 간단한 조건문을 사용하여 요구된 것을 충족시켰다.
결과물 ▼