무비피디아 만들기!

프로젝트 세팅하기
flask, pymongo, dnspython, requests, bs4 패키지 설치

templates안에 index.html static app.py !

새프로젝트 시 위 환경설정은 필수!
크롤링할 때는 requests 와 bs4 패키지를 설치해야한다!

크롤링 연습!

og:image / og:title / og:description 을 크롤링 할 목적으로 크롤링을 사용!

크롤링 기본 코드

import requests
from bs4 import BeautifulSoup

url = 'https://movie.naver.com/movie/bi/mi/basic.naver?code=191597'

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,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']

로 구현을 하면 제목, 사진, 설명을 가지고 올 수 있다.
meta의 property 에서 og: 값 인 content를 가지고 온다는 것이다.

POST 복습

먼저 서버를 만들고, 클라이언트를 만드는 순서로 간다.
필요한 것은 url star comment 이다.

  url_receive = request.form['url_give']
  star_receive = request.form['star_give']
  comment_receive = request.form['comment_give']

으로 받을 변수를 지정하고,

from pymongo import MongoClient
client = MongoClient(
  'mongodb://id:pw@cluster0-shard-00-00.oce1s.mongodb.net:27017,cluster0-shard-00-01.oce1s.mongodb.net:27017,cluster0-shard-00-02.oce1s.mongodb.net:27017/Cluster0?ssl=true&replicaSet=atlas-fc9srx-shard-0&authSource=admin&retryWrites=true&w=majority')
db = client.dbsparta

DB에 저장하기 위해 import를 해준다.

doc = {
    'title':title,
    'image':image,
    'desc':desc,
    'star':star_receive,
    'comment':comment_receive
  }
  db.movies.insert_one(doc)

DB에 넣어준다.

function posting() {
            let url = $('#url').val()
            let star = $('#star').val()
            let comment = $('#comment').val()

            $.ajax({
                type: 'POST',
                url: '/movie',
                data: {url_give: url, star_give:star,comment_give:comment},
                success: function (response) {
                    alert(response['msg'])
                }
            });
        }

url star comment 그때 그때 받은 데이터를 각 변수에 넣고 Ajax data에 넣어 서버와 통신할 수 있게 한다.

GET 복습

GET은 비교적 POST보다는 쉬운 것 같다..
일단 POST에서 등록해 DB에 들어간 것들을 다시 꺼내와서 뿌려만 주면 되기 때문인데..

@app.route("/movie", methods=["GET"])
def movie_get():
  movie_list = list(db.movies.find({}, {'_id': False}))
  return jsonify({'movies':movie_list})

movies안에 있는 모든 영화 자료를 가지고 와서 response 에 보내준다.

 for (let i = 0; i < rows.length; i++) {
                        let comment = rows[i]['comment']
                        let title = rows[i]['title']
                        let desc = rows[i]['desc']
                        let image = rows[i]['image']
                        let star = rows[i]['star']

응답받은 데이터를 가지고 for문을 돌려서 각 변수에 넣어준다.

그리고

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">${comment}</p>
                                                    <p>${star_image}</p>
                                                    <p class="mycomment">${desc}</p>
                                                </div>
                                            </div>
                                        </div>`
                        $('#cards-box').append(temp_html)

temp_html로 템플릿을 잡아주고 기록하기를 클릭하면 저장완료와 함께 새로고침되면서 등록된다.