Jinja2HTML+CSS+JS+Flask/jinja2022. 5. 9. 23:25
Table of Contents
Jinja2?
- SSR기반인 Flask 프레임워크에서 사용하는 HTML 템플릿 언어이다.
- 템플릿이 될 HTML 문서에 데이터가 들어갈 곳을 표시해 놓은 역할을 한다
How to use?
- ajax가 클라이언트에서 HTTP 메서드를 이용해서 api를 호출하는 것과 다르게 Flask에서 render_template 함수로 html 파일과 데이터를 넘겨주면 HTML에 표시한 부분에 데이터가 들어간다.
기본적인 대입
- 아래와 같이 render_template 함수로 index.html이라는 HTML 파일과 name이란 변수에 duckgugong이라는 데이터를 넣어보자.
@app.route('/')
def main():
return render_template("index.html", name='duckgugong')- Flask에서 name이라는 변수를 아래와 같이 중괄호 두개로 감싸면 duckgugong이라는 값이 대입된다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>나는 {{name}}이다!</h1>
</body>
</html>- {{name}} 이라는 변수에 duckgugong이라는 값이 대입된 것을 확인할 수 있다!
변수 저장 set
- 서버에서 넘겨준 변수명 대신 set 키워드를 이용해서 새로운 변수에 저장할 수 있다!
@app.route('/')
def main():
return render_template("index.html", name='duckgugong')- 서버에서 넘겨준 name이란 변수를 set 키워드를 이용해 id라는 변수에 저장해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% set id = name %}
<h1>나는 {{id}}이다!</h1>
</body>
</html>- id라는 변수에 duckgugong이라는 서버에서 넘겨준 변수값이 대입되었다!
- 또한 아래와 같이 객체의 속성값을 변수에 저장해서 사용할 수 있다!
@app.route('/')
def main():
return render_template("index.html", person={'name': 'duck', 'age': 27})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% set id = person.name %}
{% set age = person.age %}
<h1>나는 {{id}}, {{age}}살이다!</h1>
</body>
</html>
반복문
- 서버에서 반복할 수 있는 값을 클라이언트에 넘겨주면 jquery의 append 함수와 같이 일일이 태그에 추가하지 않고 반복되는 요소를 생성할 수 있다.
- 기본적인 사용법은 아래와 같다!
{% for i in list %}
...
{% endfor %}
- render_template 함수에 names라는 리스트넣어 클라이언트에 넘겨주자
@app.route('/')
def main():
names = ['LEE', 'KIM', 'SEO']
return render_template("index.html", names=names)- jinja를 이용해서 names라는 배열을 반복문을 이용해 쉽게 나타낼 수 있다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% for name in names%}
<h1>나는 {{name}}이다!</h1>
{% endfor %}
</body>
</html>
조건문
- 조건문을 사용해서 조건에 맞는 값만 html 템플릿에 끼워서 화면에 쉽게 나타낼 수 있다!
- 기본적인 사용법은 아래와 같다!
{% if 조건문 %}
...
{% endif %}
- 서버에서 넘겨준 값이 50 이상이면 해당 변수의 값을 h1 태그에 넣어서 나타내보자!
@app.route('/')
def main():
return render_template("index.html", num = 100)- 100은 50보다 크므로 h1태그의 text에 들어갈 것이다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% if num > 50 %}
<h1>{{num}}</h1>
{% endif %}
</body>
</html>
'HTML+CSS+JS+Flask > jinja' 카테고리의 다른 글
| 정적/동적 웹페이지 (0) | 2022.05.09 |
|---|
@덕구공 :: Duck9s'
주니어 개발자에욤
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!