세 번째, 버킷 리스트
STEP 1 : 무엇을 고려해야 하는가?
- URL은 어떻게 만들 것인지, 요청 방식은 어떻게 될 것인지?
- 클라이언트에서 서버로는 어떤 것을 넘겨 줄 것인지?
- 서버에서 클라이언트로는 어떤 것을 넘겨 줄 것인지?
- 주의사항 : hidden field로 번호를 넣어 주어야 완료버튼을 눌렀을 때 어떤 것이 완료인지를 알 수 있다.
STEP 2 : 서버단 설정 (POST방식)
💣'done'의 상태를 숫자 0, 1로 표현했을 때는 후처리가 중요하다. 이는 뒤에서 다시 설명하겠다.
@app.route("/bucket", methods=["POST"])
def bucket_post():
bucket_receive = request.form["bucket_give"]
#클라이언트로 전달받은 bucket_give를 bucket_receive에 저장한다.
count = list(db.bucket.find({},{'_id':False}))
num = len(count) + 1
#bucket의 개수를 count, 그리고 새로 만드는 bucket은 +1이 붙어야 하니까
#num이라는 변수에 len함수를 이용해 길이를 알아내고 count+1을 해준다.
doc = {
'num':num,
'bucket': bucket_receive,
'done':0
}
#done는 0(미완)상태와 1(완료)상태로 나누어서 구분해준다.
db.bucket.insert_one(doc)
return jsonify({'msg':'등록 완료!'})
#insert를 하고 json형식으로 메세지를 보내주면 끝!STEP 3 : 클라이언트단 설정
function save_bucket(){
let bucket = $('#bucket').val()
#bucket class의 value를 가져와서 bucket 변수에 저장한다.
$.ajax({
type: "POST",
url: "/bucket",
data: {bucket_give:bucket},
#bucket 변수의 데이터를 bucket_give라는 param에 넣어서 서버에 전달한다.
success: function (response) {
alert(response["msg"])
window.location.reload()
#별 일이 없으면 response에 담긴 json에서 msg를 꺼내서 alert해주고
#새로고침 해주면 끝!
}
});
}
GET방식도 그대로 하면 된다.
STEP 2 : 서버단 설정(GET방식)
*POST가 아니므로 클라이언트에서 서버로 가져갈 것이 없기 때문에 간단하게 쓸 수 있다.
@app.route("/bucket", methods=["GET"])
def bucket_get():
buckets_list = list(db.bucket.find({},{'_id':False}))
return jsonify({'buckets':buckets_list})STEP 3 : 클라이언트단 설정
#document가 완료되면 show_bucket를 실행하는 메서드를 추가한다.
function show_bucket(){
$('#bucket-list').empty()
$.ajax({
type: "GET",
url: "/bucket",
data: {},
#서버로 줄 게 없다.
success: function (response) {
#다만 서버에서 받은 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" class="btn btn-outline-primary">완료!</button>
#여기가 매우 중요한데, 여기서 done_bucket(${num})으로 onclick함수를 만들어주어야 한다.
#온클릭 함수에 아규먼트로 버킷리스트 번호를 들어가게 하고, 그 번호에 맞는 버킷리스트를
#종료처리(done=1)로 해 줄 것이다.
</li>`
} else {
temp_html = `<li>
<h2 class="done">✅ ${bucket}</h2>
</li>`
}
$('#bucket-list').append(temp_html)
}
}
});
}
DONE_BUCKET 구현하기
STEP 2 : 서버단 설정
아까 위에서 설명했던대로 done_bucket function을 만들어 줌으로써 완료처리를 하는 함수를 구현해야 한다.
처음 GET/POST의 차이를 설명했었는데, '수정'에 대한 사항은 POST 방식으로 해 주어야 하기 때문에 POST방식으로 구현을 해 주어야 한다.
메서드는 insert가 아닌 update로 해 주어야 하고, url도 /bucket이 아닌 뒤에 /done을 적어주어야 위의 bucket_post와 구별될 수 있다.
또한, 위의 💣 imoge에 써 놓았듯, num이 DB에 저장될 때에는 integer형태로 저장되어 있는데 꼭 형변환을 해 주어야 한다.
@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}})
#num_receive는 꼭 integer로 형변환을 해 주어야 한다. default값이 문자열이기 때문
return jsonify({'msg': '버킷 완료!'})STEP 3 : 클라이언트단 설정
function done_bucket(num){
#다른 function과는 별개로, 파라미터로 num인자를 꼭 받아야 돌아가게 해 놓아야 한다
$.ajax({
type: "POST",
url: "/bucket/done",
#url 또한 /bucket/done에서 진행된다고 해 주어야 한다.
#처음 설명했듯, /bucket라는 창구에서 두 가지 post를 진행할 수 없기 때문이다.
data: {'num_give':num},
#데이터는 num_give라는 파라미터에 num을 담아서 주어야 한다.
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}
이렇게 해서 버킷리스트도 끝났다.