http://hleecaster.com/flask-jinja2/
파이썬 Flask 사용법 2 (Jinja2 템플릿, 변수, 조건문/반복문) - 아무튼 워라밸
쉽고 가벼운 파이썬 마이크로 웹 프레임워크 Flask. Flask에서 HTML문서를 렌더링하는 템플릿 엔진 Jinja2 사용법, 파이썬 변수, 조건문/반복문을 사용법을 최대한 쉽게 정리했다.
hleecaster.com
: 보여지는 부분과 처리하는 부분을 나누기 위해 제공되며, 모든 페이지마다 HTML을 작성할 필요가 없도록 일관된 구조와 기능을 가져 웹 페이지를 생성하는 역할을 한다.
Jinja2는 Flask에서 사용하는 템플릿 엔진이다.
템플릿을 렌더링하여 URL에 연결
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template("index.html")
if __name__ == '__main__':
app.run(debug=True)이렇게 app.py를 수정한다. render_template함수에 의해, 해당 파일이 속한 디렉토리 안에서 templates라는 디렉토리를 찾아 templates 디렉토리 안에 있는 index.html 파일을 출력하게 되는 것이다.
템플릿에서 변수 사용하기 (filter 기능 활용하기)
render_template([렌더링 할 HTML 파일 이름])
--> 템플릿에서 변수를 쓰려면 {{변수명}} 다음과 같이 쓴다.
filter 함수란?
: 조건에 부합하지 않는 요소들을 이터러블에서 제거해주는 함수. 그리고 함수자체는 불린값을 반환한다.
{{ 변수명 | 필터 }} 로 filter 기능을 사용.
템플릿에서 if 조건문과 for문 사용하기
1. if문 사용하기
{% if [조건문] %} [실행문] {% endif %}
{% if template_variable == "Hello" %}
<p> {{template_variable }}, World! </p>
{% endif %}
{% if template_variable <20 %}
<p>{{template_variable}}은 20보다 작다</p>
{% elif template_variable > 20 %}
<p>{{template_variable}}은 20보다 크다</p>
{% else %}
<p>{{template_variable}}은 20이다. </p>
{% endif %}elif와 else도 마찬가지로 하면 된다.
2. for문 사용하기
{% for문 %} [출력문] {% endfor %}
<ul>
{% for x in range(10) %}
<li>{{ x }}</li>
{% endfor %}
</ul><ul>
{% for key, value in template_dict.items() %}
<li>{{ key }} : {{ value }}</li>
{% endfor %}
</ul>템플릿 상속
레이아웃의 일관성 유지, header와 footer를 여러곳에 사용하기 위해 템플릿의 상속 기능을 사용한다.
아래는 부모 문서(base.html)이다.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>내 웹사이트</title>
</head>
<body>
{% block content %}{% endblock %}
<!-- 자식 문서에 들어갈 내용-->
</body>
</html>자식 문서(index.html)
{% extends "base.html" %}
<!-- 부모 문서 표기해주기-->
{% block content %}
<p> 자식문서에 포함될 내용</p>
{% endblock %}
from flask import Flask, render_template
app = Flask(__name__)
student_data = {
1:{"name":"김민겸","score": {"국어": 80, "수학" : 100}},
2:{"name":"김민주","score": {"국어" :100, "수학" :100}}
}
@app.route('/')
def index():
return render_template("index.html", template_students = student_data)
#render_template에서 index.html을 불러옴과 동시에 template_students 변수 정의
@app.route("/student/<int:id>")
def studnet(id):
return render_template("student.html",
template_name = student_data[id]["name"],
template_score = student_data[id]["score"])
if __name__ == '__main__':
app.run(debug = True)
student_data는 딕셔너리 자료형, "name"키와 "score"키로 이루어져 있다.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>시험 성적 확인 사이트</title>
</head>
<body>
<div>
<a href = "/"> 메인 화면으로</a>
</div>
{% block content %}{% endblock %}
</body>
</html>base.html
{% extends "base.html" %}
{% block content %}
<h1>시험 성적 확인하기</h1>
<p>이름을 클릭하세요.</p>
<ul>
{% for key, value in template_students | dictsort %}
<li> < a href = "/student/{{key}}"> {{value["name"]}}</a></li>
{% endfor %}
</ul>
{% endblock %}
index.html
+) ul태그 : unordered list, 순서가 필요 없는 목록을 만든다.
dictsort는 딕셔너리.items()을 생략하는 역할을 한다.
학생의 이름(김민겸)을 누르면 student/1로 이동하여 student.html이 실행된다.
{% extends "base.html" %}
{% block content %}
<h3>{{template_name}}님의 성적</h3>
<ul>
{% for key, value in template_score.items() %}
<li>{{key}} : {{value}}</li>
{% endfor %}
</ul>
{% endblock %}student.html
여기까지 Flask 템플릿 사용법을 알아보았다.
'Framework > Flask' 카테고리의 다른 글
| 파이썬 플라스크 form 활용법 (0) | 2021.01.29 |
|---|---|
| 가상 환경 설정, 그리고 Hello World! (0) | 2021.01.28 |
