Step 3. API 만들고 사용하기

1. POST

1) 데이터 명세

1. 요청 정보 :  URL= /movie, 요청 방식 = POST
2. 클라이언트(fetch) → 서버(flask) : url, comment
3. 서버(flask) → 클라이언트(fetch) : 메시지를 보냄 (포스팅 완료!)

 

2) 클라이언트와 서버 연결 확인

POST 연결 확인 : 버튼 눌렀을 때 msg alert창

 

3) 서버단(app.py) 먼저 만들고

데이터베이스에 연결해주고

url, comment 등 정보를 받아서 db에 저장 (전에 공부한 dbprac.py 참고)

 

4) 클라이언트단(index.html)

url, comment 등의 데이터를 formData에 넣어서 보내줌

 

5) 완성 후 동작테스트

DB 잘 들어갔는지 mongoDB Atlas 확인

 

 

 

---

2. GET

1) 데이터 명세

1. 요청 정보 :  URL= /movie, 요청 방식 = GET
2. 클라이언트(fetch) → 서버(flask) : 없음
3. 서버(flask) → 클라이언트(fetch) : 전체 주문 데이터를 보내주기

 

2) 클라이언트와 서버 연결 확인

GET 연결 확인 : 새로고침했을 떄 msg console창

 

3) 서버단(app.py) 먼저 만들고

'result'에 정보를 담아서 내려줌

 

4) 클라이언트단(index.html)

리스트 형식으로 받은 데이터들을 forEach문으로 반복하면서 데이터 뽑음

temp_html 만들어서 데이터랑 연결

완성된 temp_html을 해당 태그에 제이쿼리로 append

 

5) 완성 후 동작테스트

화면 새로고침 했을 때, DB 저장된 리뷰가 화면에 제대로 뿌려지는 지

 

 

 

---

코드 최종 정리

서버단(app.py)

# Flask에 render_template 기능을 이용하겠다

# request, jsonify는 GET, POST요청 시 사용

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

# [MongoDB 연결 템플릿] 
from pymongo import MongoClient

client = MongoClient('몽고DB URL입력')

db = client.dbsparta

# [크롤링 템플릿] meta tag 가져올거 

import requests

from bs4 import BeautifulSoup

@app.route('/')

def home():

    return render_template('index.html')

@app.route("/movie", methods=["POST"])

def movie_post(): # !! 데이터를 쌓는거 먼저 !! 백 먼저

    url_receive = request.form['url_give']

    comment_receive = request.form['comment_give']

    star_receive = request.form['star_give']

    # 1. [크롤링 템플릿] URL은 사용자가 입력한 url_receive로 대체함

    # 데이터들을 변수에 저장 ㄱ

    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'}

    data = requests.get(url_receive,headers=headers)

    soup = BeautifulSoup(data.text, 'html.parser')

    ogtitle = soup.select_one('meta[property="og:title"]')['content']

    ogimage = soup.select_one('meta[property="og:image"]')['content']

    ogdesc = soup.select_one('meta[property="og:description"]')['content']

    # 2. 받은 데이터들을 데이터베이스에 넣기 -> dbprac 참고

    # doc(딕셔너리)만들어서 insert해주면 끝

    doc = {

        'title' : ogtitle,

        'desc' : ogdesc,

        'image' : ogimage,

        'comment' : comment_receive,

        'star' : star_receive,

    }

    db.movies.insert_one(doc)

    return jsonify({'msg':'저장완료!'})

@app.route("/movie", methods=["GET"])

def movie_get():

    # 1. movie에 대한 데이터들을 변수에 전부 갖다넣음

    all_movies = list(db.movies.find({},{'_id':False}))

    # 2. 위 변수에 담은 데이터를 내려주면 서버역할 끝

    return jsonify({'result':all_movies})

if __name__ == '__main__':

    app.run('0.0.0.0', port=5000, debug=True)

 

 

클라이언트단(index.html)

<script>

            $(document).ready(function () {

                listing();

                set_temp();

            });

 

            // OpenAPI는 이미 데이터베이스가 구축된 서버이므로 우리는 클라이언트단(fetch)만 만들면 됨
            function set_temp() {

                fetch('OpenAPI URL입력')

                    .then((res) => res.json())

                    .then((data) => {

                        let temp = data['temp'];

                        $('#temp').text(temp);

                    });

            }

            function listing() {

                fetch('/movie')

                    .then((res) => res.json())

                    .then((data) => {

                        // 1. 백엔드에서 받은 all_movies를 꺼내옴

                        let rows = data['result'];

                        // 2. list 돌려(출력?)

                        $('#cards-box').empty();

                        rows.forEach((a) => {

                            // (1) 데이터들 꺼내

                            let comment = a['comment'];

                            let title = a['title'];

                            let desc = a['desc'];

                            let image = a['image'];

                            let star = a['star'];

                            let star_repeat = '⭐'.repeat(star);

                            // (2) HTML템플릿 만들어서 붙여

                            let temp_html = `<div class="col">

                                                <div class="card h-100">

                                                    <img src="${image}" class="card-img-top" />

                                                    <div class="card-body">

                                                        <h5 class="card-title">${title}</h5>

                                                        <p class="card-text">${desc}</p>

                                                        <p>${star_repeat}</p>

                                                        <p class="mycomment">${comment}</p>

                                                    </div>

                                                </div>

                                            </div>`;

                            $('#cards-box').append(temp_html);

                        });

                    });

            }

            function posting() {

                // !! 데이터를 쌓는거 먼저 !! 백 먼저

                // 1. 사용자가 입력한 데이터 받아와

                let url = $('#url').val();

                let comment = $('#comment').val();

                let star = $('#star').val();

                let formData = new FormData();

                // 2. formData에 태워서 보내주자

                formData.append('url_give', url);

                formData.append('comment_give', comment);

                formData.append('star_give', star);

                fetch('/movie', { method: 'POST', body: formData })

                    .then((res) => res.json())

                    .then((data) => {

                        // 3. data가 넘어오는데

                        alert(data['msg']);

                        window.location.reload(); // refresh새로고침

                    });

            }

            function open_box() {

                $('#post-box').show();

            }

            function close_box() {

                $('#post-box').hide();

            }

        </script>