4주차_7([모두의책리뷰] - POST 연습(리뷰 저장))

API 만들고 사용하기 - 제목, 저자, 리뷰 정보 저장하기(Create → POST)

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

2. 서버부터 만들기

3. 클라이언트 만들기

4. 완성 확인하기

※이 순서가 제일 중요!!!!!!!!!

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

• 여기서는 적혀 있는 쌍으로 되어있는 서버-클라이언트 코드를 확인하고 갈게요.
• 분홍 형광펜 부분이 서로 어떻게 매칭되는지 확인해보세요!

만들어져 있는 API 정보

1. 요청 정보 : 요청 URL= /review , 요청 방식 = POST

2. 서버가 제공할 기능 : 클라이언트에게 정해진 메시지를 보냄

3. 응답 데이터 : (JSON 형식) 'result'= 'success', 'msg'= '리뷰가 성공적으로 작성되었습니다.'

[서버 코드 - app.py]

## API 역할을 하는 부분

@app.route('/review', methods=['POST'])

def write_review():

# 1. 클라이언트가 준 title, author, review 가져오기.

# 2. DB에 정보 삽입하기

# 3. 성공 여부 & 성공 메시지 반환하기

return jsonify({'result': 'success', 'msg': '리뷰가 성공적으로 작성되었습니다.'})

[클라이언트 코드 - index.html]

function makeReview() {

// 1. 제목, 저자, 리뷰 내용을 가져옵니다.

// 2. 제목, 저자, 리뷰 중 하나라도 입력하지 않았을 경우 alert를 띄웁니다.

// 3. POST /review 에 저장을 요청합니다.

$.ajax({

type: "POST",

url: "/review",

data: { },

success: function (response) {

if (response["result"] == "success") {

alert(response["msg"] );

window.location.reload();

}

}

})

}

동작 테스트

👉 동작 테스트 '리뷰 시작하기' 버튼을 눌렀을 때, '리뷰가 성공적으로 작성되었습니다.' 라는 내용의 alert창이 뜨면 클라이언트 코드와 서버 코드가 연결 되어있는 것입니다.

서버부터 만들기

API 는 약속이라고 했습니다. API를 먼저 만들어보죠!

 

리뷰를 작성하기 위해 필요한 정보는 다음 세 가지 입니다.

- 제목(title)

- 저자(author)

- 리뷰(review)

 

따라서 API 기능은 다음 세 단계로 구성되어야 합니다.

1. 클라이언트가 준 title, author, review 가져오기.

2. DB에 정보 삽입하기

3. 성공 여부 & 성공 메시지 반환하기

 

정리하면, 만들 API 정보는 아래와 같습니다.

 

A. 요청 정보 - 요청 URL= /review , 요청 방식 = POST

- 요청 데이터 : 제목(title), 저자(author), 리뷰(review)

 

B. 서버가 제공할 기능 : 클라이언트에게 보낸 요청 데이터를 데이터베이스에 생성(Create)하고, 저장이 성공했다고 응답 데이터를 보냄

 

C. 응답 데이터 : (JSON 형식) 'msg'= '리뷰가 성공적으로 작성되었습니다.'

 

@app.route('/review', methods=['POST'])

def write_review():

# title_receive로 클라이언트가 준 title 가져오기

title_receive = request.form['title_give']

# author_receive로 클라이언트가 준 author 가져오기

author_receive = request.form['author_give']

# review_receive로 클라이언트가 준 review 가져오기 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({'msg': '리뷰가 성공적으로 작성되었습니다.'})

클라이언트 만들기

API 는 약속이라고 했습니다. API를 사용할 클라이언트를 만들어보죠!

 

리뷰를 작성하기 위해 필요한 정보는 다음 세 가지 입니다.

- 제목(title)

- 저자(author)

- 리뷰(review)

 

따라서 클라이언트 코드는 다음 세 단계로 구성되어야 합니다.

1. input에서 title, author, review 가져오기

2. 입력값이 하나라도 없을 때 alert 띄우기.

3. Ajax로 서버에 저장 요청하고, 화면 다시 로딩하기

 

사용할 API 정보

 

A. 요청 정보 - 요청 URL= /review , 요청 방식 = POST

- 요청 데이터 : 제목(title), 저자(author), 리뷰(review)

 

B. 서버가 제공할 기능 : 클라이언트에게 보낸 요청 데이터를 데이터베이스에 생성(Create)하고, 저장이 성공했다고 응답 데이터를 보냄

 

C. 응답 데이터 : (JSON 형식) 'result'= 'success', 'msg'= '리뷰가 성공적으로 작성되었습니다.'

 

function makeReview() {

// 화면에 입력어 있는 제목, 저자, 리뷰 내용을 가져옵니다.

let title = $("#title").val();

let author = $("#author").val();

let review = $("#bookReview").val();

 

// POST /review 에 저장(Create)을 요청합니다.

$.ajax({

type: "POST",

url: "/review",

data: { title_give: title, author_give: author, review_give: review },

success: function (response) {

alert(response["msg"]);

window.location.reload();

}

})

}

완성 확인하기

동작 테스트

제목, 저자, 리뷰를 작성하고 '리뷰 작성하기' 버튼을 눌렀을 때,

'리뷰가 성공적으로 작성되었습니다.'라는 alert가 뜨는지 확인합니다.