ajax GET- POST 로 like 기능 구현해보았습니다.
저 같은 경우 데이터 크롤링 후 mongodb안에 데이터를 넣었으며
GET 방식으로 mongodb 데이터를 가져와 웹사이트에 띄우고 POST방식으로 like 기능 구현하였습니다.
크롤링한 웹사이트는 https://movie.naver.com/movie/sdb/rank/rpeople.nhn 이며,
크롤링하는 방법은 이전글 참고 부탁드립니다.
2022.05.18 - [개발/Python] - 웹 크롤링 기초1
2022.05.19 - [개발/Python] - 웹 크롤링 기초2 - DB연결 및 insert
우선 ajax로 데이터를 전송할 땐 아래와 같은 기본 구조로 데이터를 GET 또는 POST 방식으로 서버로 던져줍니다.
$.ajax({
url: '데이터를 보낼 곳 url',
type: 'method 속성(POST 또는 GET)',
data: {"변수1": "변수1의 값", "변수2": "변수2의 값"},
success: function (response) {
alert("데이터 전송이 성공적으로 끝났을 때 실행");
}
});
"위로!"라고 써져있는 버튼을 누르면 name 값을 name_give라는 값으로 던져서 이를 이용해 좋아요 올려 주며 낮춰주는 작업 역시 동일하게 "삭제" 버튼으로 낮출 수 있습니다.
코드는 아래와 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>좋아요 count </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"/>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<style>
.center {
text-align: center;
}
.star-list {
width: 500px;
margin: 20px auto 0 auto;
}
.star-name {
display: inline-block;
}
.star-name:hover {
text-decoration: underline;
}
.card {
margin-bottom: 15px;
}
</style>
<script>
$(document).ready(function () {
showStar();
});
function showStar() {
$.ajax({
type: 'GET',
url: '/api/list?sample_give=샘플데이터',
data: {},
success: function (response) {
console.log(response)
let dbdataG = response['dbdata']
for(let i=0; i<dbdataG.length; i++){
let name = dbdataG[i]['name']
let like = dbdataG[i]['like']
let recent = dbdataG[i]['recent']
let url = dbdataG[i]['url']
let img_url = dbdataG[i]['img_url']
let temp_data = `<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>
</div>`
$('#star-box').append(temp_data)
}
}
});
}
function likeStar(name) {
window.location.reload()
$.ajax({
type: 'POST',
url: '/api/like',
data: {name_give:name},
success: function (response){
alert(response['msg'])
}
});
}
function deleteStar(name) {
window.location.reload()
$.ajax({
type: 'POST',
url: '/api/delete',
data: {name_give:name},
success: function (response) {
alert(response['msg'])
}
});
}
</script>
</head>
<body>
<section class="hero is-warning">
<div class="hero-body">
<div class="container center">
<h1 class="title">
영화배우 좋아요
</h1>
<h2 class="subtitle">
카운트를 매겨봅시다
</h2>
</div>
</div>
</section>
<div class="star-list" id="star-box">
</div>
</body>
</html>from flask import Flask, render_template, jsonify, request
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb://db계정:db패스워드@ipaddress:27017') # mongoDB는 27017 포트로 돌아가고 계정정보 입력 부탁드립니다.
db = client.dbsparta
headers = {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
@app.route('/')
def home():
return render_template('index.html')
# API 역할을 하는 부분
@app.route('/api/list', methods=['GET'])
def show_stars():
mystar = list(db.mystar.find({},{'_id': 0}))
return jsonify({'dbdata': mystar , 'msg': 'list 연결되었습니다!'})
@app.route('/api/like', methods=['POST'])
def like_star():
name_receive = request.form['name_give'] # 받아온 name값을 선언
target_star = db.mystar.find_one({'name':name_receive}) # like 누른 대상 선언
target_like_count = target_star['like'] # 대상의 현재 like수 선언
target_new_count = target_like_count + 1 # 현재 like 수 + 1
db.mystar.update_one({'name': name_receive}, {'$set': {'like': target_new_count}}) # 업데이트 진행
return jsonify({'result': 'like', 'msg': 'like 연결되었습니다!'})
@app.route('/api/delete', methods=['POST'])
def delete_star():
name_receive = request.form['name_give']
target_star = db.mystar.find_one({'name': name_receive})
target_like_count = target_star['like']
target_new_count = target_like_count - 1
db.mystar.update_one({'name': name_receive}, {'$set': {'like': target_new_count}})
return jsonify({'msg': 'delete 연결되었습니다!'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5001, debug=True)
결과는 아래와 같습니다.
'개발 > JavaScript' 카테고리의 다른 글
| jQuery 순차적으로 보이게 하기 (0) | 2022.04.27 |
|---|