篇二、Flask中默认集成了Jinja2，用于web应用程序中生成动态内容。进阶篇

于 2023-03-06 08:53:28 发布
阅读量575 收藏 6
点赞数
文章标签： flask python 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aoeryule/article/details/129344390
版权

⭐ 简介：大家好，我是zy阿二，我是一名对知识充满渴望的自由职业者。
☘️ 最近我沉溺于Python的学习中。你所看到的是我的学习笔记。
❤️ 如果对你有帮助，请关注、点赞，让我们共同进步。有不足之处请留言指正！

1. Flask打造 Python Web 开发的灵活框架，实现简易登录。入门篇

2. Flask中默认集成了Jinja2，用于web应用程序中生成动态内容。进阶篇【本文】

# 前言

Jinja2是一个流行的HTML引擎，用于在Flask等Python Web应用程序中生成HTML，XML或其他文本格式的动态内容。Flask中默认集成了Jinja2。

Jinja2允许开发人员将动态内容与静态HTML代码分离。通过在HTML中使用Jinja2语法，可以将动态内容以一种可读性强且易于维护的方式与HTML混合在一起。Jinja2还支持过滤器，控制结构和继承等高级功能。

在Flask中，可以通过将Jinja2模板存储在应用程序的“templates”目录中，并使用Flask的内置render_template函数将模板渲染为响应发送给客户端。例如，在Flask应用程序中渲染一个名为“index.html”的模板的代码如下：

from flask import Flask, render_template

app = Flask(__name__)

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

if __name__ == '__main__':
    app.run()

在此示例中，应用程序使用render_template函数渲染了“index.html”，并将参数“name”设置为“World”。在模板中，可以使用Jinja2语法来访问该参数，例如：

