Flask로 crawling하여 html에 이미지 띄우기

1. Flask 사용해보기

• Flask란?
• Python에서 사용할 수 있는 web framework

 

1.1  필요한 라이브러리 다운로드

!pip install flask # Flask API 사용하기 위해 필요한 라이브러리
!pip install flask_cors # 웹 페이지 규칙 관련된 라이브러리

1.2  라이브러리 불러오기

# 1. 서버를 구동시킬 객체 가져오기
from flask import Flask

# 2. 요청, 응답 처리할 수 있는 함수, 변수 가져오기
# 지금은 필요없지만 만약 json 구조가 필요하다면 'jsonify' 가져오기
from flask import request, make_response, redirect

# 3. 웹 페이지 규칙
from flask_cors import CORS

1.3  Flask 서버 생성 기초

# 1. 서버를 구동할 수 있는 Flask 객체 생성
app = Flask(__name__)

# 2. urlmapping 처리하기 --> spring mvc project 유사
# 파이썬은 함수 단위로 처리(라우터) == 자바는 메소드로 처리
# @app.route("/처리하고싶은 url", methods=["전송방식"])
@app.route("/", methods=["GET"])
def start():
    return "flask data"

# ★★★★반드시 url mapping은 구동시키기 전에 잡아주기 ★★★★
@app.route("/flaskregister", methods=["GET", "POST"])
def second():
    # 요청 데이터 수집
    if request.method == "GET":
        # 1. GET 방식인 경우 요청 데이터 수집하기
        cast_name = request.args.get("cast_name")
    else :
        # 2. POST 방식인 경우 요청 데이터 수집하기
        cast_name = request.form.get("cast_name")
    
    # crawling할 수 있게끔!
    result = crawling(cast_name)
    
    # redirect 방식으로 페이지 이동시키기
    # redirect 방식으로 데이터를 되돌려줄 때는 
    # 1. query String 사용하기
    # 2. make_response("key:vlaue 형식으로 넣어주기")
    # blob 형식 ≒ 자바 쿼리스트링
    return redirect("http://localhost:8085/controller/register?result="+result)

# 3. 구동시키기 
if __name__ == "__main__": # 그냥 암기혀
    # app.run(host="ip주소", port="포트번호 unique 해야함!")
    app.run(host = "127.0.0.1", port = "9000") # ---> flask server 주소값이 결정되는 부분

1.4 크롤링 코드 짜기

def crawling(cast_name):
    from selenium import webdriver as wb
    # 웹브라우저를 통제하기 위한 라이브러리
    from selenium.webdriver.common.keys import Keys
    # 웹에게 값을 입력받기 위한 라이브러리
    from selenium.webdriver.common.by import By
    # html 문서에서 태그와 선택자를 찾기 위한 라이브러리
    from bs4 import BeautifulSoup as bs
    # 컴퓨터가 이해하기 쉬운 객체로 변환해주는 라이브러리
    import time
    # 코딩 중간에 쉬는시간을 부여해주는 라이브러리
    import os
    # 운영체제에서 제공되는 여러 기능을 파이썬에서 사용할 수 있게 해주는 라이브러리
    from urllib.request import urlretrieve
    # 이미지 경로를 이미지 파일로 바꿔주는 라이브러리
    
    driver = wb.Chrome()
    driver.get('https://www.naver.com/')
    btn = driver.find_element(By.ID, 'query')
    
    btn.send_keys(cast_name)
    btn.send_keys(Keys.ENTER)

    btn = driver.find_elements(By.CLASS_NAME, 'tab')[1]
    btn.send_keys(Keys.ENTER)
    time.sleep(2)

    # parsing하기 위해서 lxml 파일 형태로 바꾸는 과정
    driver.page_source
    soup = bs(driver.page_source, 'lxml')

    img = soup.select('div.thumb>a>img')
    img_first = img[0]['src']
    
    # 또는 bs이 아닌 다른 방법
#     img = driver.find_elements(By.CSS_SELECTOR, 'img._image.-listImage')
#     img[0].get_attribue('src')
    
    return img_first

 

register.jsp

<div class="card o-hidden border-0 shadow-lg my-5">
            <div class="card-body p-0">
                <!-- Nested Row within Card Body -->
                <div class="row">
                    <div class="col-lg-5 d-none d-lg-block  bg-register-image"><img alt="아이유 이미지" src="${param.result}"></div>
                    <div class="col-lg-7">
                        <div class="p-5">
                            <div class="text-center">
                                <h1 class="h4 text-gray-900 mb-4">출연진 등록하기</h1>
                            </div>
                            
                            <!-- Flask server에서 보내준 데이터 꺼내오기 -->
                            <h1></h1>
                            <form class="user" action="http://127.0.0.1:9000/flaskregister" method="get">
                                <div class="form-group row">
                                    <div class="col-sm-6 mb-3 mb-sm-0">
                                        <input type="text" class="form-control form-control-user" id="exampleFirstName"
                                            placeholder="일자">
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control form-control-user" id="exampleLastName"
                                            placeholder="프로그램명">
                                    </div>
                                </div>
                                <div class = "form-group">
                                	<input type="button" id = "plus_cast" class = "btn btn-primary btn-circle" value = "+">
                                </div>
                                <div id ="cast_name_area" class="form-group">
                                    <input name="cast_name" type="text" id = "cast_name" class="form-control form-control-user" placeholder="출연진">
                                </div>
                                <button type="submit">Register Cast Name</button>
                            </form>
                            <hr>
                        </div>
                    </div>
                </div>
            </div>
        </div>