一、模板技术
1.1、模板简介
web程序里，访问一个网址通常会返回一个包含各类信息的html页面。其中包含变量和运算逻辑的html或其他格式的文本叫做模板，执行这些变量替换和逻辑计算工作的过程被称为渲染。
Flask 模板渲染是通过 Jinja2 引擎来完成的。
1.2、模板的优点
- 动态内容：Flask 模板支持将动态数据插入 HTML 页面，从而可以创建个性化和交互式的 Web 应用程序。
- 代码重用：模板允许开发人员在多个页面之间重用常见的 HTML 组件，减少冗余代码，提高可维护性。
- 一致的设计：通过使用模板，开发人员可以确保应用程序在设计和布局上保持一致，从而实现专业和统一的用户体验。
- 与其他技术的集成：Flask 模板可以轻松与其他前端技术（如 CSS 框架和 JavaScript 库）集成，实现现代化和视觉上吸引人的 Web 界面。
一、渲染模版
- 在
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>
- 视图函数的返回使用
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)
二、模版语法
利用Jinja2模板引擎，可以将一部分的程序逻辑放到模板中处理。也就是在模板中使用python语句和表达式来操作数据的输出。但需要注意的是，Jinja2并不支持所有的python语法。并且出于效率和代码组织等方面的考虑，应该适度使用模板，仅把与输出控制有关的逻辑放到模板中。
Jinja2允许在模板中使用大部分python对象，比如字符串、列表、字典、元组、整型、浮点型、布尔值。 它支持基本的运算符号（+、-、\*、/等）、比较符号（比如==、!=等）、逻辑符号（and、or、not 和括号）以及 in、is、None 和布尔值（True、False）。
- 变量代码块{{}}用于变量内容显示；
- 控制代码块{%%}：主要用于与逻辑相关的代码块展示。
2.1、传递数据
在调用render_template()方法时，可以使用关键字传参的方式，给模板传递数据
2.2、判断语法
<!-- if 条件判断-->
{% if 条件表达式 %}
.......
{% elif 条件表达式 %}
.......
{% else %}
.......
{% endif %}
2.3、循环语法、
{% for row in dic_or_list %}
...
{% endfor %}
2.4、继承语法
模板继承允许创建一个基础的骨架模板， 这个模板包含网站的通用元素，并且定义子模板可以重载的区域。
一般在前端页面中有很多页面中有很多相同的地方，比如页面顶部的导航栏，底部的页脚等部分，这时候如果每一个页面都重写一遍，会很麻烦，而且也没必要。
这时候就可以做一个模板，叫做父模板，里面放上页面中相同的部分，不同的部分先使用其他东西占位。然后在不同的页面中，继承这个父模板，不同的部分填充不同的内容。
<!-- 父模版中定义，子模板可以直接继承重写 -->
{% block 自定义名称 %}
{% endblock %}
2.5、模版导入
模板导入就是将另一个模板加载到当前模板中，直接渲染。模板继承和类的继承含义是一样的，主要是为了提高代码重用，减轻开发工作量。
创建顶部栏页面 top.html
<a>首页</a>
<a>关于</a>
在 son.html 中导入 top.html
{% extends "layout.html" %}
{% block title %}Son Page{% endblock %}
{% include "top.html" %}
{% block content %}
<h1>子模版</h1>
<button>按钮</button>
{% endblock %}