5주차(2) GET 서버 만든 뒤 내려받기!

#1. Console.log()로 먼저 데이터 확인해보기. 

 

0: {bucket: '데이터전송', done: 0, num: 1}

- - - 

4: {bucket: '돈벌기', done: 0, num: 5}

length: 5

let bucket = $('#bucket').val()

들어간 내용 살펴보면 - row의 순서: { 'bucket'=bucket_receiver ;; 'num' = count ;; 'done' = 0}

 

'$('#bucket').val() : id = bucket 이라는 html 항목에 입력된 값을 bucket이라고 정의해서 이 값을 

$.ajax({
    type: "POST",
    url: "/bucket",
    data: {bucket_give:bucket},
    success: function (response) {
        alert(response["msg"])
        window.location.reload()
    }
});

data: {bucket_give: bucket} -> data에 bucket_give에 넣는다. 

 

@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': '등록 완료!'})

이 bucket_give는 request.form[]에 들어가서 bucket_receive로 출력이 되고. 

doc = { 여기에 'bucket'이라고 다시 정의된다 = bucket_receive }

그래서 결국 

num, bucket, done이라고 나타나는 건 이 def bucket_post()를 통해 POST로 들어간 저장 내용이 나타나게 되는 것. 

 

#1. 내가 HTML에 쓴 내용이

#2. 일단 ajax로 들어가기 위해 정의 됨. let bucket = $ ~. val

#3. 이 버켓을 $.ajax로 POST에 보내는데 그 형식을 bucket_give로 전달. (bucket_give:bucket)

#4. 이 bucket_give 값을 @app.route로 mongoDB에 request form으로 bucket_receive로 받아서 넣어줘야됨. 

#5. 이걸 넣으면 list 형태로 들어가는데 각각에 대한 번호를 매겨주려면, 일단 bucket_list를 가져오고

#6. 그 수를 count해서 거기 +1로 number를 부여 

#7. doc ={} 해서 이 내용을 db.bucket.insert_one(doc)로 여러개 내용을 동시에 넣을 수 있음. 

#8. 마지막에 꼭 return 함수를 넣어줘야 그 함수가 마무리 되니 잊지 말것. 

 

----------------------------------------------------------------------------------------------------------------------------

 

여기서 GET 할 내용들은 bucket, num, done --> 얘네를 어디에 붙여? <div id-"bucket-list"> 안의 <li>로 넣어줘야되. 

근데 그 양식은? 뒤의 내용만 

그래서 rows의 i 번째의 bucket / num / done 을 각각 따로 정의 해주자.

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']
                }
            }
        });
    }

근데 완료 안한 애들과 한 애들이 다르다. 

완료를 안했으면 완료! button이 존재. 

완료 했으면 완료!button 삭제. 

--> onclick="done_bucket()" 여기에 () 안에 bucket number가 들어가야된다!!!

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" class="btn btn-outline-primary">완료!</button>
                            </li>`
        } else {
            temp_html=`    <li>
                                <h2 class="done">✅ ${bucket}</h2>
                            </li>`
        }
        $('#bucket-list').append(temp_html)

        }
    }

여기서 보면, bucket, num, done을 정의 해줬고, row 순서대로 이제 넣을 거야. 그래서 temp_html을 설정 하고 

거기서 완료를 안했으면 button이 나와야되니 if 문으로 done == 0 일 경우 button 표시

else의 경우 button X --> 이걸 #bucket-list에 append(temp_html) 해주면 된다.

 

=========================================================================== 

이제 진짜 마지막! 완료 버튼 눌렀을 때 done으로 표시하게 하기!!