POST (리뷰 저장)
1. 클라이언트와 서버 확인하기
@app.route('/review', methods=['POST'])
def write_review():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': '이 요청은 POST!'})
function makeReview() {
$.ajax({
type: "POST",
url: "/review",
data: {sample_give:'샘플데이터'},
success: function (response) {
if (response["result"] == "success") {
alert(response["msg"]);
window.location.reload();
}
}
})
}
2. 서버부터 만들기
- 만들 API 요청 정보
요청 URL = /review
요청 방식 = POST
요청 데이터: 제목(title), 저자(author), 리뷰(review)
- 서버가 제공할 기능: 클라이언트에게 보낸 요청 데이터를 데이터베이스에
생성(Create)하고, 저장이 성공했다고 응답 데이터를 보낸다
- 응답 데이터: (JSON 형식) 'msg'= '리뷰 작성완료'
@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': '리뷰 작성완료'})
3. 클라이언트 만들기
- 리뷰를 작성하기 위해 필요한 정보
제목(title), 저자(author), 리뷰(review)
- 구성
1.input에서 title, author, review 가져오기
2.입력값이 하나라도 없을 때 alert 띄우기
3.Ajax로 서버에 저장 요청하고, 화면 다시 로딩하기
- 응답 데이터: (JSON 형식) 'result'= 'succes', 'msg'= '리뷰 작성완료'
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();
}
})
}
4. 완성 확인하기
- 제목, 저자, 리뷰를 작성하고 '리뷰 작성하기' 버튼을 눌렀을 때,
'리뷰 작성완료'라는 alert가 뜨는지 확인하기
GET (리뷰 보여주기)
- 클라이언트와 서버 확인하기
- 서버부터 만들기
- 클라이언트 만들기
- 완성 확인하기
@app.route('/review', methods=['GET'])
def read_reviews():
reviews = list(db.bookreview.find({}, {'_id': False}))
return jsonify({'all_reviews': reviews})
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)
}
}
})
}
- 화면을 새로고침 했을 때, DB에 저장된 리뷰가 화면에 올바르게 나타나는지 확인하기