Flask(四) 模板渲染render

文章目录

📦 过程详解（路由 <-> HTML 模板）
- 🧠 数据是怎么传过去的？
- 多变量示例
✅ Jinja2 支持条件判断、循环、模板继承：
✅ 安全性
- 🔒 Flask 默认也会对变量进行 HTML 转义：
- 📍 {{ chart | safe }}
- - 在 pyecharts 中怎么用？
📦模板继承
- 🧱 文件结构示例
- - base.html（母板模板）
  - index.html（子模板）
  - login.html（子模板）
📦过滤器
📦宏和模板包含
📦 Flask-Login 登录系统
- 1、安装 Flask-Login：
- 2、初始化 LoginManager
- 3、用户模型实现：
- 4、登录与登出视图示例：
- 5、当前登录的用户
- - 含义解释
- 其他常用方法

Flask 使用 Jinja2 模板引擎来处理模板渲染。模板渲染允许你将动态内容插入到 HTML 页面中，使得应用能够生成动态的网页内容。

创建模板：将 HTML 文件放在 templates 文件夹中，使用 Jinja2 占位符。
渲染模板：使用 render_template 函数在视图函数中渲染模板。
模板继承：创建基础模板，允许其他模板继承和扩展。
控制结构：使用条件语句和循环在模板中控制逻辑。
过滤器：使用过滤器格式化变量数据。
宏和模板包含：创建和使用宏以及模板包含，提高模板的复用性。
安全性：Jinja2 默认对模板变量进行自动转义以防止 XSS 攻击。
模板上下文：将数据传递给模板，并在模板中使用这些数据。

📦 过程详解（路由 <-> HTML 模板）

浏览器请求：GET /hello↓
Flask 匹配 @app.route('/hello') → 调用 hello() 函数↓
hello() 中使用 render_template() 渲染 hello.html↓
将 name="张三" 传入模板引擎 Jinja2↓
Jinja2 渲染出 HTML: <h1>你好, 张三!</h1>↓
Flask 把 HTML 打包成 Response 对象返回浏览器↓
浏览器显示页面

🧠 数据是怎么传过去的？

render_template("模板名.html", 变量名1=值1, 变量名2=值2, ...)

模板中用 {{ 变量名 }} 就能访问到。

多变量示例

@app.route('/dashboard')
def dashboard():stats = {"pv": 1000, "uv": 300}return render_template('dashboard.html', stats=stats, username="admin")

templates/dashboard.html

<h2>欢迎, {{ username }}</h2>
<p>页面浏览量：{{ stats.pv }}</p>
<p>独立访客数：{{ stats.uv }}</p>

✅ Jinja2 支持条件判断、循环、模板继承：

{% if user %}<p>欢迎 {{ user }}！</p>
{% else %}<p>请先登录</p>
{% endif %}

{% if user %}：检查 user 变量是否存在，如果存在，则显示欢迎消息，否则显示登录提示。

循环语句：

<ul>
{% for item in items %}<li>{{ item }}</li>
{% endfor %}
</ul>

{% for item in items %}：遍历 items 列表，并为每个项生成一个 <li> 元素。

✅ 安全性

自动转义：Jinja2 默认会对模板中的变量进行自动转义，防止 XSS 攻击。
{{ user_input }}：用户输入的内容会被自动转义，以避免恶意脚本的注入。

🔒 Flask 默认也会对变量进行 HTML 转义：

比如

chart = "<script>alert('Hi')</script>"

在模版中写

{{ chart }}

浏览器会看到：

&lt;script&gt;alert('Hi')&lt;/script&gt;

因为 Flask 模板会自动进行 HTML 安全转义。

📍 {{ chart | safe }}

{{ chart | safe }} 是 Flask 模板中一个非常常见的写法，特别用于像 pyecharts、plotly 等图表库，把图表插入 HTML 页面的关键语句。
{{ chart | safe }} 意思是把 chart 的内容作为 HTML 原样输出（不再自动转义）

在 pyecharts 中怎么用？

pyecharts 生成的图表是一个 HTML

和

from pyecharts.charts import Bar
from pyecharts import options as optsbar = (Bar().add_xaxis(["A", "B", "C"]).add_yaxis("销量", [10, 20, 30])
)
chart = bar.render_embed()

在 Flask 中渲染：

return render_template("chart.html", chart=chart)

模板中这样写：

<div>{{ chart | safe }}
</div>

这样图表就会在页面中正常显示！

请不要对用户输入的数据使用 | safe，除非你已经对内容做过严格校验，否则可能产生 XSS 攻击漏洞。

📦模板继承

模板继承允许你创建一个基础模板，然后在其他模板中继承和扩展这个基础模板，避免重复的 HTML 代码。

