08.模版技术-526互联

简介

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

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

应用场景与价值

使用模版的优点为:

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

模版渲染

在项目中创建模板的目录，注意模板的目录名称为 templates。
在 templates 目录中创建 HTML 文件，创建完成之后，目录结构为：

./
├── xx.py
└── templates
└── hogwarts.html

3.在 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>

4.视图函数的返回使用 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)

5.启动服务，访问默认地址，即可看到渲染的 HTML 页面。

模版语法

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

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

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

传递数据

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

在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>

视图函数中调用方法 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)

启动服务，访问 /data 路由，name 变量的位置会展示的传入的值，也就是 hogwarts。

判断语法

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

{% 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)

templates 目录下创建 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>

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

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

循环语法

和 python 里一样，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)

templates 目录下创建 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>

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

继承语法

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

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

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

定义父模板

{% block 自定义名称 %}

{% endblock %}

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

子模板继承父模版

{% extends '父模版' %}

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 %} © Copyright 2023 by
<a href="https://ceshiren.com">测试人社区</a>. {% endblock %}
</div>
</body>
</html>
<script type="text/javascript"></script>

这个父模版可以让继承者对 title、content、footer 三个地方进行定制。