GET, POST 연습

POST (리뷰 저장)

1. 클라이언트와 서버 확인하기

• 서버 코드 app.py

@app.route('/review', methods=['POST'])
def write_review():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': '이 요청은 POST!'})

• 클라이언트 코드 index.html

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 (리뷰 보여주기)

1. 클라이언트와 서버 확인하기
2. 서버부터 만들기
3. 클라이언트 만들기
4. 완성 확인하기

• app.py

@app.route('/review', methods=['GET'])
def read_reviews():
    reviews = list(db.bookreview.find({}, {'_id': False})) # DB에서 리뷰 정보 모두 가져오기
    return jsonify({'all_reviews': reviews}) # 성공 여부 & 리뷰 목록 반환하기

• index.html

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에 저장된 리뷰가 화면에 올바르게 나타나는지 확인하기