2023-05-19 TIL - python 삭제하기 기능

app.py 부분

 

# localhost:5000을 입력하면 index.html 이 나오게 해라

# @app.route('/') = localhost:5000

@app.route('/')

def home():

    return render_template('index.html')

# POST 방식 : 받은 nickname_give comment_give 로 방명록 저장하기

@app.route('/comments', methods=["POST"])

def comments_post():

    nickname_receive = request.form['nickname_give']

    comment_receive = request.form['comment_give']

    kst = timezone(timedelta(hours=9))

    nowtime = str(datetime.now(tz=kst))

    doc = {

        'nickname':nickname_receive,

        'comment':comment_receive,

        'time':nowtime               ->현재시간 추가 부분

        }

   

    db.comments.insert_one(doc)

    return jsonify({'msg': '방명록 저장 완료!'})

# jsonify : 사용자가 json data를 내보내도록 제공하는 flask의 함수.

 

 

# GET 방식 : 방명록 불러오기

@app.route('/comments', methods=['GET'])

def comments_get():

   all_comments = list(db.comments.find({},{'_id':False}))

   return jsonify({'result':all_comments})

 

 

# DELETE 방식 : 입력한 닉네임 값에 해당하는 방명록을 삭제합니다

@app.route('/comments', methods=['DELETE'])

def comments_del():

   delnickname_receive = request.form['delnickname_give']

   db.comments.delete_one({'nickname': delnickname_receive})

   return jsonify({'msg': '방명록 삭제 완료!'})

 

# PUT 방식 : 입력한 닉네임값에 해당하는 방명록의 내용을 editcomment_give 로 받아서 수정합니다.

@app.route('/comments', methods=['PUT'])

def comments_put():

    editnickname_receive = request.form['editnickname_give']

    editcomment_receive = request.form['editcomment_give']

    db.comments.update_one({'nickname':editnickname_receive},{'$set':{'comment':editcomment_receive}})

    return jsonify({'msg': '방명록 수정 완료!'})

if __name__ == '__main__':

    app.run('0.0.0.0', port=5000, debug=True)

    # debug=True 디버깅 모드 실행

 

 

index.html 부분

 <script>

        // 페이지를 열면 show_comment() 함수가 실행됩니다. 방명록 리스트가 나옵니다.

        $(document).ready(function () {

            show_comment();

        });

        // POST 방식 : nickname_give, comment_give 에 방명록을 작성하기 위한 닉네임, 내용을 담아 보냅니다.

        function save_comment() {

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

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

            let formData = new FormData();

            formData.append("nickname_give", nickname);

            formData.append("comment_give", comment);

            fetch('/comments', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {

                alert(data["msg"]);

                window.location.reload()

            });

        }

        // GET 방식 : DB에 저장되어 있는 정보들을 가져옵니다.

        function show_comment() {

            fetch('/comments').then((res) => res.json()).then((data) => {

                let rows = data['result']

                rows.forEach((a) => {

                    let nickname = a['nickname']

                    let comment = a['comment']

                    let date = a['time'].substr(0, 19)

                    // temp_html 안에 모달을 넣어 수정 버튼을 누르면 입력 창이 뜨게 합니다.

                    // 삭제하기 버튼을 누르면 바로 del_comment('${nickname}') 과 이어져 삭제되게 합니다.

                    let temp_html = `<div class="card">

                                    <div class="card-body">

                                        <blockquote class="blockquote mb-0" id="blockquote">

                                            <p>${comment}</p>

                                            <p><small class="text-muted">작성자 : ${nickname}<br>작성 시간 : ${date}</small></p>

                                            <button type="button" class="btn btn-dark" onclick="del_comment('${nickname}')">삭제하기</button>

                                            <button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">수정하기</button>

                                            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

                                            <div class="modal-dialog">

                                                <div class="modal-content">

                                                <div class="modal-header">

                                                    <h5 class="modal-title" id="exampleModalLabel">방명록 수정하기</h5>

                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                                                </div>

                                                <div class="modal-body">

                                                    <form>

                                                   

                                                    <div class="mb-3">

                                                       

                                                        <label for="recipient-name" class="col-form-label" >수정할 방명록 내용</label>

                                                        <textarea class="form-control" id="editcomment"></textarea>

                                               

                                                   

                                                        </div>

                                                    </form>

                                                </div>

                                                <div class="modal-footer">

                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>

                                                    <button type="button" class="btn btn-primary" onclick="edit_comment('${nickname}')">수정하기</button>

                                                </div>

                                                </div>

                                            </div>

                                            </div>

                                            `

                    $('#comment-list').append(temp_html)

                });

            })

        }

        var exampleModal = document.getElementById('exampleModal')

        exampleModal.addEventListener('show.bs.modal', function (event) {

            // Button that triggered the modal

            var button = event.relatedTarget

            // Extract info from data-bs-* attributes

            var recipient = button.getAttribute('data-bs-whatever')

            // If necessary, you could initiate an AJAX request here

            // and then do the updating in a callback.

            //

            // Update the modal's content.

            var modalTitle = exampleModal.querySelector('.modal-title')

            var modalBodyInput = exampleModal.querySelector('.modal-body input')

            modalTitle.textContent = 'New message to ' + recipient

            modalBodyInput.value = recipient

        })

        // DELETE 방식 : 입력한 삭제할 닉네임 값을 delnickname_give에 담아 보냅니다.

        function del_comment(nickname) {

            let delnickname = nickname

            let formData = new FormData();

            formData.append("delnickname_give", delnickname);

            fetch('/comments', { method: "DELETE", body: formData }).then((res) => res.json()).then((data) => {

                alert(data["msg"]);

                window.location.reload()

            });

        }

        // PUT 방식 : 입력한 수정할 방명록의 닉네임값 editnickname_give 와 수정할 내용을 editcomment_give 에 담아 보냅니다.

        function edit_comment(nickname) {

            let editnickname = nickname

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

            let formData = new FormData()

            formData.append("editnickname_give", editnickname)

            formData.append("editcomment_give", editcomment)

            fetch("/comments", { method: "PUT", body: formData }).then(res => res.json()).then(data => {

                alert(data["msg"])

                window.location.reload()

            })

        }

    </script>