다시 도전.. Flask 웹 앱 서비스 만들기 (3)

250x250

관리 메뉴

😎 공부하는 징징알파카는 처음이지?

다시 도전.. Flask 웹 앱 서비스 만들기 (3) 본문

👩‍💻 백엔드(Back-End)/Node js

다시 도전.. Flask 웹 앱 서비스 만들기 (3)

징징알파카 2022. 11. 15. 15:51

728x90

221115 작성

<본 블로그는 wikidocs 의 블로그를 참고해서 공부하며 작성하였습니다 :-)>

https://wikidocs.net/82572

02-1 구글 검색 결과

pythonanywhere의 화이트리스트에는 구글 사이트가 있습니다. 즉, 무료 서버도 구글 웹사이트 접속이 가능합니다. 이를 이용해서 검색 결과 개수를 가져오도록 코드를 …

wikidocs.net

🍑 시작 전..

pythonanywhere의 화이트리스트에는 구글 사이트가 있음

🍑 기본적인 웹페이지 구축

🍑 index.html 세부사항

if 문법 : if 옆에 데이터가 존재하면 True로 판단, 웹 서버에서 건내받은게 없으면 내부의 코드는 생성되지 않음

{% if data %}
{% endif %}

for 문법

{% for k,v in data.items() %}
{{k}} {{v}}
{% endfor %}

loop.index 문법

{% for k,v in data.items() %}
{{loop.index}}
{% endfor %}

🛑 참고

: 줄바꿈 하면 생성되는 div들 간에 여백이 생김

: 코딩 문제가 아니라 html 자체가 요소(element)간의 간격을 4px(또는 0.25em)이 자동으로 생겨남

: 해결하기위해 -4px을 없애거나, 줄 바꿈 없이 코드를 생성시키는 것

=> 변경 전
{% for k,v in data.items() %}
    <div class="box box{{loop.index}}" value="{{v}}">{{k}}</div>
{% endfor %}

=> 변경 후
{% for k,v in data.items() %}<div class="box box{{loop.index}}" value="{{v}}">{{k}}</div>{% endfor %}

🍑 코드 내용

main.js
- 현재 없음..
style.css

h1{
    color : blue;
}

index.css

.box{
    border:5px solid black;
    width : 200px;
    height: 100px;
    display: inline-block;
    /* 테두리(border)를 포함하여 사이즈를 계싼 */
    box-sizing: border-box;         
    margin : 0;
    color : white;
    font-weight: 900;
    /* 글자를 중앙 정렬 */
    text-align: center;
    line-height: 90px;
}

.box1{
    background-color: orange;
}

.box2{
    background-color : blue;
}

index.html

<!-- 필요한 html 파일을 모아둘 예정 -->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="{{url_for('static',filename='index.css')}}">
</head>
<body>
    <form action="/" method="post">
        <p><label for="keyword1">키워드1 </label><input type="text" name="keyword1" id="keyword1"></p>
        <p><label for="keyword2">키워드2 </label><input type="text" name="keyword2" id="keyword2"></p>
        <!-- <button type="submit">검색</button> -->
        <input type = "submit" value = "검색">
        
    </form>

        <!-- {{data}} -->
        <!-- whitespace를 위해 1줄 처리 -->
    {% if data %}
    <div id="result">
        {% for k,v in data.items() %}<div class="box box{{loop.index}}" value="{{v}}">{{k}}</div>{% endfor %}
    {% endif %}

    <!-- {% if data %}
    <div id="result">
        {% for k,v in data.items() %}<div class="box {{loop.index}}" value="{{v}}">{{k}}</div>{% endfor %}
    </div>
    {% endif %} -->


    <script src="{{url_for('static',filename='index.js')}}"></script>
</body>
</html>

app.py

##### 실행시 서버가 가동될 파이썬 파일 #####
# 구글 검색 결과를 페이지에 보내주도록 만들기

# /app.py
from flask import Flask, render_template, request
import google_keyword

#Flask 객체 인스턴스 생성
app = Flask(__name__)

@app.route('/',methods=('GET', 'POST')) # 접속하는 url

def index():
    # 웹 페이지에서 name="xxx"인 요소의 value 가져오기
    print(request.form.get('keyword1'))
    print(request.form.get('keyword2'))
    keyword1 = request.form.get('keyword1')
    keyword2 = request.form.get('keyword2')

    # 위의 값이 있을 때만 크롤링 검색 결과 반환
    if keyword1 is not None and keyword2 is not None:
        data = {
            keyword1 : google_keyword.get_search_count(keyword1).get('number'),
            keyword2 : google_keyword.get_search_count(keyword2).get('number'), 
            }
        return render_template('index.html',data=data)
    else:
        return render_template('index.html')

# if __name__=="__main__":
#     app.run(debug=True)
if __name__ == '__main__':
    app.run(host='0.0.0.0', port=1234 ,debug=True)

google_keyword.py

import requests
from bs4 import BeautifulSoup

def get_search_count(keyword):
    url = "https://www.google.com/search?q={}".format(keyword)
    headers = {'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36'}
    res = requests.get(url, headers=headers)

    # HTML 소스코드, 사용할 parser
    soup = BeautifulSoup(res.text, 'lxml')
    number = soup.select_one('#result-stats').text
    
    # print(number) # 검색결과 약 7,320,000개 (0.47초) 
    # 개수만 남기기위해 슬라이싱
    number = number[number.find('약')+2:number.rfind('개')] # 7,320,000
    number = int(number.replace(',','')) # 7320000

    # 검색어와 검색 결과 수에 대한 결과를 dict으로 반환
    return {'keyword':keyword, 'number':number}

if __name__ == '__main__':
    print(get_search_count("나루토"))

🍑 결과

728x90

저작자표시

'👩‍💻 백엔드(Back-End) > Node js' 카테고리의 다른 글

웹에서 그래프 만드는 c3.js 알아보기 (0)	2022.11.21
웹페이지에 csv 파일 그래프 그리기 (0)	2022.11.17
다시 도전.. Flask 서버에서 클라이언트로 데이터 보내기 (2) (0)	2022.11.15
다시 도전.. Flask 기본적인 웹 페이지 구축 (1) (0)	2022.11.15
Flask 웹 페이지 만들기 with Best Book to Read in 2021 탐색적 데이터 분석 (0)	2022.11.11