4주차 4, GET으로 DB를 가져오고, POST로 DB를 저장하기

bookreview프로젝트

bookreview/app.py

from flask import Flask, render_template, jsonify, request
app = Flask(__name__)

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.review

# HTML을 주는 부분
@app.route('/')
def home():
    return render_template('index.html')

# API 역할을 하는 부분
@app.route('/review', methods=['POST'])
def write_review():
    title_receive = request.form['title_give']
    author_receive= request.form['author_give']
    review_receive = request.form['review_give']

    doc = {
        'title':title_receive,
        'author':author_receive,
        'review':review_receive
    }
    db.bookreview.insert_one(doc)

    return jsonify({'msg': 'db 저장 완료'})


@app.route('/review', methods=['GET'])
def read_reviews():
    reviews = list(db.bookreview.find({},{'_id':False}))
    return jsonify({'all_reviews': reviews})

if __name__ == '__main__':
    app.run('0.0.0.0', port=5001, debug=True)

bookreview/templates/index.html

 

<script type="text/javascript">

    $(document).ready(function () {
        showReview();
    });

    function makeReview() {
        let title = $('#title').val()
        let author = $('#author').val()
        let review = $('#bookReview').val()
        $.ajax({
            type: "POST",
            url: "/review",
            data: {title_give:title, author_give:author, review_give:review},
            success: function (response) {
                alert(response["msg"]);
                window.location.reload();
            }
        })
    }

    function showReview() {
        $.ajax({
            type: "GET",
            url: "/review",
            data: {},
            success: function (response) {
                let reviews = response['all_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)
                }
            }
        })
    }
</script>

일단 localhost:5001/ 로 접근하면 templates안의 index.html로 이동한다.

 

이동 후 $(document).ready(function() {} 이 코드는 페이지가 열리자 마자 중괄호 안 내용을

실행해라는 jquery 코드다.

 

페이지가 열리자 마자 showReview()함수가 실행된다.

 

showReview함수로 ajax를 실행해, /review에 get으로 접근한다.

접근에 성공하면, 몽고db의 review안의 bookreview 안의 내용물을 '_id'빼고 다 꺼내서

reviews에 리스트형태로 집어넣는다.

그리고 get을 요청한 ajax로 response형태로 리스트를 전송한다.

 

전송받을 response의 'all_reviews'밸류를 reviews 변수에 집어넣는다.

reviews의 길이만큼 for문을 돌리고, for문 안에서 순서대로 title, author, review의 내용을

변수로 저장한다.

 

그리고 temp_html에 백틱안에 집어넣을 html파일을 넣고, 내용물은 변수에 있는 db에서

가져온 데이터를 집어넣는다.

 

그리고 원하는 코드의 id나 class에 접근해서 append로 temp_html을 추가하면서, db의

내용물 개수만큼 html에 원하는 내용을 추가할 수 있다.

 

 

post의 경우

<button onclick="makeReview()" type="button" class="btn btn-primary">리뷰 작성하기</button>

버튼의 onclick으로 실행한다.

$('#title') 은 form의 input태그다.

$('#title').val()로 input태그의 내용물을 변수에 집어넣고, $.ajax를 이용하여 post로

json형태의 title_give:title 등의 형태로 app.py로 전해진다.

 

전송이 성공하면, app.py에서 title_receive 등의 변수로 json데이터를 받고,

딕셔너리 doc에 집어넣어서 review.bookreview 안에 집어넣는다.

 

저장이 끝나면 ajax로 'msg': 'db 저장 완료' 라는 response데이터를 보내고,

그걸 받은 ajax에선 alert으로 db가 저장됐다는 알림을 날리고, 

window.location.reload()로 페이지를 새로고침하고, 새로고침되면서

$(document).ready(function(){}); 가 실행되고 위의 설명이 반복된 후에

post로 저장된 데이터가 같이 표시되는 localhost:5001/review의 화면이 나온다.