5주차_7( [무비스타] - POST연습(좋아요+1))

API 만들고 사용하기 - 좋아요 API (Update → POST)

만들 API

 

1) 조회: 영화인 정보 전체를 조회

2) 좋아요: 클라이언트에서 받은 이름(name_give)으로 찾아서 좋아요(like)를 증가

3) 삭제: 클라이언트에서 받은 이름(name_give)으로 영화인을 찾고, 해당 영화인을 삭제.

 

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

A. 요청 정보 - 요청 URL= /api/like , 요청 방식 = POST - 요청 데이터 : 영화인 이름(name_give)

 

B. 서버가 제공할 기능 : 영화인 이름(요청 데이터)과 일치하는 영화인 정보의 좋아요 수를 한 개 증가시켜 데이터베이스에 업데이트하고(Update), 성공했다고 응답 메세지를 보냄

 

C. 응답 데이터 : (JSON 형식) 'msg'='좋아요 완료!'

 

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

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

[서버 코드 - app.py]

function likeStar(name) {

$.ajax({

type: 'POST',

url: '/api/like',

data: {sample_give:'샘플데이터'},

success: function (response) {

alert(response['msg']);

}

});

}

동작 테스트

'위로' 버튼을 눌렀을 때, 'like 연결되었습니다!' 내용의 alert창이 뜨면 제대로 동작하는 것입니다.

서버부터 만들기

API 는 약속이라고 했습니다. 위에 미리 설계해 둔 API 정보를 보고 만들어보죠!

 

영화인 카드의 좋아요 수를 증가시키기 위해 서버가 클라이언트에게 전달받아야하는 정보는 다음과 같습니다.

- 영화인의 이름 (name_give)

 

따라서 서버 로직은 다음 단계로 구성되어야 합니다.

1. 클라이언트가 전달한 name_give를 name_receive 변수에 넣습니다.

2. mystar 목록에서 find_one으로 name이 name_receive와 일치하는 star를 찾습니다.

3. star의 like 에 1을 더해준 new_like 변수를 만듭니다.

4. mystar 목록에서 name이 name_receive인 문서의 like 를 new_like로 변경합니다.

 

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

def like_star():

name_receive = request.form['name_give']

 

target_star = db.mystar.find_one({'name': name_receive}) c

urrent_like = target_star['like']

 

new_like = current_like + 1

 

db.mystar.update_one({'name': name_receive}, {'$set': {'like': new_like}})

 

return jsonify({'msg': '좋아요 완료!'})

클라이언트 만들기

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

 

좋아요 수를 증가시키기 위해 클라이언트가 전달할 정보는 다음과 같습니다.

- 영화인의 이름 (name_give)

 

따라서 클라이언트 로직은 다음 단계로 구성되어야 합니다.

1. 서버에 1) POST 방식으로,

2) /api/like 라는 url에,

3) name_give라는 이름으로 name을 전달합니다. (

참고) POST 방식이므로 data: {'name_give': name} 사용

2. '좋아요 완료!' alert 창을 띄웁니다.

3. 변경된 정보를 반영하기 위해 새로고침합니다.

function likeStar(name) {

$.ajax({

type: 'POST',

url: '/api/like',

data: {name_give:name},

success: function (response) {

alert(response['msg']); window.location.reload()

}

});

}

완성 확인하기

동작 테스트

'위로' 버튼을 눌렀을 때 좋아요 수가 증가하고 영화인 카드의 순위가 변경되는지 확인합니다.