Python, Ajax 활용 예제 - 좋아요 기능
일의 순서
1. DB에서 인물 리스트를 내려 받고,
2. 클라이언트에 제공해준다.
3. 클라이언트에서는 좋아요, 삭제 등 함수값을 서버쪽에 넘기면
4. 서버는 그 값을 받고, DB를 수정해준다.
기본 임포트 값
from pymongo import MongoClient
from flask import Flask, render_template, jsonify, request
1. 리스트 내려주기 - 서버 쪽 ( Python )
@app.route('/api/list', methods=['GET'])
def show_stars():
movie_stars = list(db.mystar.find({}, {'_id': False}).sort('like', -1))
return jsonify({'my_stars': movie_stars})
/api/list, GET 요청이 들어오면
mystar의 DB에서 리스트를 내려 받는다.
함수 show_stars() 를 실행하고
movie_stars에 이는 모든 list를 내려 받는다.
movie_stars를 'my_stars'에 담는다.
2. 리스트 내려주기 - 클라이언트 쪽 (HTML)
function showStar() {
$.ajax({
type: 'GET',
url: '/api/list',
data: {},
success: function (response) {
let mystars = response['my_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)
}
}
});
}
$(document).ready(function () {
showStar();
});
=> 새로 고침 될 때마다 showStar의 함수를 실행한다.
showStar 함수가 실행되면,
url : /api/list에 GET 요청으로 'ajax 콜을 한다.
아까 받아온 값으로 mystars라는 변수를 만든다. let mystars = response['my_stars']
for문으로 한 바퀴 돌리고, 넣어야할 값들에 각각 변수를 만든다.
여기서 oneclick='likeStar('${name}') 처럼 oneclick 함수에도 이런 식으로 값을 지정해 줄 수 있다.
이렇게 정해주면 나중에 좋아요. 삭제 기능을 저 함수에 적용된 값을 통해 만들 수 있다.
2. 좋아요 - 서버 쪽 (Python)
@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_give로 클라이언트에서 받아온 값을 name_receive에 받는다.
그 후 db에서 'name'값과 name_receive 값이 같은 것을 찾은 후
curren_like 변수를 만든다.
(바로 위에서 찾은 target_star 데이터 안에 있는 'like' 값 이니 즉 현재 좋아요다)
new_like 변수를 만든다.
(current_like에 +1 을 한 것으로 좋아요가 1올라간 것)
new_like 값을 db에 저장해 준다.
클라이언트에 내려줄 'msg'를 정해준다.
2. 좋아요 - 클라이언트 쪽 (Html)
function likeStar(name) {
$.ajax({
type: 'POST',
url: '/api/like',
data: {
name_give : name
},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}
likeStar(name) 의 함수가 실행되었을 때
(name값을 아까 리스트로 내려줬으니 각 좋아요 버튼에는 리스트 각각의 name값이 있을 것)
ajax 콜을 하여 서버쪽의 name_give에 name값을 보낸다.
성공하면 alert으로 서버쪽의 msg를 띄우고,
window.location.reload()를 통해 새로고침 한다.
3. 삭제하기 Python & Html
@app.route('/api/delete', methods=['POST'])
def delete_star():
delete_receive = request.form['delete_give']
db.mystar.delete_one({'name': delete_receive})
return jsonify({'msg': 'delete 연결되었습니다!'})
function deleteStar(name) {
$.ajax({
type: 'POST',
url: '/api/delete',
data: {
delete_give: name},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}
delete_one을 사용하여 db값을 하나 삭제할 때는, 저렇게 'name'값과 delete_receive값이 같은 db 하나 자체를 삭제한다.
'Back > Python' 카테고리의 다른 글
Ajax 기본 및 예제 (1) | 2021.03.07 |
---|---|
Flask jinja2, requests - args 활용 예제 (0) | 2021.03.05 |
다음 뉴스 랭킹 크롤링(Crawling) 예제 (0) | 2021.03.02 |
Python Flask, Ajax 활용 예제 - 링크 따오기 (1) | 2021.02.23 |
Flask에서 Ajax 요청하기 POST 예제 - 북리뷰(book-review) (0) | 2021.02.20 |