Flask 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.
jinja2 template(Python)
jinja2 template를 사용하여, 파이썬(flask) 코드로 웹 페이지(HTML)를 만드는 연습을 하고자 한다.
jinja2 template
jinja2 템플릿은 웹 페이지에서 필요한 부분을 변경할 필요가 있을 때, 사용하는 간단한 문법이다.
(웹 페이지에서 파이썬 프로그래밍 가능)
*참고
jinja2 템플릿 엔진이 해당 HTML 코드를 템플릿으로 만들면, 템플릿 안의 존재하는 파이썬 코드를 실행시켜 템플릿을 채운 후 최종 HTML 파일을 생성하는 원리이다.
jinja2 template 변수(문법)
*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>
</head>
<body>
<h1>Hello {{ name1 }}</h1>
<h2>{{ name2 }}</h2>
<h1>안녕하세요</h1>
</body>
</html>
*파이썬 파일
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/hello/<user>')
def hello_name(user):
return render_template('variable.html', name1=user, name2=2)
if __name__ == '__main__':
app.run(host="0.0.0.0", port="8080")
```
결과 :
```
*기본 구조(문법)
- {{ 변수명 }}
- {% 파이썬 소스코드 %}
@app.route('/hello/<user>')는 앞서 배운 것처럼, 라우팅 경로인 /hello 뒤에 원하는 값 입력하면 해당 값을 hello_name() 함수의 인자로 넣을 수 있다.
또한, render_template() 함수를 통해 인자로 들어온 값은 변수 name1에 할당된다.
한편, render_template() 함수로 variable.html 파일을 열면서 변수 name1과 name2는 해당 html 파일의 jinja2 템플릿 문법에 적용된다.
즉, variable.html 파일에서 {{ name1 }}과 {{ name2 }} 위치에 해당 변수들이 들어가는 것이다.
jinja2 template 반복문(문법)
*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>
</head>
<body>
<ul>
{% for value in values %}
<li>목차 : {{ value }}</li>
{% endfor %}
</ul>
</body>
</html>
*파이썬 파일
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")
```
결과 :
```
*기본 구조
- {% for %} {% endfor %}
for로 반복문을 선언하고, endfor로 반복문을 끝내면 된다.
*예시
- {% for value in values %}
{{ value }}
{% endfor %}
참고로, 인덴테이션(들여쓰기)는 안해도 된다.
jinja2 template 반복문(추가 문법)
*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>
</head>
<body>
<ul>
{% for index in range(values | length) %}
<li>{{ values[index] }} {{ loop.index }}</li>
{% endfor %}
</ul>
</body>
</html>
*파이썬 파일
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")
```
결과 :
```
*예시
- <ul>
{% for index in range(values | length) %}
<li>{{ values[index] }} {{ loop.index }}</li>
{% endfor %}
</ul>
jinja2 템플릿의 문법은 파이썬 문법과 유사한 것이지 완전히 동일한 것은 아니다.
*참고
range() : 파이썬 문법과 동일
len(values) : values | length로 작성해야 함
loop.index : 반복문의 횟수를 반복문 안에서 표시할 수 있음(단, 1부터 시작함) > enumerate() 함수와 유사한 기능
value[index] : 파이썬 리스트 문법과 동일
jinja2 template 조건문(문법)
*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>
</head>
<body>
{% if data >= 30 %}
<h3>30보다 큽니다.</h3>
{% elif data > 25 %}
<h3>25보다 큽니다.</h3>
{% else %}
<h3>{{ data }}</h3>
{% endif %}
</body>
</html>
*파이썬 파일
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/hello_if')
def hello_html():
value = 27
return render_template('condition.html', data=value)
if __name__ == "__main__":
app.run(host="0.0.0.0", port="8080")
```
결과 :
```
*기본 구조
- {% if %} {% elif %} {% else %} {% endif %}
if로 조건문을 선언하고, endif로 조건문을 끝내면 된다. (당연히 elif, else는 특정 상황에서만 사용하면 됨)
*예시
- {% if data >= 30 %}
<h3>30보다 큽니다.</h3>
{% elif data > 25 %}
<h3>25보다 큽니다.</h3>
{% else %}
<h3>{{ data }}</h3>
{% endif %}
마찬가지로, 인덴테이션(들여쓰기)는 안해도 된다.
jinja2 template 주석(문법)
*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>
</head>
<body>
{% if data >= 30 %}
<h3>30보다 큽니다.</h3>
{#
{% elif data > 25 %}
<h3>25보다 큽니다.</h3>
#}
{% else %}
<h3>{{ data }}</h3>
{% endif %}
</body>
</html>
*파이썬 파일
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/hello_if')
def hello_html():
value = 27
return render_template('condition.html', data=value)
if __name__ == "__main__":
app.run(host="0.0.0.0", port="8080")
```
결과 :
```
*기본 개념
- {# #}으로 주석을 표시할 수 있다.
'Flask' 카테고리의 다른 글
| Flask - flask의 다양한 기능 (0) | 2021.11.27 |
|---|---|
| Flask - bootstrap·vue(axios)/flask로 REST API 구현 (0) | 2021.11.27 |
| Flask - flask로 정적 웹 페이지 지원 (0) | 2021.11.25 |
| Flask - REST API의 이해를 위한 웹 기술 (0) | 2021.11.24 |
| Flask - flask로 REST API 구현 및 테스트 (0) | 2021.11.24 |
댓글