미니 팀과제 기술 공유 ( 1번 subA(post) 데이터 입력)

2번 : https://seed0335.tistory.com/13

3번 : https://seed0335.tistory.com/11

 

흐름도 참고 : 전체 흐름도에서 sub 붙은 내용이 게시글 등록 삭제와 관련된 부분입니다. 

1. subA : 사용자가 입력한 관람 후기를 등록됩니다.

2. subB : 사용자가 출력한 데이터를 기록합니다. 이 과정에서 삭제 버튼도 함께 작성됩니다. 

3. subC : 사용자가 삭제 버튼을 누르면 DB에서 데이터가 삭제됩니다.   

 

 

 

1. subA(post) 입력

sub.html 부분에서 사용자가 폼 태그에 닉네임, 관람평을 입력합니다.

<div class="form-floating mb-3">
    <input type="text" class="form-control" id="name" placeholder="url" />
    <label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
    <textarea class="form-control" placeholder="Leave a comment here" id="comment"
        style="height: 100px"></textarea>
    <label for="floatingTextarea2">관람평</label>
</div>
<div class="mybtn">
    <button onclick="save()" type="button" class="btn btn-outline-dark">등록하기</button>
</div>

 

sub.html script

폼 태그로 받은 내용을 post 방식 백엔드로 보냅니다. 

        //  A : 데이터 보내기
        function save() {
            let id = $('#name').val()
            let comment = $('#comment').val()

            let formData = new FormData()
            formData.append("id_give", id)
            formData.append("comment_give", comment)

            fetch("/subA1", { method: "post", body: formData }).then(res => res.json()).then(data => {
                alert(data['msg'])
                window.location.reload()
            })
        }

 

위에 보낸 값을 app.py에서 받은 후  DB에 저장합니다.

저장 과정에서 아이디와 코멘트를 합친 sum 데이터를 db에 저장합니다. (sum 데이터는 삭제에 이용됩니다.)

# A : 데이터 받기
@app.route("/subA1", methods=["post"])
def subA1():
   id_receive = request.form['id_give']
   comment_receive = request.form['comment_give']
   sum = id_receive + comment_receive
   doc = {
       'id': id_receive,
       'comment' : comment_receive,
       'sum' : sum
   }
   db.vision5_comment1.insert_one(doc)
   return jsonify({'msg': '저장완료'})