웹서비스 기술 익히기 - 웹페이지(HTML)를 파이썬 flask로 만들기

3. 웹페이지(HTML)를 파이썬 flask로 만들기

  • flask는 flask 프로그래밍 로직에 따라 HTML 태그를 만들거나, HTML 내용을 채우기 위해 Jinja2 템플릿 엔진을 사용할 수 있음

html template with Jinja2 template engine

  • jinja2 engine을 사용하여 템플릿을 만들고 템플릿안의 값을 채워서 렌더링

1. {{ }} 일반 값 (Pycharm: 04_flask_practices/variable_html.py)

In [ ]:
from flask import Flask, render_template
app = Flask(__name__)

@app.route('/hello/<user>')
def hello_name(user):
   return render_template('variable.html', name=user)

if __name__ == '__main__':
    app.run(host="0.0.0.0", port="8080")
  • variable.html


In [ ]:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <h1>Hello {{ name }}!</h1>
</body>
</html>

2. {% for %} {% endfor %} 반복문 (Pycharm: 04_flask_practices/loop_html.py)

In [ ]:
from flask import Flask, render_template
app = Flask(__name__)

@app.route('/hello_loop')
def hello_name():
    value_list = ['list1', 'list2', 'list3']
    return render_template('loop.html', values=value_list)

if __name__ == '__main__':
    app.run(host="0.0.0.0", port="8080")
In [ ]:
<!DOCTYPE html>
<html>
    <head>
        <title>Loop</title>
    </head>
    <body>
        <div id='main'>
        <ul>
            {% for value in values %}
            <li>{{ value }}</li>
            {% endfor %}
        </ul>
        </div>
    </body>
</html>

3. {% if %} {% elif %} {% else %} {% endif %} 조건문

In [ ]:
from flask import Flask, render_template
app = Flask(__name__)

@app.route('/hello_if')
def hello_html():
    value = 20
    return render_template('condition.html', data=value)

if __name__ == "__main__":
    app.run(host="0.0.0.0", port="8080")


In [ ]:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id='main'>
        {% if data >= 30 %}
        <h3> Greater than 30 </h3>
        {% elif data > 25 %}
        <h3> Greater than 25 </h3>
        {% else %}
        <h3> {{ data }}</h3>
        {% endif %}
    </div>
</body>
</html>

4. 주석

In [ ]:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id='main'>
        {% if data >= 30 %}
        <h3> Greater than 30 </h3>
        {#
        {% elif data > 25 %}
        <h3> Greater than 25 </h3>
        {% else %}
        <h3> {{ data }}</h3>
        #}
        {% endif %}
    </div>
</body>
</html>

크롤링 데이터를 그대로 뿌려보면!

In [16]:
from flask import Flask 
import requests

app = Flask(__name__)   

@app.route("/google")
def get_google():
    response = requests.get("http://www.google.co.kr")
    return response.text 

if __name__ == "__main__":
    app.run(host="0.0.0.0", port="8080")
 * Running on http://0.0.0.0:8080/ (Press CTRL+C to quit)
127.0.0.1 - - [04/Apr/2018 21:49:06] "GET / HTTP/1.1" 404 -
127.0.0.1 - - [04/Apr/2018 21:49:11] "GET /google HTTP/1.1" 200 -
127.0.0.1 - - [04/Apr/2018 21:49:11] "GET /logos/doodles/2018/dr-maya-angelous-90th-birthday-5544539824586752.9-l.png HTTP/1.1" 404 -
127.0.0.1 - - [04/Apr/2018 21:49:11] "GET /textinputassistant/tia.png HTTP/1.1" 404 -
127.0.0.1 - - [04/Apr/2018 21:49:11] "GET /client_204?&atyp=i&biw=1745&bih=942&ei=x8nEWrvCMMWu0gT0y6KQBQ HTTP/1.1" 404 -
127.0.0.1 - - [04/Apr/2018 21:49:11] "GET /images/nav_logo229.png HTTP/1.1" 404 -
127.0.0.1 - - [04/Apr/2018 21:49:12] "GET /xjs/_/js/k=xjs.hp.en.Oq23p4pXGek.O/m=sb_he,d/am=VDA2/rt=j/d=1/t=zcms/rs=ACT90oGnImLV6_CjzrYFmdPFNFTlFWnVRA HTTP/1.1" 404 -
127.0.0.1 - - [04/Apr/2018 21:49:12] "GET /images/nav_logo229.png HTTP/1.1" 404 -
127.0.0.1 - - [04/Apr/2018 21:49:12] "GET /images/branding/product/ico/googleg_lodp.ico HTTP/1.1" 404 -