크롤링-스파르타피디아(1)

웹개발 종합반 4주차 -  크롤링-스파르타피디아(1)

 

import requests

from bs4 import BeautifulSoup

URL = 'https://movie.daum.net/moviedb/main?movieId=161806'

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

먼저 선행으로 프로젝트 세팅을 해주고 스즈메의 문단속의 정보들을 가져올것이다.

 

 

 

검사 ➡️ meta 태그의 property가 og:title인 애를 가지고 오는데 우리가 필요한건?? "스즈메의 문단속"이 들어있는 content라고 하는 속성이 필요하다.

 

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

print(ogtitle)

일단 여기까지 입력하고 실행! 

(터미널에 pythom m 을 입력하고 tap키를 누르면 자동으로 뒤에 단어가 생성되고 엔터누르면 실행됨. 그냥 tip)

 

= <meta content="스즈메의 문단속" property="og:title"/>

실행하면 위와 같이 적은대로 가져오는데 그 안에서  content속성을 필요로 한다.

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

print(ogtitle['content'])

= 스즈메의 문단속

 

 

지금 내가 가져온 url은 '다음 영화' 이지만 사실 다른 사이트의 영화 url을 가지고 와도 잘 나타난다. 그 이유는 공통된 meta 태그 형식을 쓰고 있기 때문. 따라서 이런 url들에 국한되지 않고 정보를 가지고 오려면 공통적으로 가지고 있는 이 meta태그의 요소를 그대로 가지고 오는 것이 좋다!

 

 

 

 

 

뼈대 만들기

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

@app.route('/')

def home():

    return render_template('index.html')

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

def movie_post():

    sample_receive = request.form['sample_give']

    print(sample_receive)

    return jsonify({'msg':'POST 연결 완료!'})

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

def movie_get():

    return jsonify({'msg':'GET 연결 완료!'})

if __name__ == '__main__':

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

'sample_give'를 받으면 'msg':'POST 연결 완료!' 를 보냄

GET쪽은 아무것도 안받고 있지만 /movie 로 들어오고 있음 그리고  'msg':'GET 연결 완료!'  데이터를 줌

 

 

<script>

        $(document).ready(function () {

            listing();

        });

        function listing() {

            fetch('/movie').then((res) => res.json()).then((data) => {

                console.log(data)

                alert(data['msg'])

            })

        }

        function posting() {

            let formData = new FormData();

            formData.append("sample_give", "샘플데이터");

            fetch('/movie', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {

                console.log(data)

                alert(data['msg'])

            })

        }

        function open_box() {

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

        }

        function close_box() {

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

        }

    </script>

그리고 posting 이라는 함수가 있는데 

 <button onclick="posting()" type="button" class="btn btn-dark">기록하기</button>

이 기록하기 버튼을 누르면  "sample_give","샘플데이터"를 담아서 백엔드 쪽으로 보내주는 기능을 하게 된다.

그리고 백엔드에서 받은 'msg'의 'POST 연결 완료!' 를 브라우저에 보여줌.

 

잘 연결됨을 확인!