1. 댓글 남기기 버튼

app.py

POST

@app.route("/guestbook", methods=["POST"])
def guestbook_post():
    # name_give, comment_give 로 데이터를 받는다
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']

    # 모든 데이터 조회 후, comment_list에 담는다
    comment_list = list(db.homework2.find({}, {'_id': False}))
    # '목록의 길이+1'을 반환
    count = len(comment_list) + 1        # len(): 문자열, 배열, 목록 등의 길이를 반환        #  +1 이유? 댓글을 달 때 순번은 '이전 항목 +1번째'이기 때문

    # 받은 데이터를 입력
    doc = {
        'name':name_receive,
        'comment':comment_receive,
        'num': count
    }
    # 데이터 저장
    db.fan.insert_one(doc)
    return jsonify({'msg': '저장 완료!'})

GET

@app.route("/guestbook", methods=["GET"])
def guestbook_get():
    all_comments = list(db.fan.find({},{'_id':False}))
    return jsonify({'result': all_comments})

index.html

        <!-- 댓글 남기기 버튼 -->
        function save_comment() {
            let name = $('#name').val()
            let comment = $('#comment').val()

            <!-- 데이터를 담아서 : 이름, 댓글 -->
            let formData = new FormData();
            formData.append("name_give", name);
            formData.append("comment_give", comment);

            <!-- 담은 데이터를 /guestbook API 로 보낸다 -->
            fetch('/guestbook', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
                alert(data["msg"]);
                window.location.reload()
            });
        }

        function show_comment() {
            <!-- /guestbook API 에 요청을 보낸다 -->
            fetch('/guestbook').then((res) => res.json()).then((data) => {
                let rows = data['result']
                $('#comment-list').empty()

                <!-- 반복문으로 받았던 모든 데이터를 조회한다 -->
                rows.forEach((a) => {
                    let name = a['name']
                    let comment = a['comment']
                    let num = a['num']

                    <!-- modify_comment, delete_comment 클릭 시, 해당 순번(${num}) 에 적용 -->
                    let temp_html = `<div class="card">
                                        <div class="card-body">
                                            <blockquote class="blockquote mb-0">
                                                <p>${comment}</p>
                                                <footer class="blockquote-footer">${name}</footer>
                                                <button onclick="modify_comment('${num}')" type="button" class="btn btn-dark">수정</button>
                                                <button onclick="delete_comment('${num}')" type="button" class="btn btn-dark">삭제</button>
                                            </blockquote>
                                        </div>
                                    </div>`
                    $('#comment-list').append(temp_html)
                })
            })
        }

2. 삭제 버튼

app.py

@app.route("/guestbook/delete", methods=["POST"])
def delete_post():
    # num_give 로 데이터를 받는다
    num_receive = request.form['num_give']
    # 전달받은 값으로 num을 삭제한다
    db.fan.delete_one({'num': int(num_receive)})
    return jsonify({'result': 'success','msg':'삭제 완료!'})

index.html

        function delete_comment(num) {

            <!-- 데이터를 담아서 : 댓글 번호 -->
            let formData = new FormData();
            formData.append("num_give", num);

            <!-- 담은 데이터를 /guestbook/delete API 로 보낸다 -->
            fetch('/guestbook/delete', { method: "POST", body: formData }).then((response) => response.json()).then((data) => {
                alert(data["msg"])
                window.location.reload()
            });
        }

3. 수정 버튼

app.py

@app.route("/guestbook/modify", methods=["POST"])
def modify_comment_post():
    # comment_give, num_give 로 데이터를 받는다
    comment_receive = request.form['comment_give']
    num_receive = request.form['num_give']
    # 전달받은 값으로 num, comment 를 수정한다
    db.fan.update_one({'num': int(num_receive)}, {'$set': {'comment': comment_receive}})
    return jsonify({'msg':'수정 완료!'})

index.html

        <!-- 수정 버튼 -->
        function modify_comment(num) {
            // mypost 클래스에 적용 (닉네임, 응원댓글, 댓글 남기기) -->
            $('.mypost').empty()

            <!-- modify_comment_post 클릭 시, 해당 순번(${num}) 에 적용 -->
            let temp_html = `<div class="form-floating">
                                <textarea class="form-control" placeholder="Leave a comment here" id="modify_comment"
                                  style="height: 100px"></textarea>
                                <label for="floatingTextarea2">수정하기</label>
                            </div>
                            <button onclick="modify_comment_post('${num}')" type="button" class="btn btn-dark">수정완료</button>`
            <!-- mypost 클래스에 적용 (닉네임, 응원댓글, 댓글 남기기)          -->   
            $('.mypost').append(temp_html)
        }

        <!-- 수정 버튼 > 수정 완료 버튼 -->
        function modify_comment_post(num) {
            let modify_comment = $('#modify_comment').val()

            <!-- 데이터를 담아서 : 댓글 번호, 수정된 댓글 내용 -->
            let formData = new FormData();
            formData.append("num_give", num);
            formData.append("comment_give", modify_comment);

            <!-- 담은 데이터를 /guestbook/modify API 로 보낸다 -->
            fetch('/guestbook/modify', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
                alert(data["msg"]);
                window.location.reload()
            });
        }