Skip to content

模版技术

简介

Web 程序里，访问一个地址通常会返回一个包含各类信息的 HTML 页面。其中包含变量和运算逻辑的 HTML 或其他格式的文本叫做模板，执行这些变量替换和逻辑计算工作的过程被称为渲染。Flask 模板渲染是通过 Jinja2 引擎来完成的。

默认情况下，Flask 会从模块同级的 templates 目录下寻找模版。

应用场景与价值

使用模版的优点为:

  1. 动态内容：Flask 模板支持将动态数据插入 HTML 页面，从而可以创建个性化和交互式的 Web 应用程序。
  2. 代码重用：模板允许开发人员在多个页面之间重用常见的 HTML 组件，减少冗余代码，提高可维护性。
  3. 一致的设计：通过使用模板，开发人员可以确保应用程序在设计和布局上保持一致，从而实现专业和统一的用户体验。
  4. 与其他技术的集成：Flask 模板可以轻松与其他前端技术（如 CSS 框架和 JavaScript 库）集成，实现现代化和视觉上吸引人的 Web 界面。

模版渲染

  1. 在项目中创建模板的目录，注意模板的目录名称为 templates。
  2. 在 templates 目录中创建 HTML 文件，创建完成之后，目录结构为： 
    ./
├── xx.py
└── templates
    └── hogwarts.html
  1. 在 hogwarts.html 文件中写入以下内容： 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hogwarts</title>
  </head>
  <body>
    <h1>霍格沃兹平台</h1>
  </body>
</html>
<script type="text/javascript"></script>

  1. 视图函数的返回使用 render_template() 渲染对应的 HTML 文件，代码如下：

    from flask import Flask, render_template

# 创建 Flask 应用程序实例
app = Flask(__name__)

@app.route("/")
def hello():
    return render_template("hogwarts.html")

# 运行应用程序
if __name__ == '__main__':
    app.run(port=5055, debug=True)
  1. 启动服务，访问默认地址，即可看到渲染的 HTML 页面。

模版语法

利用 Jinja2 模板引擎，可以将一部分的程序逻辑放到模板中处理。也就是可以在模板中使用 python 语句和表达式来操作数据的输出。但需要注意的是，Jinja2 并不支持所有 python 语法。并且出于效率和代码组织等方面的考虑，应该适度使用模板，仅把和输出控制有关的逻辑操作放到模板中。

Jinja2 允许在模板中使用大部分 python 对象，比如字符串、列表、字典、元组、整型、浮点型、布尔值。它支持基本的运算符号（+、-、\*、/等）、比较符号（比如==、!=等）、逻辑符号（and、or、not 和括号）以及 in、is、None 和布尔值（True、False）。

  • 变量代码块 {{ }}: 主要用于变量的内容显示。
  • 控制代码块 {% %}: 主要用于涉及到与逻辑相关的代码块展示。

传递数据

在调用 render_template() 方法的时候，可以使用关键字传参的方式，给模板数据传递数据。

  1. 在hogwarts.html 的 body 标签中添加如下的 html 代码，其中{{ name }}代表模版中所包含的变量信息。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hogwarts</title>
  </head>
  <body>
    <h1>霍格沃兹平台</h1>
    <h2>{{ name }}</h2>
  </body>
