[web]영화 한줄평 남기기 페이지

ksmlucky·2021년 5월 2일

web

목록 보기

3/3

영화 한줄평 남기기 페이지

Python, MongoDB, Flask, html, css, js 를 사용하여 만든 영화 한줄평 및 코멘트 남기기 페이지입니다.
깃허브 : https://github.com/ksmlucky/MovieMemoPage/tree/main

진행 과정

app.py 부분

Flask와 MongoDB Import해주기

from flask import Flask, render_template, jsonify, request
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbmoviesmemo

## HTML 화면 보여주기, HTML을 주는 부분, 'index.html' 파일을 쭉 읽으라는 뜻
@app.route('/')
def home():
    return render_template('index.html')

네이버 영화 페이지의 html 형식에 맞춰서 내려줍니다.

영화 정보 내려주기

@app.route('/memo', methods=['GET'])
def listing():
    # 1. 모든 document 찾기 & _id 값은 출력에서 제외하기
    articles = list(db.articles.find({}, {'_id': False}))
    # 2. articles라는 키 값으로 영화정보 내려주기
    return jsonify({'result': 'success', 'articles': articles})

API 역할을 하는 부분을 만들어 줍니다.

API 역할을 하는 부분

## API 역할을 하는 부분
@app.route('/memo', methods=['POST'])
def saving():
    # 1. 클라이언트로부터 데이터를 받기
    # 2. meta tag 가져오기
    # 3. mongoDB에 데이터 삽입
    url_receive = request.form['url_give']
    comment_receive = request.form['comment_give']
    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')
    title = soup.select_one('meta[property="og:title"]')['content']
    image = soup.select_one('meta[property="og:image"]')['content']
    desc = soup.select_one('meta[property="og:description"]')['content']
    doc = {
        'title': title,
        'image': image,
        'desc': desc,
        'comment': comment_receive,
        'url': url_receive
    }
    db.articles.insert_one(doc)
    return jsonify({'result': 'success', 'msg': '저장 완료!'})

index.html 부분

네이버 영화의 url 링크와 입력한 한줄평을 받는 부분의 함수를 만들어 줍니다.

postArticle() 함수

        function postArticle() {
            let url = $('#post-url').val()
            let comment = $('#post-comment').val()
            $.ajax({
                type: "POST",
                url: "/memo",
                data: {url_give: url, comment_give: comment},
                success: function (response) { // 성공하면
                    if (response["result"] == "success") {
                        alert(response["msg"]);
                        window.location.reload();
                    }
                }
            })
        }

입력하여 저장된 url 링크와 한줄평을 보여주는 함수를 만들어 줍니다.

showArticles() 함수

        function showArticles() {
            $.ajax({
                type: "GET",
                url: "/memo",
                data: {},
                success: function (response) {
                    if (response["result"] == "success") {
                        let articles = response['articles']
                        for (let i = 0; i < articles.length; i++) {
                            let title = articles[i]['title']
                            let url = articles[i]['url']
                            let image = articles[i]['image']
                            let desc = articles[i]['desc']
                            let comment = articles[i]['comment']
                            makeCard(url, title, desc, comment, image)
                        }
                    }
                }
            })
        }

바로 위의 makeCard() 함수는 카드를 페이지의 하단에 append해주는 역할을 합니다.