๐ ๊ณต๋ถํ๋ ์ง์ง์ํ์นด๋ ์ฒ์์ด์ง?
๋ค์ ๋์ .. Flask ์น ์ฑ ์๋น์ค ๋ง๋ค๊ธฐ (3) ๋ณธ๋ฌธ
๐ฉ๐ป ๋ฐฑ์๋(Back-End)/Node js
๋ค์ ๋์ .. Flask ์น ์ฑ ์๋น์ค ๋ง๋ค๊ธฐ (3)
์ง์ง์ํ์นด 2022. 11. 15. 15:51728x90
๋ฐ์ํ
221115 ์์ฑ
<๋ณธ ๋ธ๋ก๊ทธ๋ wikidocs ์ ๋ธ๋ก๊ทธ๋ฅผ ์ฐธ๊ณ ํด์ ๊ณต๋ถํ๋ฉฐ ์์ฑํ์์ต๋๋ค :-)>
๐ ์์ ์ ..
- 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' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Comments