웹개발 왕초보 4주차 숙제

입력한 정보를
POST 방식으로 MongoDB에 저장하고
GET 방식으로 가져와서 보여준다

<파이선 서버 파일: POST, GET 지정>

@app.route("/homework", methods=["POST"])
def homework_post():
    nickname_receive = request.form['nickname_give']
    cheering_receive = request.form['cheering_give']

    doc={
        'nickname':nickname_receive,
        'cheering':cheering_receive
    }
    db.homework.insert_one(doc)

    return jsonify({'msg':'응원 남기기 완료~!'})

@app.route("/homework", methods=["GET"])
def homework_get():
    cheering_list = list(db.homework.find({}, {'_id': False}))
    return jsonify({'comments':cheering_list})

<클라이언트 파일: ajax함수>
function save_comment(){
            let nickname = $('#nickname').val()
            let cheering = $('#cheering').val()

            $.ajax({
                type: "POST",
                url: "/homework",
                data: {nickname_give:nickname, cheering_give:cheering},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            })
        }

function show_comment(){
            $('#comment-list').empty()
            $.ajax({
                type: "GET",
                url: "/homework",
                data: {},
                success: function (response) {
                    let rows = response['comments']
                    for(let i = 0; i < rows.length; i++){
                        let nickname = rows[i]['nickname']
                        let cheering = rows[i]['cheering']

                        let temp_html=`<div class="card">
                                            <div class="card-body">
                                                <blockquote class="blockquote mb-0">
                                                    <p class="mycomment">${cheering}</p>
                                                    <footer class="blockquote-footer">${nickname}</footer>
                                                </blockquote>
                                            </div>
                                        </div>
                        `
                        $('#comment-list').append(temp_html)
                    }

                }
            });
        }