06_Flask之jinja2模板引擎_传参_控制语句_模板继承

拼搏现实的明天。 2023-01-16 09:36 396阅读 0赞

### 文章目录 ###

*   *  1 什么是模板引擎？
     *  2 为什么要有模板引擎？
     *  3 在\`Flask\`如何使用模板引擎？
     *   *  3.1 模板引擎返回对比视图函数直接返回html代码
         *  3.2 修改默认模板引擎寻找路径
         *  3.3 模板引擎传参
         *   *  实例1 k=v：
             *  实例2 dict\{k1:v1,k2:v2...\}
             *  实例3 dict\{k1:v1 ... dict\{km:vm\} \}：
             *  关键词：
         *  3.4 模板中使用\`url\_for()\`
         *   *  实例：
             *  关键词：
         *  3.5 jinja2中控制语句
         *   *  1 jinja2中逻辑语句/if语句
             *   *  实例：
             *  2 jinja2中循环语句/for循环
             *   *  2.1 列表循环遍历项目实例：
                 *  2.2 字典循环遍历项目实例：
         *  3.6 模板加载静态文件
         *  3.7 模板的继承

## 1 什么是模板引擎？ ##

实现视图的业务逻辑和返回给前端的页面逻辑分离的工具，我们称之为模板引擎。

**什么是模板？**

模板可以理解为一个特殊的`html`文件，特殊之处就在于这个`html`文件包含固定内容和动态部分，其动态部分可以借助模板引擎进行传参

## 2 为什么要有模板引擎？ ##

在上一章其实我们已经应用过模板引擎，试想一下如果没有模板引擎，直接给把模板的html代码写在视图函数里面，会给程序员的日常开发带来了多大的困扰，模板引擎帮我们分开了业务逻辑和页面逻辑，并且我们每次修改一个大字符串会非常不方便。模板引擎还可以读取并执行模板中的特殊语法标记，并根据传入的数据将变量替换为实际值，然后返回给浏览器，这个过程我们称之为渲染。

**关键字**：完成了业务逻辑和页面逻辑的分离，实现了动态的去渲染页面。

## 3 在`Flask`如何使用模板引擎？ ##

`Flask`使用`jinja2`作为框架的默认模板引擎，`Jinja2`是基于`python`的模板引擎，功能比较类似于于`PHP`的`smarty`，`J2ee`的`Freemarker`和`velocity`。`Jinja2`除了设置变量，还允许我们在模板中添加if判断，执行for迭代，调用函数等，以各种方式控制模板的输出。并且`jinja2`不限制模板的格式为`html`，可以是任何格式的文本文件。

### 3.1 模板引擎返回对比视图函数直接返回html代码 ###

**项目目录**

![dad09b7f7a3683ade5781dabd503533b.png][]

**项目代码**

**（1）login01.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录界面</title>
    </head>
    <body>
    <h1>login01</h1>  
    <form action="" method="POST">
        用户：<input type="text" name="username">
        密码：<input type="text" name="password">
        <input type="submit" value="提交">
    </form>
    </body>
    </html>

**(2) login02.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录界面</title>
    </head>
    <body>
    <h1>login02</h1>  
    <form action="" method="POST">
        用户：<input type="text" name="username">
        密码：<input type="text" name="password">
        <input type="submit" value="提交">
    </form>
    </body>
    </html>

from flask import Flask, render_template
    import config
    
    app = Flask(__name__)
    app.config.from_object(config)
    
    
    @app.route('/demo/')
    def demo():
        return '<h2>手写html</h2>'
    
    
    @app.route('/demo02/')
    def demo02():
        return '''<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录界面</title> </head> <body>  <form action="" method="POST"> 用户：<input type="text" name="username"> 密码：<input type="text" name="password"> <input type="submit" value="提交"> </form> </body> </html>'''
    
    
    @app.route('/demo03/')
    def demo03():
        return render_template('login01.html')
    
    
    @app.route('/demo04/')
    def demo04():
        return render_template('box/login02.html')
    
    
    if __name__ == '__main__':
        app.run()

**server.py代码逻辑分析**：

*  demo函数 和 demo02函数证明直接返回html代码可渲染浏览器
 *  demo03 证明利用模板引擎 实现了业务逻辑和页面逻辑的分离，减轻了开发的复杂度
 *  demo04 证明了 `render_template('box/login02.html')`的路径是templates文件夹的相对路径

### 3.2 修改默认模板引擎寻找路径 ###

Flask类中的`template_folder`参数可以指定模板寻找路径

基于上3.1的项目

1.  现在把templates中的文件复制到 `C:/Users/Administrator/Desktop/template_box`中，并且删除项目中的templates的文件。
2.  修改server.py中`app = Flask(__name__)`为`app = Flask(__name__,template_folder='C:/Users/Administrator/Desktop/template_box')`

**分析:**

渲染一切正常 说明Flask类中的`template_folder`参数可以指定模板寻找路径。

### 3.3 模板引擎传参 ###

我们之前提到过，模板引擎还可以读取并执行模板中的特殊语法标记，并根据传入的数据将变量替换为实际值，这个步骤我们就称之为模板引擎传参。

我们传参的时候要应用`render_template()`利用render\_template的第二个参数进行传参，该函数在定义时候，第二个参数是可变长形参，所以在传值的时候我们可以传入多个关键字实参。

在模板中接收的时候使用`{ {}}`包裹参数进行接收。

#### 实例1 k=v： ####

**目录结构**

│ server.py
    │
    └─templates # 文件夹
            index.html

**server.py**

@app.route('/home/')
    def index():
    
        return render_template('index.html', name="mark", age=18)

**index.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模板传参</title>
    </head>
    <body>
        { { name}}
        { { age}}
    </body>
    </html>

![image-20210418202438109][]

#### 实例2 dict\{k1:v1,k2:v2…\} ####

**目录结构**：同上

**server.py**

from flask import Flask, render_template
    app = Flask(__name__)
    
    
    @app.route('/home/')
    def demo1():
        context_dict = { "name": "mark",
                        "age": "19",
                        "sex": "man"}
    
        return render_template('index.html', context_dict=context_dict)
    
    
    if __name__ == '__main__':
        app.run(debug=True)

**index.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模板传参</title>
    </head>
    <body>
        { { context_dict.name}}
        { { context_dict.age}}
        { { context_dict.sex}}
    </body>
    </html>

![image-20210418202749707][]

#### 实例3 dict\{k1:v1 … dict\{km:vm\} \}： ####

**目录结构**：同上

**server.py**

from flask import Flask, render_template
    
    app = Flask(__name__)
    
    
    @app.route('/home/')
    def demo2():
        context_dict = { "name": "mark",
                        "age": "16",
                        "sex": "ren_yao",
                        "other_info": { "tel": 136145155,
                                       "qq": 1258051773}}
    
        return render_template('index.html', **context_dict)
    
    
    if __name__ == '__main__':
        app.run(debug=True)

**index.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模板传参</title>
    </head>
    <body>
        {
       {name}} <br>
        {
       {age}}<br>
        {
       {sex}}<br>
        {
       {other_info.tel}}<br>
        {
       {other_info["qq"]}}
    </body>
    </html>

![image-20210418203318226][]

#### 关键词： ####

在视图函数中

*  render\_template传参的时候以关键字实参进行传参。可以传多个，可以用\*\*将字典打散成关键字实参。

在模板中

*  jinja2模板引擎支持接收变量在用 `{ {}}`包裹参数进行接收
 *  并且如果发现是字典，可以用`.`字典里面的key取出value值。也可以直接字典跟`[]`进行取值。

### 3.4 模板中使用`url_for()` ###

在模板中如果有使用url的需求，我们可以直接手写一个url，也可以使用`{ { url_for('视图函数名') }`动态翻转一个url。

#### 实例： ####

**项目目录：**

│ server.py
    │
    └─templates # 文件夹
            index.html
            info.html

**server.py**

from flask import Flask, render_template
    
    app = Flask(__name__)
    
    
    @app.route('/home/')
    def index():
    
        return render_template('index.html', name="mark", age=18)
    
    
    @app.route('/info/')
    def info():
    
        return render_template('info.html')
    
    
    if __name__ == '__main__':
        app.run(debug=True)

**info.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>信息页面</title>
    </head>
    <body>
        <h1>这是信息页面</h1>
    </body>
    </html>

**index.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模板传参</title>
    </head>
    <body>
        <a href="/info/">正常跳转</a>
        <a href="{ { url_for('info') }}">urlfor跳转</a>
    </body>
    </html>

![image-20210418205856002][]

![image-20210418210917440][]

正常跳转 和 urlfor跳转，皆可以实现跳转到info.html页面。

正常跳转就不做演示了

#### 关键词： ####

*  url\_for 在视图函数中如何使用，在模板中同样的用法。
 *  支持翻转查询字符串
 *  支持动态路由翻转

### 3.5 jinja2中控制语句 ###

在jinja2中用`{% %}`特殊符号来编辑控制语句，一个语句以`{% ... %}`为起始 并且以`{% end... %}`来标记结束。

#### 1 jinja2中逻辑语句/if语句 ####

可以使用`> , < , <=, ==，!=,`进行判断，

也可以使用 `and，or，not，（）`来进行逻辑合并

{% if age > 18 %}
            <p>成年人</p>
        {% elif age == 18 %}
            <p>刚刚成年</p>
        {% else %}
            <p>未成年</p>
        {% endif %}

注意：`<p>`只是为了渲染明显

##### 实例： #####

**项目目录**：

│ server.py
    │
    └─templates # 文件夹
            index.html

**server.py**

from flask import Flask, render_template
    
    app = Flask(__name__)
    
    
    @app.route('/home/')
    def hello_world():
        context_dict = { 
            'age': 17,
            'sex': 'man',
        }
        return render_template('index.html', **context_dict)
    
    
    if __name__ == '__main__':
        app.run(debug=True)

**index.html**

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>jinja2分支</title>
    </head>
    <body>
        {% if sex == 'man' %}
            <p>男人</p>
        {% else %}
            <p>女人</p>
        {% endif %}
    
        {% if age > 18 %}
            <p>成年人</p>
        {% elif age == 18 %}
            <p>刚刚成年</p>
        {% else %}
            <p>未成年</p>
        {% endif %}
    </body>
    </html>

![image-20210419102838966][]

#### 2 jinja2中循环语句/for循环 ####

`for`循环可以便利任何一个可迭代对象，包括列表、字典等，支持反向遍历

**列表循环：**

{% for country in countrys%}
            <p>{
       { country }}</p>
        {% else %}
            <p>没有值</p>
        {% endfor %}

##### 2.1 列表循环遍历项目实例： #####

项目目录：

│ server.py
    │
    └─templates # 文件夹
            index.html

server.py

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>for循环</title>
    </head>
    <body>
        {% for country in countrys %}  {#    {% for country in countrys|reverse %} 可以实现反向遍历#}
            <p>{
       { country }}</p>
        {% else %}
            <p>没有值</p>
        {% endfor %}
    </body>
    </html>

![image-20210419103436024][]

*反向遍历实例*

`server.py`的 `{% for country in countrys %}` 改为 `{% for country in countrys|reverse %}`

可以实现反向遍历，运行效果如下图

![image-20210419103553148][]

##### 2.2 字典循环遍历项目实例： #####

项目目录

│ server.py
    │
    └─templates # 文件夹
            index.html

**server.py**

from flask import Flask, render_template
    
    app = Flask(__name__)
    
    
    @app.route('/home/')
    def hello_world():
        context_dict = { 
            'countrys': ["1-china", "2-America", "3-French"]
        }
        return render_template('index.html', **context_dict)
    
    
    @app.route('/demo/')
    def demo():
        context_dict = { 
            'colleges': [
                { 
                    'name': '清华大学',
                    'area': '北京'
                },
                { 
                    'name': '复旦大学',
                    'area': '上海'
                            ''
                },
                { 
                    'name': '吉林大学',
                    'area': '吉林'
                },
                { 
    
                    'name': '中山大学',
                    'area': '广东'
                }
            ]
        }
        return render_template('index.html', **context_dict)
    
    
    if __name__ == '__main__':
        app.run(debug=True)

**index.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>for循环</title>
    </head>
    <body>
    
        <table>
            <tr>
                <th>1开始的序号</th>
                <th>0开始的序号</th>
                <th>大学名称</th>
                <th>所属地区</th>
                <th>总数</th>
    
            </tr>
            {% for college in colleges %}
                {% if loop.first %}
                    <tr style="background: blue">
                {% elif loop.last %}
                    <tr style="background: yellow ">
                {% else %}
                    <tr>
                {% endif %}
                    <td>{
       { loop.index }}</td>
                    <td>{
       { loop.index0 }}</td>
                    <td>{
       { college.name }}</td>
                    <td>{
       { college.area }}</td>
                    <td>{
       { loop.length }}</td>
                </tr>
            {% endfor %}
        </table>
    </body>
    </html>

![image-20210419113903060][]

**for循环常用变量表**

<table> 
 <thead> 
  <tr> 
   <th>for循环常用变量</th> 
   <th>功能描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>loop.index</td> 
   <td>当前循环的索引（从1开始）</td> 
  </tr> 
  <tr> 
   <td>loop.index0</td> 
   <td>当前循环的索引（从0开始）</td> 
  </tr> 
  <tr> 
   <td>loop.first</td> 
   <td>是否是第一次循环，是返回True，否则返回Flase</td> 
  </tr> 
  <tr> 
   <td>loop.last</td> 
   <td>是否是最后一次循环，是返回True，否则返回Flase</td> 
  </tr> 
  <tr> 
   <td>loop.length</td> 
   <td>总共可以循环的次数 / 迭代器的长度</td> 
  </tr> 
 </tbody> 
</table>

**for循环中的else用法**

for还可以else分支语法，如果for内部没有遍历出来内容，那么就会走else分支，反之如果for循环遍历出了内容，则不会运行else分支。

*注意：`jinja2`中的`for` 和 `else`逻辑不通于`python`在此不要类比python中的 `for` 和 `else` 。*

{% for country in countrys|reverse %}
            <p>{
       { country }}</p>
        {% else %}
            <p>没有值</p>
        {% endfor %}

### 3.6 模板加载静态文件 ###

在模板中加载静态文件的时候也要使用到`url_for()`函数，去寻找具体的静态文件资源。第一个参数是定位到`static`文件夹，`filename`参数定位到static文件夹内的具体资源。

{
       { url_for('static',filename='相对于static文件夹的路径') }}

实例：

项目目录：

│  app.py
    │
    ├─static  # 文件夹
    │  ├─css  # 文件夹
    │  │      demo.css
    │  │
    │  ├─images  # 文件夹
    │  │      1.png
    │  │
    │  └─js  # 文件夹
    │          demo.js
    │
    ├─templates  # 文件夹
         index.html

**app.py**

from flask import Flask, render_template
    
    app = Flask(__name__)
    
    
    @app.route('/home/')
    def hello_world():
        return render_template('index.html')
    
    
    if __name__ == '__main__':
        app.run(debug=True)

**index.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>静态文件加载</title>
    
        <link rel="stylesheet" href="{ { url_for('static',filename='css/demo.css') }}">
        <script src="{ { url_for('static',filename='js/demo.js') }}"></script>
    
    </head>
    <body>
        <img src="{ { url_for('static',filename='images/1.png') }}">
    </body>
    </html>

**demo.css**

body{ 
        background: red;
    }

**demo.js**

alert('hello world')

![image-20210419120905787][]

![image-20210419120917141][]

### 3.7 模板的继承 ###

jinja2的模板继承可以把一些公共的代码定义到一个基模板中，比如把导航栏、页脚等通用内容放在基模板中，以后所有的子模板直接继承基模板，在子模板被渲染时会自动包含继承基模板的内容，通过模板的继承可以避免在多个模板中编写重复的代码。

**具体实现：**

在基模板中定义一些公共的代码，子模板会继承这些公共的代码，但是子模板需要根据自己的需求去实现不同的代码，这个时候就需要在基模板中提供一些接口，以便子模板实现自己的业务需求。

**1 基本写法**

在基/父模板中定义接口（block）

{% block main %} {# main是自定义的变量名 #}
    
    {% endblock %}

在子模板中继承父模板，并且重写接口（block）

{% extends 'base.html' %} {# extends 后面跟的参数是导入的基模板相对于templates的路径 #}
    {% block main %}
        
    {% endblock %}

**2 子模板中调用父模板代码block中的代码**

基模板中

{% block main %}
    <p>父模板中main中原有的内容</p>
    
    {% endblock %}

子模板中：

{% block main %}
        {
       { super() }}   {# 保留基模板中本块的代码 #}
        <p>子模板中重写main的内容 </p>
    {% endblock %}

**3 在子模板中调用其他block中的代码：**

子模板中：

{% block main %}
        {
       { self.demo() }} {# self.其他block名字 #}
        <p>子模板中重写main的内容 </p>
    {% endblock %}

**4 子模板中的想定义自己的代码只能放到block中，否则无效**

实例

注意：这里面我们使用了bootstrap框架。

bootstrap3的中文官网：https://v3.bootcss.com/

1 首先下载 `用于生产环境的 Bootstrap`

![586eeeae6c3caa3b7ae3f8c16990b398.png][]

2 解压出来里面的css文件

**项目目录**

│  app.py
    │
    ├─static  # 文件夹
    │  └─css
    │          bootstrap-theme.css
    │          bootstrap-theme.css.map
    │          bootstrap-theme.min.css
    │          bootstrap-theme.min.css.map
    │          bootstrap.css
    │          bootstrap.css.map
    │          bootstrap.min.css
    │          bootstrap.min.css.map
    │
    ├─templates  # 文件夹
           base.html
           detail.html

**css文件夹**： 是从我们上面下载好的`用于生产环境的 Bootstrap`中解压出来的

**base.html** *注意：里面的`form`标签*中的内容和`nav`标签中的内容均是bootstrap框架的代码截取，`div`标签是用于清除浮动

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>父模板</title>
        <link rel="stylesheet" href="{ { url_for('static',filename='css/bootstrap.css') }}">
    </head>
    <body>
        <form class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <div style=" visibility:hidden;display:block;font-size:0;clear:both; height:50px"></div>
    
    
        {% block main %}
            <p>父模板中main中原有的内容</p>
    
        {% endblock %}
       <br>
       <br>
       <br>
        {% block demo %}
            <p>demo中原有的内容</p>
        {% endblock %}
    
    
    <div style=" visibility:hidden;display:block;font-size:0;clear:both; height:0"></div>
    <nav aria-label="Page navigation">
      <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">«</span>
          </a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">»</span>
          </a>
        </li>
      </ul>
    </nav>
    
    </body>
    </html>

**detail.html**

{% extends 'base.html' %}
    {% block demo %}
        <p>子模板中重写demo的内容</p>
    {% endblock %}
    {% block main %}
        {
       { super() }}   {# 保留基模板中本block的代码 #}
        {
       { self.demo() }} {# 调用demo block的代码 #}
        <p>子模板中重写main的内容 </p>
    {% endblock %}

\*\*server.py \*\* 注意：`app.config.update(TEMPLATES_AUTO_RELOAD=True)`语句用于每次都重新加载模板文件

from flask import Flask, render_template
    
    app = Flask(__name__)
    app.config.update(TEMPLATES_AUTO_RELOAD=True)
    
    
    @app.route('/home/')
    def hello_world():
        return render_template('base.html')
    
    
    @app.route('/demo/')
    def demo():
        return render_template('detail.html')
    
    
    if __name__ == '__main__':
        app.run()

父模板运行效果

![image-20210419151956782][]

子模板运行效果

![image-20210419152040151][]

[dad09b7f7a3683ade5781dabd503533b.png]: /images/20221022/51603d319a074b71a9b53a4bba2934d8.png
[image-20210418202438109]: /images/20221022/2d8079c3906e45a6a3d5d38e2c1391b7.png
[image-20210418202749707]: /images/20221022/827a032653714f2499a149f55f289cdf.png
[image-20210418203318226]: /images/20221022/0ae494a3ebe54a89bd51cc3e564085d2.png
[image-20210418205856002]: /images/20221022/ff90d0f03a94461badb6f0a9143fa213.png
[image-20210418210917440]: /images/20221022/76aa3e29a5984a5496ca6428069ab0e6.png
[image-20210419102838966]: /images/20221022/a561f4b16ac2445a88bcf6f0838e5705.png
[image-20210419103436024]: /images/20221022/1a777a3e6413415aade296c1ebd34aab.png
[image-20210419103553148]: /images/20221022/5665478e5d1142da98a9aa2bb59d0367.png
[image-20210419113903060]: /images/20221022/cc688f6f81c547cdb102bfab97890f55.png
[image-20210419120905787]: /images/20221022/8c73cc814b2949a5a30b2a8601f7691d.png
[image-20210419120917141]: /images/20221022/98d0dd60f94d4d49a1f65a10decc622c.png
[586eeeae6c3caa3b7ae3f8c16990b398.png]: /images/20221022/4ebc771d5d224813b6a71861a3c6843e.png
[image-20210419151956782]: /images/20221022/0491d576f689479fa0771aba9c46f2c0.png
[image-20210419152040151]: /images/20221022/45d822a1a5bd4fff84c492f6991059aa.png