API
#
# ์ข์์ POST
#
@app.route('/api/like', methods=['POST'])
def new_post_like():
like_receive = request.form['like_give']
post_id_receive = request.form['post_id_give']
print(post_id_receive, like_receive)
# ์ ์ฅํ๊ณ
doc = {
'likes': like_receive,
'post_id' : post_id_receive
}
db.likes.insert_one(doc)
return jsonify({'msg': 'like +1'})
@app.route('/api/like', methods=['POST'])
def update_post_like():
post_id_receive = request.form['post_id_give']
# ์ถ๊ฐ๋ก find_one์ ํ๋์ ์๋ฃ๋ง ์ฐพ์ผ๋ฉด ๋๋ list๋ฅผ ์ฌ์ฉํ์ง ์๋๋ค.
target_like = db.post.find_one({'_id': post_id_receive})
# print("target : " + target_star)
# like ๊ฐ ๊ฐ์ ธ์ด
cur_like = target_like['post_like']
#์๋ก์ด like ๊ฐ ๊ฐฑ์ ์ ์ํด ์์ ์ ์ฅ ๋ณ์
new_like = cur_like + 1
print(post_id_receive)
print(target_like)
print(new_like)
#๊ฐฑ์ , (์กฐ๊ฑด, set+๋ฐ๊ฟ๊ฐ)
db.post.update_one({'post_id': post_id_receive}, {'$set': {'likes': new_like}})
return jsonify({'msg': 'like +1'})
#
# ์ข์์ GET
#
@app.route('/api/like', methods=["GET"])
def post_like():
like_list = list(db.likes.find({}, {'_id': False}).sort('likes', -1))
return jsonify({'likes': like_list})
JQuery : Ajax
$(window).ready(function () {
// 500s ์๊ฐ ์ง์ฐ
setTimeout(function(){ show_like(); }, 500);
});
// ์ข์์ ๊ธฐ๋ฅ POST
function add_like(post_id) {
let like = $(`#${post_id}`).val()
$.ajax({
type: "POST",
url: "/api/like",
data: {like_give: like, post_id_give: post_id},
success: function (response) {
console.log(response)
alert(response['msg']);
window.location.reload()
}
});
}
// ์ข์์ ๊ธฐ๋ฅ GET
function show_like() {
$.ajax({
type: "GET",
url: "/api/like",
data: {},
success: function (response) {
console.log(response['likes'])
let rows = response['likes']
for (let i = 0; i < rows.length; i++) {
let like = rows[i]['likes']
let post_id = rows[i]['post_id']
console.log(like, post_id)
// $(`.${post_id}`).show(temp_html)
}
}
});
}
JQuery : Ajax (ํ์๋ถ๋ถ)
/* GET ์์ฒญ ajax ์ฝ๋ */
function post_listing() {
$.ajax({
type: "GET",
url: "/listing",
data: {},
success: function (response) {
let posts = JSON.parse(response['posts'])
for (let i = 0; i < posts.length; i++) {
console.log(posts)
let post_id = posts[i]['_id']['$oid']
let post_hashtag = posts[i]['post_hashtag']
let post_comment = posts[i]['post_comments']
let post_like = posts[i]['post_like']
let post_pic = posts[i]['post_pic']
let temp_html =`
<!--์ข์์ ๋ฒํผ-->
<button
class="like-btn"
onclick=add_like('${post_id}')>
<span
class="material-icons-outlined">
favorite_border
</span>
</button>
<!--์ข์์ ํ์-->
<div >์ข์์ ${post_like}๊ฐ</div>
`
์ค๋ฅ
- ์ข์์ ํ์ DB ๋ฅผ ์ฐพ์ง ๋ชปํจ
- DB ์ ์ ์์ ์ธ ์์น๊ฐ ์ ์ฅ๋์ง ์์
- DB ์์ post_id ์ ํด๋นํ๋ likes ์๊ฐ ๋์ด๋์ง ์๊ณ , ํ์ด ์ถ๊ฐ๋จ
ํด๊ฒฐ ๋ฐฉ์(์๊ฐ)
- ์ผ๋จ DB ์ ์ ์ฅํ๋ API ๋ถ๋ถ์ ํน์ ์กฐ๊ฑด์ ๊ฑธ์ด DB ๊ฐ์ +1 ์ฉ ์ถ๊ฐ ๊ธฐ๋ฅ ์ ์ฉ ์๋
- ๊ฒ์๊ธ์ post_id ๊ฐ์ ํด๋นํ๋ likes ๊ฐ์ ํ์ํ ์ ์๋๋ก ๊ตฌํํ๊ณ ์ ํจ.
- but ์ ๋๋ก ๋ ์์น๊ฐ ์ ์ฉ๋์ง ์์ undefind ๋ก ํ์