Flask（8）- jinja2 模板入门

前言

  • 之前的文章有个栗子，视图函数可以直接返回一段 html 代码，浏览器可以自动渲染
  • 但是当你的 HTML 非常复杂的话，也要整串写在代码里面吗，这显然不合理的，可阅读性也非常差
  • 所以，就诞生了 Jinja2 这种模板引擎来解决需要返回复杂 jinja2 模板代码的问题

 

简单的栗子

以下是一个 jinja2 的模板，它对登录和未登录用户显示不同的信息

<html>
{% if login %}
  <p>你好，{{name}}</p>
{% else %}
  <a href='/login'>登录</a>
{% endif %}
</html>

 

如果用户已经登录：变量 login 为真、变量 name 为 tom，模板被渲染成如下的 html 文件

<html>
  <p>你好，tom</p>
</html>

 

如果用户没有登录：变量 login 为假，模板被渲染成如下的 html 文件：

<html>
  <a href='/login'>登录</a>
</html>

 

Flask 中使用模板

目录结构

一般来说 templates 就是存放模板的目录

 

jinja2 模板代码

<!DOCTYPE html>
<html>
<body>
  <h2>My name is {{ name }}, I am {{ age }} years old</h2>
</body>
</html>

 

flask 代码

  • 首先，需要 import render_template
  • 然后，视图函数调用 render_template，对模板 templates/index.html 进行渲染
  • render_template 包含有 2 个命名参数：name 和 age，模板引擎将模板 templates/index.html 中的变量进行替换
复制代码
from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html', name='tom', age=10)


app.run(debug=True)
复制代码

 

浏览器的运行效果

 

分界符

jinja2 模板文件混合 html 语法与 jinja2 语法，使用分界符区分 html 语法与 jinja2 语法。有 5 种常见的分界符：

  • {{ 变量 }}，将变量放置在 {{ 和 }} 之间；
  • {% 语句 %}，将语句放置在 {% 和 %} 之间；
  • {# 注释 #}，将注释放置在 {# 和 #} 之间；
  • ## 注释，将注释放置在 # 之后

 

变量

语法

jinja2 模板中，使用  {{ var }}  包围的标识符称为变量，模板渲染会将其替换为 Python 中的变量，语法如下：

 {{ 变量 }}

 

jinja2 模板

复制代码
<html>
{{ string }}

<ul>
    <li> {{ list[0] }}
    <li> {{ list[1] }}
    <li> {{ list[2] }}
    <li> {{ list[3] }}
</ul>

<ul>
    <li> {{ dict['name'] }}
    <li> {{ dict['age'] }}
</ul>
</html>
复制代码

包含有 3 种类型的变量：字符串、列表、字典，它们会被替换为同名的 Python 变量

 

flask 代码

复制代码
from flask import Flask, render_template

app = Flask(__name__)


string = 'www.imooc.com'
list = ['www', 123, (1, 2, 3), {"name": "poloyy"}]
dict = {'name': 'zhangsan', 'age': True}


@app.route('/2')
def index2():
    return render_template('index2.html', string=string, list=list, dict=dict)


app.run(debug=True)
复制代码

列表的值包含字符串、数字、元组、字典，字典的值包含字符串、布尔值

 

浏览器的运行效果

 

for 语句

语法

jinja2 模板中，使用  {% 语句 %}  包围的语法块称为语句，jinja2 支持类似于 Python 的 for 循环语句，语法如下：

{% for item in iterable %}
{% endfor %}

 

有些教程会说有另一种等价写法

# for item in iterable
# endfor 

但我实验发现并不生效

 

jinja2 模板代码

复制代码
<h1>Members</h1>
<ul>
{% for user in users %}
  <li>{{ user }}</li>
{% endfor %}

# for item in iterable
  <li>{{ user }}</li>
# endfor
</ul>
复制代码

 

Flask 代码

复制代码
#!usr/bin/env python
# -*- coding:utf-8 _*-
"""
# author: 小菠萝测试笔记
# blog:  https://www.cnblogs.com/poloyy/
# time: 2021/7/11 6:04 下午
# file: 6_jinja2.py
"""
from flask import Flask, render_template

app = Flask(__name__)


users = ['tom', 'jerry', 'mike']


@app.route('/3')
def index3():
    return render_template('index3.html', users=users, iterable=users)


app.run(debug=True)
复制代码

 

浏览器的运行效果

 

能看到 # for 的写法并没有生效

 

if 语句

语法

jinja2 模板中，使用  {% 语句 %}  包围的语法块称为语句，jinja2 支持类似于 Python 的 if-else 判断语句，语法如下：

{% if cond %}
{% elif cond %}
{% else %}
{% endif %} 

 

jinja2 模板代码

复制代码
<html>
{% if a %}
    <p>a is True</p>
{% else %}
    <p>a is False</p>
{% endif %}

{% if b %}
    <p>b is True</p>
{% elif c %}
    <p>b is False, and c is True</p>
{% endif %}
</html>
复制代码

 

Flask 代码

复制代码
#!usr/bin/env python
# -*- coding:utf-8 _*-
"""
# author: 小菠萝测试笔记
# blog:  https://www.cnblogs.com/poloyy/
# time: 2021/7/11 6:04 下午
# file: 6_jinja2.py
"""
from flask import Flask, render_template

app = Flask(__name__)


@app.route('/4')
def index4():
    a = False
    b = False
    c = True
    return render_template('index4.html', a=a, b=b, c=c)


app.run(debug=True) 
复制代码

 

浏览器的运行效果

 

tests

语法

jinja2 提供的 tests 可以用来在语句里对变量或表达式进行测试，语法如下：

{% variable is test %}

 

完整的 test 请参考 https://jinja.palletsprojects.com/en/latest/templates/#builtin-tests，部分的 test 如下：

test 名称功能
defined 变量是否已经定义
boolean 变量的类型是否是 boolean
integer 变量的类型是否是 integer
float 变量的类型是否是 float
string 变量是否是 string
mapping 变量的类型是否是字典
sequence 变量的类型是否是序列
even 变量是否是偶数
odd 变量是否是奇数
lower 变量是否是小写
upper

变量是否是大写

 

jinja2 模板代码

复制代码
<html>
{% if number is odd %}
    <p> {{ number }} is odd
        {% else %}
    <p> {{ number }} is even
{% endif %}

{% if string is lower %}
    <p> {{ string }} is lower
        {% else %}
    <p> {{ string }} is upper
{% endif %}
</html>
复制代码

 

jinja2 的模板输入

number = 404
string = 'HELLO'

 

渲染后的 html

<html>
  <p> 404 is even
  <p> HELLO is upper
</html>

 

过滤器

语法

jinja2 过滤器的是一个函数，语法如下：

{{ variable | filter }}
  • 执行函数调用 filter(varialbe)，把函数返回值作为这个代码块的值
  • 暂时不举具体的栗子了，只做简单介绍，目测后面我会出详细文章讲解 jinja2

 

jinja2 模板

<html>
{{ string | upper }}
</html>

 

jinja2 的模板输入

string = 'hello'

 

渲染后的 html

<html>
HELLO
</html>

 

posted @   小菠萝测试笔记  阅读(1139)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示