[웹개발일지] #11. mini_project_3. 무비스타
💻 No.3 my favorite movie star 💻
👉여러 영화배우 리스트 중 좋아요 or 삭제를 클릭해서
인기 순위 만들기!
https://github.com/janghr1225/i_like_my_movie_star_page
GitHub - janghr1225/i_like_my_movie_star_page: 영화배우 좋아요 누르기 페이지만들기
영화배우 좋아요 누르기 페이지만들기. Contribute to janghr1225/i_like_my_movie_star_page development by creating an account on GitHub.
github.com
👉만들 API
1. 조회(read) - 영화인 정보 전체를 조회
2. 좋아요(update) - 클라이언트에서 받은 이름(name_give)으로 찾아서 좋아요 증가
3. 삭제(delete) - 클라이언트에서 받은 이름으로 영화인 찾고, 해당 영화인 삭제
💾 GET (보여주기)
👉 API 만들고 사용하기 - 영화인 조회 API (Read → GET)
👉서버 로직
1. mystar 목록 전체 검색. ID 제외하고 like가 많은 순으로 정렬
2. 성공하면 success 메시지와 함께 stars_list 목록을 클라이언트에 전달
##GET 보여주기 서버
@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. #star_box의 내부 html 태그 모두 삭제
2. 서버에 GET방식으로, /api/list 주소로 stars_list요청
3. 서버가 돌려준 stars_list를 stars 변수에 저장
4. for문을 활용하여 stars배열의 요소를 차례대로 조회
5. star[i]요소의 name, url, img_url, recent, like 키 값을 활용하여 값 조회
6. 영화인 카드 코드 만들어서 #star-box에 붙이기
##GET 보여주기 클라이언트
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)
}
}
});
}
💾 POST(좋아요+1 & 삭제하기)
👉 API 만들고 사용하기 - 좋아요 API (Update -> POST)
👉서버 로직(좋아요+1)
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로 변경
##POST 좋아요 서버
@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': '좋아요 완료!'})👉클라이언트 로직(좋아요+1)
1. 서버에 1) POST 방식으로, 2) /api/like 라는 url에, 3) name_give라는 이름으로 name을 전달
(참고) POST 방식이므로 data: {'name_give': name} 사용
2. '좋아요 완료!' alert 창을 띄움
3. 변경된 정보를 반영하기 위해 새로고침
##POST 좋아요 클라이언트
function likeStar(name) {
$.ajax({
type: 'POST',
url: '/api/like',
data: {name_give:name},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}👉서버 로직(삭제하기)
1. 클라이언트가 전달한 name_give를 name_receive 변수에 넣음
2. mystar 에서 delete_one으로 name이 name_receive와 일치하는 star를 제거
3. 성공하면 success 메시지를 반환
##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': '삭제 완료!'})👉클라이언트 로직(삭제하기)
1. 서버에 1) POST 방식으로, 2) /api/delete 라는 url에, 3) name_give라는 이름으로 name을 전달
(참고) POST 방식이므로 data: {'name_give': name}
2. '삭제 완료! 안녕!' alert창 띄우기
3. 변경된 정보를 반영하기 위해 새로고침
##POST 삭제 클라이언트
function deleteStar(name) {
$.ajax({
type: 'POST',
url: '/api/delete',
data: {name_give:name},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}