4주차(10~15)-스파르타피디아(GET, POST+크롤링)

프로젝트 세팅하기

• 크롤링을 하기위한 [requests, bs4]패키지 설치하기
• mongoDB를 조작하기위한 [Flask, pymongo, dnspython, certifi]패키지 설치하기

---

 

조각 기능 구현해보기

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']
description = soup.select_one('meta[property="og:description"]')['content']

print(title, image, description)

네이버사이트는 코드로 접근하는 것과 사람이 접근하는 것에 대한 차이를 두기때문에 기존 3주차에 배웠던 방식으로 코드를 작성하면 

오류가 생기기에 이러한 새로운 방식을 사용한다.

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

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

위의 두줄과 아래의 두줄은 정확히 동치이다.

---

POST 연습(포스팅하기)

구현해야할 기능 -> url, star, comment 값을 제출하고, 그 값을 서버에 저장하기 -> 저장이므로 POST방식 사용

• 클라(ajax) → 서버(flask) : url, star, comment 
• 서버(flask) → 클라(ajax) : 포스팅완료 메세지 출력

 

서버코드

@app.route("/movie", methods=["POST"])
def movie_post():
    url_receive = request.form['url_give']
    star_receive = request.form['star_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,
        'star':star_receive,
        'comment':comment_receive
    }
    db.movies.insert_one(doc)

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

 

클라이언트코드

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'])
                    window.location.reload()
                }
            });
        }

---

GET 연습(보여주기)

 

구현해야할 기능 -> 이미 mongoDB에 저장된 url, star, comment 값을 서버에서 가져오기 -> 요청이므로 GET방식 사용

• 클라(ajax) → 서버(flask) : 없음
• 서버(flask) → 클라(ajax) : url, star, comment데이터값 제출

 

서버코드

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

 

클라이언트코드

        $(document).ready(function(){
          listing();
        });

        function listing() {
            $.ajax({
                type: 'GET',
                url: '/movie',
                data: {},
                success: function (response) {
                    let rows = response['movies']
            for(let i = 0; i < rows.length; i++) {
                let image = rows[i]['image']
                let title = rows[i]['title']
                let desc = rows[i]['desc']
                let star = rows[i]['star']
                let comment = rows[i]['comment']

                let star_image = '⭐'.repeat(star)

                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_image}</p>
                                            <p class="mycomment">${comment}</p>
                                        </div>
                                    </div>
                                </div>`

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