[python]파이썬 크롤링, mongodb, html, flask, bs4 활용

1. API 역할 url 받고 메시지 호출

2.  로딩이 되면 자동 요청 되는 부분 
     <script> $(document).ready( function() {
     함수이름();
     })

 

#1. 서버쪽 (app.py)

 : robo 3T (mongodb 에 저장 된 내용) 정보를 받아서 표기하자

*조건 : like가 큰 순서로 보여지게

 

1. db를 가져와서 변수에 저장하기

movie_star = list(db.mystar.find({}, {'_id': False}))  #robo3T로부터 조건 없이 다 가져옴

 

  *내림차순으로 정리하기 : .sort( 'like',-1)

 

movie_star = list(db.mystar.find({}, {'_id': False}).sort('like',-1))

 

# API 역할을 하는 부분
@app.route('/api/list', methods=['GET'])
def show_stars():
    movie_star = list(db.mystar.find({}, {'_id': False}).sort('like',-1))  #robo3T로부터 조건 없이 다 가져옴
    return jsonify({'movie_stars': movie_star})

---1차적으로 내용 가져오기 , 서버 끝 ---

 

#2. index 쪽 (index.html)

 : 서버쪽에서 데이터를 보여줄 내용을 작성

return jsonify({'movie_stars': movie_star})

app.py 서버에서 준 리턴값 : response['movie_stars']

*서버 열자마자 준비되는 함수

     <script>
    $(document).ready(function () {
         showStar();
     });

 

함수 showStar() 를 수정하자

 

function showStar() {
        $.ajax({
        type: 'GET',
        url: '/api/list?sample_give=샘플데이터',
        data: {},
        success: function (response) {
        
        let my_stars = response['movie_stars']
        console.log(my_stars)

 

ㄴ> response에 들어온 movie_stars를

console.log 로 확인

 

function showStar() {
        $.ajax({
        type: 'GET',
        url: '/api/list?sample_give=샘플데이터',
        data: {},
        success: function (response) {
        
         let my_stars = response['movie_stars']
          // console.log(my_stars)
                   
 for (let i = 0; i < my_stars.length; i++) {
                        let name = my_stars[i]['name']
                        let img_url = my_stars[i]['img_url']
                        let recent = my_stars[i]['recent']
                        let url = my_stars[i]['url']
                        let like = my_stars[i]['like']

                        // console.log(name, img_url, recent, url, like) 

ㄴ> my_stars에 저장된 항목 하나하나를 각 변수를 만들어 저장,

     console.log( name, img ... ) 로 잘 나오나 확인

 

  <script>
        $(document).ready(function () {
            showStar();
        });

        function showStar() {
            $.ajax({
                type: 'GET',
                url: '/api/list?sample_give=샘플데이터',
                data: {},
                success: function (response) {
                    // alert(response['msg']);
                    let my_stars = response['movie_stars']
                    // console.log(my_stars)
                    for (let i = 0; i < my_stars.length; i++) {
                        let name = my_stars[i]['name']
                        let img_url = my_stars[i]['img_url']
                        let recent = my_stars[i]['recent']
                        let url = my_stars[i]['url']
                        let like = my_stars[i]['like']

                        // console.log(name, img_url, recent, url, 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)

                    }


                }
            });
        }

ㄴ>위의 변수를  let temp_html = ` 형식 `   빽틱 사이에 필요한 부분에 ${ 변수 } 형태로 바꿔서 저장

ㄴ> $('#star-box').append( ) 를 이용하여 body에 원하는 곳의 id 에 출력하기

      * id 호출은 $('# id ') 로 한다.

 

#3. 좋아요 누르면 +1 씩올라가는 함수 

     이름에 해당하는 like 를 찾아와서 +1 을 하여 업데이트 시켜주자

  dp에서 한 항목 찾기 / 

 

 1. 서버 쪽 작업 부터

   : 먼저 이름을 받아와야한다.

@app.route('/api/like', methods=['POST'])
def like_star():
    name_receive = request.form['name_give']

    return jsonify({'msg': 'like 좋아요~~!'})

 ㄴ> request.form 으로 name_receive(변수)에 받아오고나서 아래처럼 이름에 해당하는 점수를 불러와서 

        현재 점수에 +1를 하여 더하는 과정을 코딩한뒤 mongodb에 업데이트 하는 코드를 적용한다.

 ㄴ>  'request.form['name_give']   // * from flask import Flask, render_template, jsonify, request  임포트 됨

@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': 'like 좋아요~~!'})

ㄴ> db.mystar.find_one({'name' : name_receive})  : mystar 에 저장된 name이 있는 리스트를 찾아서 target_star에 저장

ㄴ> target_star['like'] : target_star 에 있는 'like' 항목의 값을 current_like 에 저장

ㄴ> db.mystar.update_one({'name' : name_receive} , {'$set' : { 'like ' : new_like}}) : 받아온 name_receive에 해당하는

리스트 항목의 'like' 항목의 값을 new_like 로 업데이트해줌

 

        function likeStar(name) {
            $.ajax({
                type: 'POST',
                url: '/api/like',
                data: {name_give: name},
                success: function (response) {
                    alert(response['msg']);
                window.location.reload()
                }
            });
        }

ㄴ> alert(response ['msg']) 출력

ㄴ> window.location.reload() : 새로고침