Python, Ajax 활용 예제 - 좋아요 기능

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 하나 자체를 삭제한다.