【Flask】学习——Jinja2模板引擎的使用方法(注释、变量代码块、控制代码块）

àì夳堔傛蜴生んèń 2023-05-21 08:55 44阅读 0赞

# 一 模板 #

视图函数的主要作用是生成请求的响应。实际上，视图函数有两个作用：**处理业务逻辑**和**返回相应内容**。在大型应用中，把业务逻辑和表现内容放在一起，会增减代码的复杂程度和维护成本。本节所介绍的模板，用于返回响应内容。

*  模板其实是一个包含响应文本的文件，其中用占位符（变量）表示动态部分，告诉模板引擎具体的值需要从使用的数据中获取。
 *  使用真实值替换变量，再返回最终得到的字符串，这个过程称为“**渲染**”。
 *  FLask使用Jinja2引擎渲染模板。

使用模板的优势：

*  视图函数只负责业务逻辑和数据处理（业务逻辑方面）
 *  模板则取到视图函数的数据结果进行展示（视图展示方面）
 *  代码结构清晰，耦合度低。

# 二 Jinja2 #

## 2.1 相关概念 ##

*  Jinja2：是Python中一个广泛应用的模板引擎，是由Python实现的模板语言，它的设计思想来源于Django的模板引擎，并扩展了其语法和一系列强大的功能，是Flask内置的模板语言。
 *  模板语言：是一种倍设计来自动生成文档的简单文本格式，再模板语言中，一般都会把一些变量传给模板，替换模板的特定位置上预先定义好的占位变量名。

## 2.2 渲染模板函数 ##

*  Flask提供的render\_template函数封装了该模板引擎
 *  render\_template函数的第一个参数是模板的文件名，后面的参数都是键值对，表示模板中变量对应的真实值 。

## 2.3 使用方法 ##

### 2.3.1 注释 ###

使用`{# #}`进行注释：

{# {
       { name }} #}

下面是一个HTML文件例子：

<!DOCTYPE html>
 <html lang="en">
 <head>
 </head>
 <body>
 { #我是注释 #}
 </body>
 </html>

### 2.3.2 变量代码块 ###

**变量代码块**，`{ { }}`表示变量名。

{
       { post.title }}

Jinja2模板中的变量代码块可以是任意Python类型或者对象，只要它能够被Python的str()方法转换为一个字符串就可以。比如，可以通过下面的方式显示一个字典或者 列表中的某个元素

{
       { your_dict['key'] }}
    {
       { your_list[0] }}

--------------------

下面例子中展示了，变量代码块中列表、字典、数值、字符串的使用：

**python文件**：template-demo.py

from flask import Flask, render_template
    
    app = Flask(__name__)
    
    # 1. 如何返回一个网页（模板）
    # 2. 如何给模板填充数据
    @app.route('/')
    def index():
    
        # 传入的字符串、列表、字典、数值
        my_str = 'hello my_str'
        my_list = [1, 2, 3, 4, 5]
        my_dict = { 
            'name': 'zqc',
            'age': '23'
        }
        my_int = 47
        # 通常，模板中使用的变量名和要传递的数据的变量名使用一致
        return render_template('index.html',
                               my_str=my_str,
                               my_list=my_list,
                               my_dict=my_dict,
                               my_int=my_int)
    
    # 4.启动程序
    if __name__ == '__main__':
        app.run()

**HTML文件**：index.html

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>我是title</title>
 </head>
 <body>
 这是模板 
 Hello word 
 
 { # 变量代码块的使用 #}
 { { my_str }} 
 
 { # 列表的使用 #}
 { { my_list }} 
 { { my_list.2 }} 
 { { my_list[2] }} 
 
 { # 字典的使用 #}
 { { my_dict }} 
 { { my_dict.name }} 
 { { my_dict['name'] }} 
 { { my_dict.age }} 
 
 { # 数值的使用 #}
 { { my_int }} 
 
 </body>
 </html>

**注意**：index.html要放在与template-demo.py同目录下的template文件夹内。  
![在这里插入图片描述][20200424150913680.jpg]

### 2.3.3 控制代码块 ###

**控制代码块**，用`{%%}`定义控制代码块，可以实现一些语言层次的功能，如循环或者if语句。

{% if user %}
    	{
       { user}}
    {% else %}
    	hello!
    
    {% for index in indexs %}
    	{
       { index }}
    {% endfor %}

--------------------

对2.3.2 变量代码块部分的代码进行简单的修改，分别使用for和if：  
**python文件**：template-demo.py

from flask import Flask, render_template
    
    app = Flask(__name__)
    
    # 1. 如何返回一个网页（模板）
    # 2. 如何给模板填充数据
    @app.route('/')
    def index():
        my_list = [1, 2, 3, 4, 5]
        # 通常，模板中使用的变量名和要传递的数据的变量名使用一致
        return render_template('index.html',my_list=my_list)
    
    # 4.启动程序
    if __name__ == '__main__':
        app.run()

**HTML文件**：index.html

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>我是title</title>
 </head>
 <body>
 { # 下面是控制代码块的使用 #}
 <hr>
 
 { # For循环使用 #}
 { % for num in my_list %}
 { { num }} 
 { % endfor %}
 
 <hr>
 
 { # if的使用 #}
 { % for num in my_list %}
 { # 数据大于3才能显示 #}
 { % if num>3 %}
 { { num }} 
 { % endif %}
 { % endfor %}
 
 </body>
 </html>

参考：  
[https://www.bilibili.com/video/BV17W41177oE?t=2&p=9][https_www.bilibili.com_video_BV17W41177oE_t_2_p_9]  
[https://www.bilibili.com/video/BV17W41177oE?t=2&p=10][https_www.bilibili.com_video_BV17W41177oE_t_2_p_10]  
[https://www.bilibili.com/video/BV17W41177oE?t=2&p=11][https_www.bilibili.com_video_BV17W41177oE_t_2_p_11]

[20200424150913680.jpg]: /images/20230521/7be87e470a854a3a99a17eb0132450c2.png
[https_www.bilibili.com_video_BV17W41177oE_t_2_p_9]: https://www.bilibili.com/video/BV17W41177oE?t=2&p=9
[https_www.bilibili.com_video_BV17W41177oE_t_2_p_10]: https://www.bilibili.com/video/BV17W41177oE?t=2&p=10
[https_www.bilibili.com_video_BV17W41177oE_t_2_p_11]: https://www.bilibili.com/video/BV17W41177oE?t=2&p=11