무비스타 - POST연습(좋아요+1)

BBOrong_22·2022년 4월 30일

스파르타 원정

목록 보기
50/52

API 만들고 사용하기

좋아요 API (Update → POST)


좋아요를 높여주는 기능을 만들면 된다.
어떤 의미인지 생각하자면
일단 클라이언트에서 이름을 받아서 그 이름의 좋아요 값을 찾은 다음에 그 좋아요 값에다 1을 더해서 그거를 덮어 씌워 주면 되겠다.다시 말해서 업데이트를 해주면 된다.


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


1) 클라이언트와 서버 연결 확인하기
서버에서 '/api/like'에다 'POST'에 'sample_give'로 받고 있고 msg로 'like 연결되었습니다!'받고 있다.
클라이언트에선 likestar 함수가 '위로!'라는 버튼에 붙어있다.변수로(name)을 받고 있는데 좋아요를 받은 이름을 받아야 그 이름을 넘겨주면서 그 이름의 like를 올려달라 할 수 있다. 그 함수는 'POST'에 '/api/like'에다 sample_give:'샘플데이터'값을 주고 있다.잘되면 msg가 alert으로 뜬다.

브라우저에서 아무나 한명 '위로!'버튼을 누르니 msg 'like 연결되었습니다!'가 잘뜬다.

2) 서버부터 만들기
서버에서는 이름을 받는다.
name_receive = request.form['name_give']
좋아요를 받은 이름을 찾아서 뭘 해줘야하기 때문에 아까 좋아요 누른 스타에 해당하는 이름 하나를 찾아야한다. 한개 찾기 db를 가져온다. target_star라는 변수를 주고 목록이름은 name 그대로이다.
target_star = db.mystar.find_one({'name':name_receive})
target_star로 찾을 것이다.한줄만 나올것이다.
그 안에서 like값만 갖고 오고 싶다.
current_like = target_star['like']
그리고 거기서 +1을 해줄거기 때문에
new_like = current_like +1
이제 star의 like 값을 업데이트 시켜줘야 한다.
name_receive로 받아 온것에 'like'를 new_like해주겠다.
db.mystar.update_one({'name': name_receive}, {'$set': {'like': new_like}})
msg로는 '좋아요 완료!'를 띄워주겠다.
return jsonify({'msg': '좋아좋아!'})

3) 클라이언트 만들기
data를 뭘로 갖다주냐면
request.form['name_give']
name_give로 준다 했고 내용물은 변수로 담겨질name이다.
data: {name_give:name},

한가지 더,좋아요를 눌렀을때 새로고침이 되면 더 좋겠다.alert 아래에
window.location.reload();

4) 완성 확인하기
브라우저에서 위로!를 누르면 업데이트되면서 +1이 축적되고 refresh(새로고침) 되면서 좋아요가 많은 스타가 위로 올라간다.

좋아요 버튼이 눌리면 likeStar(name)함수가 작동이 되면서 좋아요를 받은 변수(name)이 들어가게 되고 그 좋아요 받은 이름을 'name_give'로 형식으로 주고 서버에서 받아서
그 좋아요 받은 이름을 찾는다.그 찾는 이름에서 like를 찾고 거기서 +1을 해준다.
그리고 그 +1해준 이름을 +1로 업데이트로 반영시켜준다.

profile
아 스파르타 복습해야한다..

0개의 댓글