创建基础模板：在 templates 文件夹中创建一个基础模板 base.html。

templates/base.html 示例：

<!DOCTYPE html>
<html>
<head><title>{% block title %}My Website{% endblock %}</title>
</head>
<body><header><h1>My Website</h1></header><main>{% block content %}{% endblock %}</main><footer><p>Footer content</p></footer>
</body>
</html>

{% block title %} {% endblock %} 和 {% block content %} {% endblock %} 是定义的可替换区域。
创建子模板：在 templates 文件夹中创建一个子模板 index.html，继承 base.html。

templates/index.html 文件代码：

{% extends "base.html" %}{% block title %}Home Page{% endblock %}{% block content %}
<h2>Welcome to the Home Page!</h2>
<p>Content goes here.</p>
{% endblock %}

{% extends "base.html" %}：继承基础模板。

{% block title %} 和 {% block content %}：重写基础模板中的块内容。

🧱 文件结构示例

templates/
├── base.html        ← 通用母版模板
├── index.html       ← 首页（继承 base）
└── login.html       ← 登录页（继承 base）

base.html（母板模板）

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>{% block title %}默认标题{% endblock %}</title><link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body><header><h1>我的网站</h1><nav><a href="{{ url_for('index') }}">首页</a> |<a href="{{ url_for('login') }}">登录</a></nav></header><main>{% block content %}{% endblock %}</main><footer><p>版权所有 © 2025</p></footer>
</body>
</html>

index.html（子模板）

{% extends "base.html" %}{% block title %}首页{% endblock %}{% block content %}
<h2>欢迎访问首页</h2>
<p>这里是首页内容</p>
{% endblock %}

login.html（子模板）

{% extends "base.html" %}{% block title %}登录{% endblock %}{% block content %}
<h2>登录页面</h2>
<form method="post">用户名: <input name="username"><br>密码: <input name="password" type="password"><br><button type="submit">登录</button>
</form>
{% endblock %}

📦过滤器

过滤器用于在模板中格式化和处理变量数据。

<p>{{ name|capitalize }}</p>
<p>{{ price|round(2) }}</p>

{{ name|capitalize }}：将 name 变量的值首字母大写。
{{ price|round(2) }}：将 price 变量的值四舍五入到小数点后两位。

📦宏和模板包含

宏是可重用的模板片段。模板包含允许你在一个模板中插入另一个模板的内容。
创建宏

templates/macros.html 代码文件：
实例
{% macro render_item(item) %}<div><h3>{{ item.title }}</h3><p>{{ item.description }}</p></div>
{% endmacro %}

使用宏：

templates/index.html 文件代码：
实例

{% from "macros.html" import render_item %}<h1>Items</h1>
{% for item in items %}{{ render_item(item) }}
{% endfor %}

{% from "macros.html" import render_item %}：导入宏。
{{ render_item(item) }}：调用宏来渲染每个 item。

📦 Flask-Login 登录系统

1、安装 Flask-Login：

pip install flask-login

2、初始化 LoginManager

from flask_login import LoginManagerlogin_manager = LoginManager()
login_manager.init_app(app)@login_manager.user_loader
def load_user(user_id):return User.query.get(user_id)

3、用户模型实现：

from flask_login import UserMixinclass User(db.Model, UserMixin):id = db.Column(db.Integer, primary_key=True)username = db.Column(db.String(64), unique=True, nullable=False)# 其他字段...

UserMixin 提供 is_authenticated、is_active、get_id() 等属性
将 UserMixin 添加到你的用户模型中后，它会自动为你提供实现 Flask-Login 所要求的接口。

4、登录与登出视图示例：

from flask_login import login_user, logout_user@app.route('/login', methods=['GET', 'POST'])
def login():user = User.query.filter_by(username="admin").first()login_user(user)  # 登录return redirect(url_for('index'))@app.route('/logout')
def logout():logout_user()return redirect(url_for('index'))

5、当前登录的用户

from flask_login import current_user

<body>{% if current_user.is_authenticated %}<p>欢迎，{{ current_user.username }}！</p><a href="{{ url_for('logout') }}">登出</a>{% else %}<p>您尚未登录。</p><a href="{{ url_for('login') }}">登录</a>{% endif %}
</body>

含义解释

{% if current_user.is_authenticated %}:在使用 Flask-Login 时，current_user 是 Flask 提供的一个全局代理对象，代表当前登录的用户。
current_user.is_authenticated 是一个布尔值：

True：用户已登录
False：用户未登录（匿名）

其他常用方法

代码	说明
`current_user.is_authenticated`	判断当前用户是否登录
`current_user.username`	访问当前登录用户属性
`UserMixin`	提供用户模型默认认证属性