Flask Jinja2模板引擎

水深无声 2022-12-23 11:17 173阅读 0赞

### 简介 ###

Jinja2是Python下一个被广泛应用的模版引擎，他的设计思想来源于Django的模板引擎，并扩展了其语法和一系列强大的功能。其中最显著的一个是增加了沙箱执行功能和可选的自动转义功能，这对大多应用的安全性来说是非常重要的(来源百度百科)。

### Jinja2模板 ###

Flask是一款开发Web服务端的框架，所以肯定是离不开页面的。上一章，我们使用路由返回数据时，返回内容中包含的有少量的HTML代码，如果需要的HTML代码多了，就很繁琐了，这时我们就可以使用Jinja2模板引擎。

*  Flask提供的 render\_template 函数封装了Jinja2模板引擎；
 *  render\_template 函数的第一个参数是模板的文件名，后面的参数都是键值对，表示向模板中传递的参数值。

### 基本使用 ###

创建一个视图函数渲染模板以及设置模板参数。

@app.route("/hello/<name>")
    def hello(name):
        return render_template("hello.html", name=name)

render\_template函数第一个参数对应的是模板的文件名，后面的参数为向模板中传递的参数值。  
Flask在程序文件夹中的templates子文件夹中根据模板文件名来寻找对应的模板。  
所以需要在templates子文件夹下定义一个hello.html文件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70_pic_left]  
代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    	{# name为视图函数传递过来的参数 #}
        <h1>Hello, {
       { name }}！</h1>
    </body>
    </html>

其中用 \{ \{\}\} 来表示变量名，用于接收视图函数传递的参数，其变量名与视图函数传递的键名需要一致；  
\{\# \#\} 表示注释，注释的内容不会在html中被渲染出来。运行效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70_pic_left 1]  
上面使用模板接收了简单的变量，除此之外还可以接收字典，列表，对象和获取session中的内容等。下面来看一下使用模板接收一些复杂的类型数据。  
修改后的视图函数代码：

@app.route("/hello/<name>")
    def hello(name):
        mydict = {
            "name": '李四',
            'age': 18
        }
        mylist = ['aaa', 'bbb', 'ccc']
        session['name'] = "abc"
        return render_template("hello.html", name=name, mydict=mydict, mylist=mylist);

模板页面代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>Hello, {
       { name }}！</h1>
        <h1>获取字典数据：{
       { mydict['name'] }} --- {
       { mydict['age'] }}</h1>
        <h1>获取列表数据：{
       { mylist[1] }}</h1>
        <h1>通过过滤器修改变量(把值转换为大写形式)：{
       { mylist[0] | upper }}</h1>
        <h1>获取session中的内容：{
       { session.get("name") }}</h1>
        <h1>请求头信息：{
       { request.headers }}</h1>
    </body>
    </html>

运行效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70_pic_center]

除了上面用到的upper过滤器，Jinja2还提供了很多过滤器，如下是Jinja2常用的过滤器。

<table> 
 <thead> 
  <tr> 
   <th>过滤器名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>safe</td> 
   <td>渲染值时不转义</td> 
  </tr> 
  <tr> 
   <td>capitalize</td> 
   <td>把值的首字母转换成大写，其他字母转换成小写</td> 
  </tr> 
  <tr> 
   <td>lower</td> 
   <td>把值转换成小写形式</td> 
  </tr> 
  <tr> 
   <td>upper</td> 
   <td>把值转换成大写形式</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>把值中每个单词的首字母都转换成大写</td> 
  </tr> 
  <tr> 
   <td>trim</td> 
   <td>把值的首尾空格去掉</td> 
  </tr> 
  <tr> 
   <td>striptags</td> 
   <td>渲染之前把值中所有的HTML标签都删掉</td> 
  </tr> 
 </tbody> 
</table>

### 控制结构 ###

Jinja2中提供了很多种控制结构，可以用来改变模块的渲染流程，如if、for等。  
在Jinja2中使用if控制结构，语法格式和python的语法格式一样，但必须写在\{% %\}中，不同python的是有开始标签就必须要有结束标签。

{% if comment %}
        <p>{
       { comment }}</p>
    {% else %}
        <p>comment字典为空</p>
    {% endif %}

for循环的使用，遍历一个字典中的所有数据。

{% for user in users %}
        <p>姓名：{
       { user['name'] }}， 年龄：{
       { user['age'] }}</p>
    {% endfor %}

上述的变量都是在视图函数返回时传递的，视图函数代码如下：

@app.route('/contro')
    def contro():
        users = [
            {"name": "张三", "age":20},
            {"name": "李四", "age":25},
            {"name": "王五", "age":16},
            {"name": "小华", "age":22}
        ]
        comment = []
        return render_template("contro.html", comment=comment, users=users)

页面完整代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        {% if users %}
            {% for user in users %}
                <p>姓名：{
       { user['name'] }}， 年龄：{
       { user['age'] }}</p>
            {% endfor %}
        {% else %}
            <p>没有学生信息！</p>
        {% endif %}
    
        {% if comment %}
            <p>{
       { comment }}</p>
        {% else %}
            <p>comment字典为空</p>
        {% endif %}
    </body>
    </html>

运行效果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70]

### 模板继承 ###

在实际开发中有时候会有很多重复使用的模块代码片段，这时我们可以把这些模块代码写入一个单独的文件，需要用时，直接继承使用，以避免重复编写。  
创建一个名为base.html的基模板，用于编写公共部分模块。代码如下。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>
            {% block title %}
                {# 其他页面可以重写标题 #}
            {% endblock %}
        </title>
        {% block css %}
            {# 其他页面可以自定义加载样式文件 #}
        {% endblock %}
    </head>
    <body>
    {% block content %}
        {# 其他页面内容 #}
    {% endblock %}
    </body>
    </html>

block标签定义的元素可在继承模块中修改。上述定义了title、css、content三个模块，其他文件继承后可以重写这些模块中的内容。  
新建一个模板文件继承base.html模板

{# 继承base.htm模块 #}
    {% extends 'base.html' %}
    
    {% block title %}
        重写base.html中title模块的内容
    {% endblock %}
    
    {% block content %}
        {# 重写base.html中content模块内容 #}
        {% if users %}
            {% for user in users %}
                <p>姓名：{
       { user['name'] }}， 年龄：{
       { user['age'] }}</p>
            {% endfor %}
        {% else %}
            <p>没有学生信息！</p>
        {% endif %}
    
        {% if comment %}
            <p>{
       { comment }}</p>
        {% else %}
            <p>comment字典为空</p>
        {% endif %}
    {% endblock %}

extentds关键字声明继承base.html模块，之后重写了base.html模板中的title和content模块。运行效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70_pic_left]: /images/20221120/afbce967d9ac4971851bbf1b89e9c0cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70_pic_left 1]: https://img-blog.csdnimg.cn/20201127101209377.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70#pic_left
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201127140202463.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201127105536572.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201127133821758.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70