마이 페이보릿 무비스타🌟
이번 시간에 할 것
① 네이버 영화인 랭킹 페이지 크롤링
② 크롤링한 정보를 바탕으로 좋아요 반영(POST)
③ 좋아요수대로 정렬(GET)
①은 여러번 다뤘기 때문에 이번 오늘은 ②와 ③만 다룰 것이다.
1.sort(GET)
1-Ⅰ.서버
이전 시간에 배운 내용을 토대로 작성한 GET API 코드
@app.route('/api/list', methods=['GET']) def show_stars(): movie_star = list(db.mystar.find({},{'_id':False})) return jsonify({'movie_stars': movie_star})
이번 프로젝트의 목표는 단순한 정보 호출이 아니라 특정값을 기준으로 정렬하는 것이므로 pymongo의 sort를 이용 (💡w3school 참조)
sort를 추가한 코드
@app.route('/api/list', methods=['GET']) def show_stars (): movie_star = list(db.mystar.find({}, {'_id': False}).sort('like', -1)) return jsonify({'movie_stars': movie_star})
1.find가 끝나는 지점에서 .sort 추가
2.like수대로 정렬해야하므로 value를 like로 변경
3.내림차순(-1) 사용
- 오름차순: sort("value", 1)
- 내림차순: ("value", -1)
1-Ⅱ.클라이언트
서버의 API를 연결한 코드
function showStar() { $.ajax({ type: 'GET', url: '/api/list?sample_give=샘플데이터', data: {}, success: function (response) { let mystars = response['movie_stars'] for (let i = 0; i <mystars.length; i++) { let name = mystars[i]['name'] let img_url = mystars[i]['img_url'] let recent = mystars[i]['recent'] let url = mystars[i]['url'] let like = mystars[i]['like'] let temp_html = `<div class="card"> <div class="card-content"> <div class="media"> <div class="media-left"> <figure class="image is-48x48"> <img src="${img_url}" alt="Placeholder image" /> </figure> </div> <div class="media-content"> <a href="${url}" target="_blank" class="star-name title is-4">${name} (좋아요: ${like})</a> <p class="subtitle is-6">${recent}</p> </div> </div> </div> <footer class="card-footer"> <a href="#" onclick="likeStar('${name}')" class="card-footer-item has-text-info"> 위로! <span class="icon"> <i class="fas fa-thumbs-up"></i> </span> </a> <a href="#" onclick="deleteStar('${name}')" class="card-footer-item has-text-danger"> 삭제 <span class="icon"> <i class="fas fa-ban"></i> </span> </a> </footer> </div>` $('#star-box').append(temp_html) } } }); }
1-Ⅰ에서 작업한 sort가 정상적으로 작동하는지 알아보기 위해 Robo 3T에서 특정 value의 like를 변경한다. (마우스 우클릭-Edit Document...)
⬇️
새로고침을 하자 정상적으로 반영되었다😀
2.like(POST)
2-Ⅰ.연결확인
- showStar의 temp_html 코드
<a href="#" onclick="likeStar('${name}')" class="card-footer-item has-text-info"> 위로! <span class="icon"> <i class="fas fa-thumbs-up"></i> </span> </a>
- likeStar
function likeStar(name) { $.ajax({ type: 'POST', url: '/api/like', data: {sample_give:'샘플데이터'}, success: function (response) { alert(response['msg']); } }); }
'위로' 버튼에 likeStar 함수가 적용되어 있는 것을 확인할 수 있다.
바로 여기에 실시간으로 '좋아요'를 반영해볼 것이다.
2-Ⅱ.서버
@app.route('/api/like', methods=['POST']) def like_star(): name_receive = request.form['name_give'] target_star = db.mystar.find_one({'name': name_receive}) current_like = target_star['like'] new_like = current_like + 1 db.mystar.update_one({'name': name_receive}, {'$set': {'like': new_like}}) return jsonify({'msg': '💜💜💜'})
❶ name_receive = request.form['name_give']
이름을 받아옴
❷ target_star = db.mystar.find_one({'name': name_receive})
위에서 받아온 이름 중에서 특정 이름 하나만 찾기
❸ current_like = target_star['like']
target_star의 like값만 가져오기
❹ new_like = current_like + 1
current_like에 1 더하기
❺ db.mystar.update_one({'name': name_receive}, {'$set': {'like': new_like}})
❶~❸의 과정을 반영하여 출력
❻ return jsonify({'msg': '💜💜💜'})
완료시 '💜💜💜'라는 메시지 호출
2-Ⅲ.클라이언트
function likeStar(name) { $.ajax({ type: 'POST', url: '/api/like', data: {name_give:name}, success: function (response) { alert(response['msg']); window.location.reload() } }); }
클라이언트에 서버를 연결
3.delete(POST)
- 서버
@app.route('/api/delete', methods=['POST']) def delete_star(): name_receive = request.form['name_give'] db.mystar.delete_one({'name':name_receive}) return jsonify({'msg': '🗑'})
- 클라이언트
function deleteStar(name) { $.ajax({ type: 'POST', url: '/api/delete', data: {name_give:name}, success: function (response) { alert(response['msg']); window.location.reload() } }); }
'2.like(POST)' 과정을 응용
find_one ➡️ delete_one
데이터를 가져오는 게 아니라 삭제만 하면 되므로 필요 없는 나머지 코드는 삭제
