API 역할을 하는 부분을 만들어 줍니다.

API 역할을 하는 부분

@app.route('/review', methods=['POST'])
def write_review():
    # title_receive로 클라이언트가 준 title 가져오기
    title_receive = request.form['title_give']
    author_receive = request.form['author_give']
    review_receive = request.form['review_give']
    # DB에 삽입할 review 만들기
    doc = {
        'title': title_receive,
        'author': author_receive,
        'review': review_receive
    }
    # reviews에 review 저장하기
    db.bookreview.insert_one(doc)
    # 성공 여부 & 성공 메시지 반환
    return jsonify({'result': 'success', 'msg': '저장이 완료되었습니다!'})
@app.route('/review', methods=['GET'])
def read_reviews():
    # 1. DB에서 리뷰 정보 모두 가져오기
    reviews = list(db.bookreview.find({}, {'_id': False}))
    # 2. 성공 여부 & 리뷰 목록 반환하기
    return jsonify({'result': 'success', 'reviews': reviews})

index.html 부분

리뷰를 작성하는 부분의 함수를 만들어 줍니다.

makeReview() 함수

        function makeReview() {
            // 1. 화면에 입력어 있는 제목, 저자, 리뷰 내용을 가져옴
            let title = $("#title").val();
            let author = $("#author").val();
            let review = $("#bookReview").val();
            // 2. 제목, 저자, 리뷰 중 하나라도 입력하지 않았을 경우 alert
            // 3. POST /review 에 저장(Create)을 요청
            $.ajax({
                type: "POST",
                url: "/review",
                data: {title_give: title, author_give: author, review_give: review},
                success: function (response) {
                    if (response["result"] == "success") {
                        alert(response["msg"]);
                        window.location.reload();
                    }
                }
            })
        }

리뷰를 보여주는 부분의 함수를 만들어 줍니다.

showReview() 함수

        function showReview() {
            // 1. 리뷰 목록을 서버에 요청하기
            // 2. 요청 성공 여부 확인하기
            // 3. 요청 성공했을 때 리뷰를 올바르게 화면에 나타내기
            $.ajax({
                type: "GET",
                url: "/review",
                data: {},
                success: function (response) {
                    if (response["result"] == "success") {
                        let reviews = response['reviews'];
                        for(let i = 0; i < reviews.length; i++) {
                            let title = reviews[i]['title'];
                            let author = reviews[i]['author'];
                            let review = reviews[i]['review'];
                            let temp_html = `<tr>
                                                <td>${title}</td>
                                                <td>${author}</td>
                                                <td>${review}</td>
                                            </tr>`
                            $('#reviews-box').append(temp_html);
                        }
                    } else {
                        alert("리뷰를 받아오지 못했습니다");
                    }
                }
            })
        }

페이지 안내

제목, 저자, 리뷰를 입력한 후에 '리뷰 작성하기' 버튼을 누르면 페이지 하단에 기록이 되고 DB로 넘어갑니다.

아쉽게 아직 AWS로 포트는 열지 않아서 저 혼자만의 책 리뷰 페이지가 되었네요,,,

깃허브 : https://github.com/ksmlucky/BookReviewPage/tree/main