4주차_9([모두의책리뷰] - GET 연습(리뷰 보여주기))

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

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

만들어져 있는 API 정보

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

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

3. 응답 데이터 : (JSON 형식) {'msg': '이 요청은 GET!'}

[서버 코드 - app.py]

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

def read_reviews():

sample_receive = request.args.get('sample_give')

print(sample_receive)

return jsonify({'msg': '이 요청은 GET!'})

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

function showReview() {

// 서버의 데이터를 받아오기

$.ajax({

type: "GET",

url: "/review?sample_give=샘플데이터",

data: {},

success: function (response) {

alert(response["msg"]);

}

})

}

동작 테스트

화면을 새로고침 했을 때, '리뷰를 받아왔습니다.' 라는 내용의 alert창이 뜨면 클라이언트 코드와 서버 코드가 연결 되어있는 것입니다.

서버부터 만들기

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

 

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

1. DB에서 리뷰 정보 모두 가져오기

2. 성공 여부 & 리뷰 목록 반환하기

 

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

 

A. 요청 정보

- 요청 URL= /review , 요청 방식 = GET

- 요청 데이터 : 없음

 

B. 서버가 제공할 기능 : 데이터베이스에 리뷰 정보를 조회(Read)하고, 성공 메시지와 리뷰 정보를 응답 데이터를 보냄

 

C. 응답 데이터 : (JSON 형식) 'all_reviews'= 리뷰리스트

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

def read_reviews():

# 1. DB에서 리뷰 정보 모두 가져오기

reviews = list(db.bookreview.find({}, {'_id': False}))

# 2. 성공 여부 & 리뷰 목록 반환하기

return jsonify({'all_reviews': reviews})

클라이언트 만들기

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

 

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

- 제목(title)

- 저자(author)

- 리뷰(review)

 

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

1. 리뷰 목록을 서버에 요청하기

2. 요청 성공 여부 확인하기

3. 요청 성공했을 때 리뷰를 올바르게 화면에 나타내기

 

사용할 API 정보는 아래와 같습니다.

 

A. 요청 정보

- 요청 URL= /review , 요청 방식 = GET

- 요청 데이터 : 없음

 

B. 서버가 제공할 기능 : 데이터베이스에 리뷰 정보를 조회(Read)하고, 성공 메시지와 리뷰 정보를 응답 데이터를 보냄

 

C. 응답 데이터 : (JSON 형식) 'all_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에 저장된 리뷰가 화면에 올바르게 나타나는지 확인합니다.

전체 완성 코드

프로젝트 API 정보는 아래와 같습니다.

 

[리뷰 저장하기(Create)]

A. 요청 정보

- 요청 URL= /review , 요청 방식 = POST

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

 

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

 

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

 

[리뷰 보여주기(Read)]

A. 요청 정보

- 요청 URL= /review , 요청 방식 = GET

- 요청 데이터 : 없음

 

B. 서버가 제공할 기능 : 데이터베이스에 리뷰 정보를 조회(Read)하고, 성공 메시지와 리뷰 정보를 응답 데이터를 보냄

 

C. 응답 데이터 : (JSON 형식) 'result'= 'success', 'reviews'= 리뷰리스트

[ 코드 - 서버 app.py ]

from flask import Flask, render_template, jsonify, request

app = Flask(__name__)

 

from pymongo import MongoClient

client = MongoClient('localhost', 27017)

db = client.dbsparta

 

## 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': '저장 완료!'})

 

@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=5000, debug=True)

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

저장 못하겟음;;;