</html>
<script type="text/javascript"></script>
  1. 视图函数中调用方法 render_template('hogwarts.html, name='hogwarts') 的时候，通过关键字传参的方式，将变量 name 的值传入进去。
from flask import Flask, render_template

# 创建 Flask 应用程序实例
app = Flask(__name__)


@app.route("/data")
def hogwarts():
    return render_template("hogwarts.html", name="hogwarts")

# 运行应用程序
if __name__ == '__main__':
    app.run(port=5055, debug=True)
  1. 启动服务，访问 /data 路由，name 变量的位置会展示的传入的值，也就是 hogwarts。

判断语法

Flask 中的 Jinja2 模板提供了多种控制结构，通过这些控制结构可以改变模板的渲染过程。以下为条件控制语句。

<!-- if 条件判断-->
{% if 条件表达式 %} 
....... 
{% elif 条件表达式 %} 
....... 
{% else %} 
....... 
{% endif %}

示例：

from flask import Flask, render_template

# 创建 Flask 应用程序实例
app = Flask(__name__)


@app.route("/person")
def person():
    person = {
        "name": "lily",
        "age": 18,
        "gender": "female"
    }
    return render_template("person.html", person=person)

# 运行应用程序
if __name__ == '__main__':
    app.run(port=5055, debug=True)

{.hidden .audio .subtitle}

templates 目录下创建 person.html 文件。

<!-- person.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
  <body>
    <p>
      您好, 
      {% if person.gender == "male" %} 
        {{ person.name }} 先生 
      {% else %}
      {{ person.name }} 女士 
      {% endif %}
    </p>
  </body>
</html>
<script type="text/javascript"></script>

{.hidden .audio .subtitle}

在模板中，Jinja2 支持使用 . 获取变量的属性，比如 person 字典中的 gender 键值通过 . 获取，即 person.gender，在效果上等同于 person['gender']。

启动服务，访问 /person 路由，可以通过判断性别来展示对应的欢迎信息。

{.hidden .audio .subtitle}

循环语法

和 python 里一样，for 语句用来迭代一个序列。

<!-- for 循环 -->
{% for row in list_or_dict %} 
{{ row }} 
{% endfor %}

示例：

from flask import Flask, render_template

# 创建 Flask 应用程序实例
app = Flask(__name__)


@app.route("/people")
def people():
    people = [
        {
            "name": "lily",
            "age": 18,
            "gender": "female"
        },
        {
            "name": "tom",
            "age": 19,
            "gender": "male"
        },
    ]
    return render_template("people.html", people=people)

# 运行应用程序
if __name__ == '__main__':
    app.run(port=5055, debug=True)

{.hidden .audio .subtitle}

templates 目录下创建 people.html 文件。

<!-- people.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
  <body>
    {% for p in people %}
    <p>
      Hello, 
      {% if p.gender == "male" %} 
        Mr. {{ p.name }} 
      {% else %} 
        Ms. {{ p.name }}<br />
      {% endif %} 
      Your age is {{ p.age }}<br />
      Your gender is {{ p.gender }}<br />
    </p>
    {% endfor %}
  </body>
</html>
<script type="text/javascript"></script>

{.hidden .audio .subtitle}

启动服务，访问 /people 路由，页面中会展示列表中所有的人员信息，并且通过判断性别来展示对应的欢迎信息。

{.hidden .audio .subtitle}

继承语法

模板继承允许创建一个基础的骨架模板， 这个模板包含网站的通用元素，并且定义子模板可以重载的区域。

一般在前端页面中有很多页面中有很多相同的地方，比如页面顶部的导航栏，底部的页脚等部分，这时候如果每一个页面都重写一遍，会很麻烦，而且也没必要。

这时候就可以做一个模板，叫做父模板，里面放上页面中相同的部分，不同的部分先使用其他东西占位。然后在不同的页面中，继承这个父模板，不同的部分填充不同的内容。

  • 定义父模板

    <!-- 父模版中定义，子模板可以直接继承重写 -->
{% block 自定义名称 %} 

{% endblock %}

    标签 block 用于在父模板中预留区域，留给子模板填充差异性的内容，名字不能相同。父模板中也可以使用上下文中传递过来的数据。

  • 子模板继承父模版

    {% extends '父模版' %}

{.hidden .audio .subtitle}

示例

  1. layout.html 文件是父模板，也可以看成是一个骨架。这个父模版可以让继承者对 title、content、footer 三个地方进行定制。
<!-- layout.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{% block title %}{% endblock %}</title>
  </head>
  <body>
    <div id="content">{% block content %}{% endblock %}</div>
    <div id="footer">
      {% block footer %} &copy; Copyright 2023 by
      <a href="https://ceshiren.com">测试人社区</a>. {% endblock %}
    </div>
  </body>
</html>
<script type="text/javascript"></script>

{.hidden .audio .subtitle}

  1. son.html 文件是子模版，是用来继承父模板的。子模版继承了父模板，并对 title、content 进行定制。
<!-- son.html -->

{% extends "layout.html" %} 

{% block title %}Son Page{% endblock %} 

{% block content %}

<h1>子模版</h1>
<button>按钮</button>

{% endblock %}

{.hidden .audio .subtitle}

  1. 定义视图函数，返回子模版 HTML 文件：
from flask import Flask, render_template

# 创建 Flask 应用程序实例
app = Flask(__name__)


@app.route("/extend")
def extend():
    return render_template("son.html")

# 运行应用程序
if __name__ == '__main__':
    app.run(port=5055, debug=True)

{.hidden .audio .subtitle}

  1. 访问路由后，展示页面如下所示：

{.hidden .audio .subtitle}

模版导入

模板导入就是将另一个模板加载到当前模板中，直接渲染。模板继承和类的继承含义是一样的，主要是为了提高代码重用，减轻开发工作量。

导入语法

{% include '文件名' %}

示例

  1. 创建顶部栏页面 top.html
<a>首页</a>
<a>关于</a>

{.hidden .audio .subtitle}

  1. 在 son.html 中导入 top.html
{% extends "layout.html" %}

{% block title %}Son Page{% endblock %}

{% include "top.html" %}

{% block content %}

<h1>子模版</h1>
<button>按钮</button>

{% endblock %}

{.hidden .audio .subtitle}

  1. 导入 top.html，该模版直接加载并渲染到当前模块中。

{.hidden .audio .subtitle}

  1. 导入列表

    也可以导入一个模板列表，程序会按照顺序依次寻找模板文件，第一个被找到的模板将被加载和渲染，后续的忽略。
{% include ['footer.html','bottom.html','top.html'] %}

{.hidden .audio .subtitle}

  1. 忽略报错

    此时，如果都没找到，程序会报错，如果想要忽略报错，可以在后面添加 ignore missing，用来忽略 include 语句。
{% include ['footer.html','bottom.html','end.html'] ignore missing %}

{.hidden .audio .subtitle}

总结

  • 模版渲染
  • 模版语法