Flask页面渲染机制(Template Rendering)

Posted on Views:

1.核心原理

请求 → 视图 → 模板 → 响应

Flask 的页面渲染本质是：

Jinja2 模板引擎 + HTTP Response 组装

流程如下：

flowchart LR
    A[Client Request] --> B[Flask Route]
    B --> C[View Function]
    C --> D[render_template]
    D --> E[Jinja2 Render]
    E --> F[HTML Response]
    F --> G[Client Browser]

2.render_template 工作机制

核心函数：

1
2
3
4
5
from flask import render_template

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

执行过程拆解

    1. 查找模板路径（默认 templates/）
    1. 加载模板（Jinja2 Loader）
    1. 解析模板语法（变量 / 控制结构）
    1. 渲染上下文数据
    1. 返回 HTML 字符串（最终封装为 Response）

3.Jinja2 模板语法（核心）

变量输出

1
{{ name }}

控制结构

1
2
3
{% for user in users %}
    <li>{{ user }}</li>
{% endfor %}

条件判断

1
2
3
{% if is_admin %}
    Admin Panel
{% endif %}

4.模板继承（生产推荐）

1
2
3
4
5
6
<!-- base.html -->
<html>
<body>
    {% block content %}{% endblock %}
</body>
</html>
1
2
3
4
5
<!-- index.html -->
{% extends "base.html" %}
{% block content %}
    Hello {{ name }}
{% endblock %}

👉 优点：

  • 降低重复代码
  • 支持组件化布局（header/footer/sidebar）

5.高级：自定义过滤器

1
2
3
@app.template_filter("upper_case")
def upper_case(s):
    return s.upper()
1
{{ name | upper_case }}

6.架构

flowchart TB
    A[Client] --> B[Flask Router]
    B --> C[View Function]
    C --> D[Template Rendering]
    C --> E[Set Cookie]
    E --> F[Response Header]
    D --> G[HTML]
    F --> H[Browser Storage]