<!DOCTYPE html>
<html>
<head>
	{# 我是注释 #}
    <title>Hello {{ name }}!</title>
</head>
<body>
	{# 我是注释 #}
    <h1>Hello {{ name }}!</h1>
</body>
</html>

在这个例子中

  • 使用{{ name }}语法来引用传递给它的参数“name”，从实现不同用户显示不同的HTML内容。（即：动态HTML内容）
  • 同时{# 我是注释 #}是Jinja2注释的格式。



1. Jinja2的for循环示例

当我们想要根据列表、字典或其他可迭代对象在HTML上生成一个列表时，我们就可以这样做。

下面我们创建了一个名为 "my_list.html " 的文件，并写入内容如下：

<!DOCTYPE html>
<html>
<head>
    <title>My List</title>
</head>
<body>
    <h1>My List</h1>
    <ul>
        {% for item in my_list %}
            <li>{{ item }}</li>
        {% endfor %}
    </ul>
</body>
</html>

假设一个名为 “my_list” 的Python列表，在模板中使用for循环来遍历这个列表，并使用{{ item }}在每个项目之前创建一个HTML列表项。

为了在Flask应用程序中使用此模板，我们可以使用"render_template"函数并将"my_list"作为参数传递给模板。例如：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    my_list = ['item 1', 'item 2', 'item 3']
    return render_template('my_list.html', my_list=my_list)

if __name__ == '__main__':
    app.run()

运行并打开后将得到如下页面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z9xnvGLo-1677990858750)(C:\Users\张义\AppData\Roaming\Typora\typora-user-images\image-20230305122742840.png)]

当然，我们可以通过修改 ”my_list“ 中的内容来实现更加丰富的动态页面。

值得注意的是 ：

  1. {{ item }}在Jinja2中引用变量需要2个花括号包裹。如需引用多个，每一个变量都需要2个花括号包裹。例如{{ item1 }}{{ item2 }}

  2. for循环也有严格的格式{% for ... in .... %}而且{% endfor %}也是必须的。表示for循环代码结束的位置，循环的内容则写在中间。

  3. Jinja2的for循环是直接完成的，它不同于Python还有break方法来提前中断循环。

      {% for item in my_list %}
          <li>{{ item }}</li>
      {% endfor %}


2. Jinja2的for循环生成表格示例

假设 my_list 是一个二维数组，每个值中包含，书名，作者，价格和日期。根据my_list 生成一个带有表格的HTML页面。

“my_list.html” 文件内容如下：

<!DOCTYPE html>
<html>
<head>
    <title>Book List</title>
    <!-- 为了使得表格看上去美观一点，我引入了bootstrap。虽然可以使用原生CSS美化，但是会让代码变得太长，不适合演示。不懂bootstrap的可以选择性的屏蔽掉所有的class 或者直接删除下方的link标签-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>Book List</h1>
        <table class="table table-bordered table-striped">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">Book</th>
                    <th scope="col">Author</th>
                    <th scope="col">Price</th>
                    <th scope="col">Date</th>
                </tr>
            </thead>
            <tbody>
                {% for row in my_list %}
                    <tr>
                        <td>{{ row[0] }}</td>
                        <td>{{ row[1] }}</td>
                        <td>{{ row[2] }}</td>
                        <td>{{ row[3] }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</body>
</html>

py文件内容如下：

from flask import Flask, render_template

app = Flask(__name__)

# 运行代码后访问：  `http://localhost:5000` 
@app.route('/')
def index():
    my_list = [['Book 1', 'Author 1', 19.99, '2020-01-01'],
        ['Book 2', 'Author 2', 29.99, '2021-02-02'],
        ['Book 3', 'Author 3', 39.99, '2022-03-03'],
        ['Book 4', 'Author 4', 49.99, '2023-04-04'],
        ['Book 5', 'Author 5', 59.99, '2024-05-05']]
    return render_template('my_list.html', my_list=my_list)

if __name__ == '__main__':
    app.run()

运行代码后访问： http://localhost:5000 ，得到如下页面：
在这里插入图片描述

3. Jinja2的if 判断

  • if语句的语法结构：
    {% if .... %}
    …
    {% elif ... %}
    …
    {% endif %}
  • 值得注意的还是{%..%}的结构和必须在if结束的位置加上{% endif %}
  • 延用上一条中的书本Book List的py数据。
    这次我们在循环内加上了if语句做条件判断，如果价格小于20，就给这一行加上黄色背景，如果价格大于40，就给这一行加上红色背景，否则就不加背景。这里的row[2]就是价格，row[0]是书名，row[1]是作者，row[3]是日期。
<!DOCTYPE html>
<html>

<head>
    <title>Book List</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <h1>Book List</h1>
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="thead-light">
                    <tr>
                        <th scope="col">Book</th>
                        <th scope="col">Author</th>
                        <th scope="col">Price</th>
                        <th scope="col">Date</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in my_list %}
                    <!-- 这次我们在循环内加上了if语句做条件判断，如果价格小于20，就给这一行加上黄色背景，如果价格大于40，就给这一行加上红色背景，否则就不加背景。这里的row[2]就是价格，row[0]是书名，row[1]是作者，row[3]是日期。 -->
                    {% if row[2] < 20 %} <tr style="background-color: yellow;">
                        {% elif row[2] > 40 %}
                        <tr style="background-color: red;">
                            {% else %}
                        <tr>
                            {% endif %}
                            <td>{{ row[0] }}</td>
                            <td>{{ row[1] }}</td>
                            <td>{{ row[2] }}</td>
                            <td>{{ row[3] }}</td>
                        </tr>
                        {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</body>

</html>

执行代码后，访问： http://localhost:5000 得到如下页面
在这里插入图片描述



3. if判断简单示例

首先创建一个“index.html” 写入代码：

<!DOCTYPE html>
<html>

<head>
    <title>{{ title }}</title>
</head>

<body>
    {% if user %}
    <h1>欢迎你, {{ user.username }}!</h1>
    {% else %}
    <h1>欢迎来宾!</h1>
    {% endif %}
</body>

</html>

在上面的html文件中，使用双花括号“{{}}”插入变量和使用“{% %}”控制流，如果有user，则显示欢迎用户的消息，否则显示欢迎来宾的消息。其中，user和title是在Flask应用程序中定义的变量。

然后在py文件中写入：

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def index():
    user = {'username': 'John'}
    return render_template('index.html', title='Home', user=user)


if __name__ == "__main__":
    app.run(debug=True)

5. Jinja2的 extends

  • 语法结构：
    {% block name %} ... {% endblock %}

{% block %} 是 Jinja2 模板引擎的一个核心功能，它允许您定义一个模板块，该模板块可以在子模板中被重写和填充。类似python中的class封装一些固定的方法，减少代码的重用率。

具体来说，{% block %} 标记定义了一个命名的模板块，可以将该模板块视为一个占位符。在父模板中，该模板块可能包含一些默认内容，但是在子模板中，该模板块可以被重写，并且将显示子模板中的新内容。以下是一个简单的示例：

首先创建一个base.html 模版：

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %} base.html 模版的title {% endblock %}</title>
</head>
<body>
    <div class="header">
        {% block header %} base.html 模版的 Header{% endblock %}
    </div>
    <div class="content">
        {% block content %} base.html 模版的 Content{% endblock %}
    </div>
    <div class="footer">
        {% block footer %} base.html 模版的 Footer{% endblock %}
    </div>
</body>
</html>

再创建一个home.html 模版：

{% extends 'base.html' %}

{% block title %}
主页
{% endblock %}

{% block header %}
<h1>欢迎来到我的主页</h1>
{% endblock %}

{% block content %}
<p>我是一个有理想有目标有远见有卓越智慧的肉肉！！</p>
{% endblock %}

在home.html 模板中，我们继承了 base.html 模板，并重写了 title、header 和 content 中的内容，以创建一个和 base.html 结构相同但是内容却不一样的主页。就像是python中创建一个类，继承另一个类，又重写了父类方法。

再创建一个about.html 模板：

{% extends 'base.html' %}

{% block title %}
关于我
{% endblock %}

{% block header %}
<h1>我的简介</h1>
{% endblock %}

{% block content %}
<p>我是一盒坚持学习不断进取的猪肉！！</p>
{% endblock %}

新的about.html 模板，我们又继承了 base.html 模板，并再次重写了 title、header 和 content 中的内容，所以这3个模版的HTML结构都是相同的，但是其中的内容是不同的。

最后，我们创建一个py文件，代码如下：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('home.html')

@app.route('/about')
def about():
    return render_template('about.html')

if __name__ == '__main__':
    app.run(debug=True)

运行，然后访问 http://localhost:5000 和 http://localhost:5000/about，以查看生成的 HTML 页面。
在这里插入图片描述在这里插入图片描述
最后你可以自己尝试重新修改以下“ base.html 模版的 Footer ”的内容。

总结： {% block name %} ... {% endblock %}的目的就是为了减少代码的重用率。

6. Jinja2的 macro name(args)

  • 既然有类就有函数。语法结构：
  • {% macro macro(args) %} … {% endmacro %} 定义一个函数

定义一个可重用的模板块，称为“宏”（Macro）。 它类似于一个函数，接受一个或多个参数，可以在模板中多次调用，以避免重复编写相同的代码。宏可以带有参数，这些参数可以在宏内部使用，用于生成特定的输出。类是于python中的 def macro(*arg): 在函数内部执行完成后通过return输出结果。

例如，以下代码定义了一个名为 hello 的宏，它带有一个参数 name，并在模板中使用了调用了他3次：

    {% macro hello(name) %}
    <h1>你好我好大家好，我是 {{ name }}!</h1>
    {% endmacro %}

    {{ hello('John') }}
    {{ hello('Binbin') }}
    {{ hello('Liya') }}

下面是一个完整的 Flask 和 Jinja2 模板的示例。

首先创建一个“index.html” 写入代码：

<!DOCTYPE html>
<html>

<head>
    <title>Hello World</title>
</head>
<body>
    {% macro hello(name) %}
    <h1>你好我好大家好，我是 {{ name }}!</h1>
    {% endmacro %}
    {{ hello('John') }}
    {{ hello('Binbin') }}
    {{ hello('Liya') }}
</body>
</html>

py文件代码如下：

from flask import Flask, render_template
from jinja2 import Template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == "__main__":
    app.run(debug=True)

执行代码后，访问 http://localhost:5000 后得到如下页面：
在这里插入图片描述
在这个示例中，我们定义了一个hello宏，并调用了他3次，返回了3个带有固定字符串“你好我好大家好，我是 ”和自定义name的3个h1标签。实现了简单的避免代码重用的方法。

zy阿二
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
web开发之旅（一）：框架总述，关于Nginx、WSGI、 uWSGI、jinja2、Flask关系的介绍
aizenggege的博客
07-25 646
综述 &amp;amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;amp;nb
Flask之jinja2
lose_user___的博客
10-31 331
jinja2是Flask作者开发的一个模板系统，起初是仿django模板的一个模板引擎，为Flask提供模板支持，由于其灵活，快速和安全等优点被广泛使用
flask之jinja2
牛腩面的博客
02-09 743
jinja版本: jinja2.1.0 jinja2:一.简介: jinja2是Flask作者开发的一个模板系统，起初是仿django模板的一个模板引擎，为Flask提供模板支持。 二.语法基本语法: 控制结构 {% %} 变量取值 {{ }} 注释 {# #} 1.变量取值 {{ }}: jinja2模板中使用 {{ }} 语法表示一个变量，它是一种特殊的占位符。当利用jinja2进行渲染...
flask——2：flask模板——使用Jinja2
dangfulin的博客
10-07 4280
一，模板引擎 flask使用Jinja2引擎来渲染模板。 1，什么是模板 简单来说，在web应用开发中，后端主要负责业务逻辑，完成请求与相应的逻辑处理及数据读写，前端主要负责表现逻辑，完成应用界面表现与交互逻辑。为了实现前后端的解耦，分离前后端逻辑，就可以将表现逻辑分离出来交友模板通过模板引擎渲染来实现。 这样看来，其实模板就是包含静态与动态内容的网页内容。 2，什么是Jinja2 Jinja是一种现代的、对设计人员友好的Python模板语言。它具有快速、广泛使用和安全的特性，并且具有可选的沙箱模板执行环境
Flask之Jinja2循环语句
why404
01-13 743
控制语句 所有的控制语句都是放在{% ... %}中，并且右一个语句{% endxxx %}来进行结束。 Jinja2中常用的控制语句右if/for..in.. if if语句和python中的类似，可以使用>,<,<=,>=,==,!=来进行判断，也可以通过and,or,not,()来进行逻辑合并操作。 {% if uname == 'wukong' %} <p...
Flask_Web全栈开发阶段-flask框架.zip
11-22
总之，这个压缩包的内容将带领你深入理解Flask框架，从基础到进阶，涵盖Web全栈开发的各个方面，包括应用构建、数据库交互、模板渲染、API设计、部署策略等。通过学习，你将能够运用Flask构建高效、灵活的Web应用...
Flask Web开发_Github源代码
11-14
1. **app.py**：这是应用程序的主入口文件，包含了初始化Flask实例、定义路由和视图函数等内容。 2. **templates**：这个目录存放Jinja2模板文件，用于动态生成HTML页面。 3. **static**：静态资源文件夹，存放CSS...
Python-探索Flask中文翻译教程
08-10
此外，书中还会涉及测试、调试、部署等实战环节，包括如何使用pytest进行单元测试和集成测试，使用Flask-Debugtoolbar进行实时性能监控，以及如何将应用部署到Heroku或AWS等云平台。这些知识将帮助你确保代码质量，...
Flask中文文档
03-19
**模板引擎** Jinja2是Flask的首选，用于生成动态HTML页面。它支持条件语句、循环、继承、宏和过滤器等强大功能。在Flask中，你可以通过`render_template`函数渲染模板。 **错误处理** 在Flask中，你可以通过注册...
flask-tutorial-2_flask_lotsqi_源码.zip
10-05
Jinja2是Flask的默认模板引擎，用于生成动态HTML页面。它支持条件语句、循环、变量、过滤器等功能，使开发者能轻松地创建复杂的页面布局。 二、Flask进阶 2.1 请求与响应对象 每个到达服务器的HTTP请求都会创建一...
Flask之jinja2简介
why404
01-07 606
Jinja2模板介绍 模板是一个 web 开发必备的模块。因为在渲染一个网页的时候，并不是只渲染一个纯文本字符串，而是需要渲染一个有富文本标签的页面。这时候就需要使用模板了。 在 Flask 中，配套的模板是 Jinja2 Jinja2 的作者也是 Flask 的作者。 Jinja2模板非常的强大，并且执行效率高。 查找路径 在渲染模版的时候，默认会从项目根目录下的templates目录...
Flask模板（jinja2）中渲染“确认删除”弹出框
喜欢海
01-15 6472
代码如下： <a href="{{ url_for('aboutadmin.deletepic', picid=picture.id) }}" style="color: white" onclick="{if(confirm('确定纪录吗?')){this.document.formname.submit();return true;}return false;}">删除</a>
动态生成表格
czx1826488201的博客
10-11 426
创建行 var tr = document.createElement('tr'); //创建行节点 tbody.appendChild(tr); 创建单元格 for (var k in obj[i]) { //控制创建单元格数 var td = document.createElement('td'); // 创建单元格节点 单元格填充数据 td...
Flask jinja2模板for循环
weixin_44415561的博客
06-06 6882
for循环语句笔记： 在jinja2中的for循环，跟python中的for循环基本上是一模一样的。也是for...in...的形式。并且也可以遍历所有的序列以及迭代器。但是唯一不同的是，jinja2中的for循环没有break和continue语句。 from flask import Flask,render_template app = Flask(__name__) app.config['TEMPLATES_AUTO_RELOAD'] = True @app.route('/') def in
Flask 模板标签语言的使用
qalangtao的博客-qalangtao.com
01-19 149
在使用 Flask 和 Jinja2 渲染模板时，需要先在 Flask 应用中配置 Jinja2 模板引擎，然后在视图函数中使用 render_template() 方法渲染模板。4.在 template 文件夹下创建 index.html 文件，使用 Jinja2 语法渲染参数。Flask 是一个 Python 的 Web 框架，Jinja2 是 Flask 所用的模板引擎。这些标签可以结合使用来生成动态的 HTML 页面。
Flask之jinja2模板（二）
m0_67093160的博客
10-28 637
jinja模板结构和宏的使用
Python运维（五）--Jinja2、word模板及Excel
chucksun0426的博客
06-14 2912
过滤器表 过滤器名 说明 safe 渲染时不转意 upper、lower、capital 把值全转大写、小写、首字母大写 title 每个单词首字母大写 trim 去首位空格 join 拼接多个值为字符串 replace 替换字符串值 round、int 对数字四舍五入、值转成整型 用法 1.2.2 控制循环结构 if语句 for语句 for + if语句： 1.2.3 宏 定义位置：建议集中写在模板的尾部 宏定义 宏使用 1.3 空行
jinja2模板生成测试报告
DaxiaLeeSuper的博客
03-19 937
使用jinja2模板自动化生成测试报告
python html表格模版,python-如何使用模板(例如Jinja2)将列值列表呈现到表中
weixin_35367645的博客
06-19 340
我正在尝试执行以下操作(无效,仅显示为传达预期的行为)：Column 1Column 2Column 3{% for col1_val in col1_values %}{{ col1_val }}{{ col2_values[col1_values.index(col1_val)] }}{{ col3_values[col1_values.index(col1_val)] }}{% endfor...
在 Flask 应用程序中用于构建 Web 页面的方式有什么代码
最新发布
03-10
1. 在 Flask 应用程序中引入模板引擎： from flask import Flask, render_template app = Flask(__name__) 2. 创建一个 HTML 模板文件，例如 index.html： <!DOCTYPE html> <title>Flask Web Application ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zy阿二

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值