[항해] 사전 프로젝트 (3) - flask, 몽고DB, JS

백엔드 능력자 분께서

 

마침내 해결해주셔서

done작업을 끝낼 수 있었다.

 

 

 

플라스크 프레임워크가 되게 가볍고 편한데 

구글링에 의존하기에는 정보가 부족하다해야되나?

 

정확히는 플라스크 문법이 아니고

몽고DB와 연동하는 문법이라

DB가 또 나눠지기 때문에

더 구글링이 어려웠던 것 같다.

 

 

 

우리가 의도한 바는

2페이지

각각의 사진 하나당

 

이러한 데이터베이스 카드 하나가 기록되는 방식이고

 

 

 

각 카드에 supplieslist라는 준비물 배열을 추가할 수 있게 만드는 것

그리고 아래 사진의

리스트 하나당 또 다른 객체 요소로 구성되어 있다.

 

준비물 리스트 사진

 

 

@app.route("/supplies/done", methods=["POST"])
def supplies_done():
    index_receive = request.form['index_give']
    num_receive = request.form['currentNum_give']

    travel_list = db.travels.find_one({'num': int(num_receive)})

    if travel_list['supplieslist'][int(index_receive) - 1]['done'] == 0:
        db.travels.update_one({"$and": [{'num': int(num_receive)}, {'supplieslist.index': int(index_receive)}]}, {'$set': {'supplieslist.$.done': 1}})
    else:
        db.travels.update_one({"$and": [{'num': int(num_receive)}, {'supplieslist.index': int(index_receive)}]}, {'$set': {'supplieslist.$.done': 0}})
    return jsonify({'msg': '체크 완료!', 'supplieslist': travel_list['supplieslist']})
    # return jsonify({'msg': '체크 완료!', 'done': supplies_num['done']})

 

프론트(필자)의

done 함수에서 보내준 

index_give와 currentNum_give를 각각 받아온다.

 

 

여기서

currentNum은 사진의 고유 넘버를 뜻하고

index는 한 사진안의 준비물 리스트들의 고유 번호를 뜻한다.

 

    travel_list = db.travels.find_one({'num': int(num_receive)})

 

 

currentNum의 고유번호에 해당하는 

사진의 정보들을 trave_list라는 변수에 가져온 후

 

 

    if travel_list['supplieslist'][int(index_receive) - 1]['done'] == 0:
        db.travels.update_one({"$and": [{'num': int(num_receive)}, {'supplieslist.index': int(index_receive)}]}, {'$set': {'supplieslist.$.done': 1}})
    else:
        db.travels.update_one({"$and": [{'num': int(num_receive)}, {'supplieslist.index': int(index_receive)}]}, {'$set': {'supplieslist.$.done': 0}})
    return jsonify({'msg': '체크 완료!', 'supplieslist': travel_list['supplieslist']})
    # return jsonify({'msg': '체크 완료!', 'done': supplies_num['done']})

 

만약 그 사진'의'

index 리스트'의'

done이 0이면 1로 바꿔주고

 

1이면 0으로 바꿔준다

 

새벽까지

$and ,  $set 그리고 $addToSet 의 늪에빠져

고생해주신 백엔드 분께 감사의박수를....

 

 

 

 

이제 자바스크립트에서 정보를 받아와 뿌려주기만 하면 되는데!

 

 

        function show_supplies(num) {
            currentNum = num
            $.ajax({
                type: "POST",
                url: "/travel/supplies",
                data: { num_give: num },
                success: function (response) {
                    let rows = response['supplieslist']
                    $('#supplies-list').html('')
                    let modal_title = response['modal-title']
                    document.querySelector('.modal-title').innerText = modal_title

                    for (let i = 0; i < rows.length; i++) {
                        let supplies = rows[i]['supplies']
                        let index = rows[i]['index']
                        let done = rows[i]['done']
                        console.log('index is ', index, supplies)
                        let temp_html = ``

                        if (done == 0) {
                            temp_html = `
            <li>
                <h2 class="supplies-text">✅ ${supplies}</h2>
                <button onclick="done_supplies(${currentNum}, ${index}, event)" type="button" class="btn btn-outline-primary">완료!</button>
             </li>
            `
                        } else {
                            temp_html = `
            <li>
                <h2 class="done">✔ ${supplies}</h2>
                <button onclick="done_supplies(${currentNum}, ${index}, event)" type="button" class="btn btn-outline-success">해제!</button>
            </li>
            `
                        }
                        $('#supplies-list').append(temp_html)
                    }
                }
            });
        }

 

서버에서 받아온

각각의

done이 0과 1일때

 

각자 다르게 나타내주면

 

다음과 같은 결과물이 탄생한다.

 

 

 

 

하지만 이대로는 마음에 안든다..

 

새로고침없이는 업데이트가 되지 않을뿐더러

alert창까지 있기엔 

무거운 느낌이들어 

가볍게 만들어주고싶었다.

 

(대신 코드가 무거워진다)

 

 

 

        function done_supplies(currentNum, index, e) {

            let li = e.target.parentElement
            let h2 = li.children[0]
            let button = li.children[1]
            $.ajax({
                type: "POST",
                url: "/supplies/done",
                data: { currentNum_give: currentNum, index_give: index },
                success: function (response) {

                    let done = response['supplieslist'][index - 1]
                    
                    console.log(done['done'])
                    if (done['done'] == 0) {
                        h2.classList.add('done')
                        h2.style = 'color:grey'
                        h2.innerText = `✔ ${done['supplies']}`
                        button.innerText = '해제!'
                        button.classList.add('btn-outline-success')
                    } else {
                        h2.classList.remove('done')
                        h2.style = 'color:black'
                        h2.innerText = `✅ ${done['supplies']}`
                        button.innerText = '완료!'
                        button.classList.remove('btn-outline-success')
                        button.classList.add('btn-outline-primary')
                    }
                }
            });
        }

 

done_supplies함수를 이용해

alert창을 없애고 

새로고침이 없이도 바로 업데이트가 되게해보자

 

 

물론 이건 보여주기위한 일종의 트릭인데

겉으로 보이기엔

업데이트가 된 것처럼 보이지만

실제 업데이트된 내용이 보이는 것은 새로고침이 된 후이다.

 

 

 

 

아주 부드럽게 잘 된다.

 

뿌듯하다. 이게 프론트의 매력인건가...

 

 

포스팅이 꽤 많이 길어졌는데

토이프로젝트의 끝이 보인다!

 

조금만 더 힘내자