Flask模板渲染

什么是模板

Flask使用jinja2作为默认模板引擎

作用：将html页面与python业务代码分离，页面中嵌入动态变量，循环，判断逻辑，后端传入数据，引擎的自动渲染生成完整的html返回浏览器

目录规范

flask默认从templates目录下加载模板

核心渲染函数(render_template)

导入与基础用法

python 复制代码

from flask import  Flask,render_template

app = Flask(__name__)

@app.route("/")
def index():
    # 直接返回index.html页面，从templates目录下面找
    return render_template("index.html")


if __name__ == '__main__':
    app.run(debug=True)

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<h1>welcome index page</h1>
</body>
</html>

变量的情况

变量，字典，类名

html中变量用{{变量名}} 包裹起来

python 复制代码

@app.route("/test1")
def test1():
    username = "admin"
    password = "123"
    # 使用test1.html文件，username 将值传入给模板文件中去
    return render_template("test1.html",username=username,password=password)

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
</head>
<body>
<h1>username:{{username}}</h1>
<h1>psd:{{password}}</h1>
</body>
</html>

字典的情况

python 复制代码

@app.route("/test1")
def test1():
    username = "admin"
    password = "123"
    data = {
        "name": "zhangsan",
        "age": 18
    }
    # 直接传入data字典
    return render_template("test1.html",username=username,password=password,data=data)

html文件

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
</head>
<body>
<h1>username:{{username}}</h1>
<h1>psd:{{password}}</h1>
<!-- 通过data.name进行取值 -->
<h1>{{data.name}},{{data.age}}</h1>
</body>
</html>

关于类的情况

python 复制代码

class User():
    def __init__(self,sex):
        self.sex=sex


@app.route("/test1")
def test1():
    username = "admin"
    password = "123"
    data = {
        "name": "zhangsan",
        "age": 18
    }
    user = User("男")
    return render_template("test1.html",username=username,password=password,data=data,user=user)

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
</head>
<body>
<h1>username:{{username}}</h1>
<h1>psd:{{password}}</h1>
<h1>{{data.name}},{{data.age}}</h1>
<!-- 对象.属性，进行调用 -->
<h1>{{user.sex}}</h1>
</body>
</html>

jinja2模板基础语法

变量渲染

变量用{{变量名}}来渲染

html 复制代码

<!-- index.html -->
<p>用户名：{{ username }}</p>
<p>年龄：{{ user_age + 5 }}</p>
<p>爱好第一条：{{ hobby[0] }}</p>
<p>字典取值：{{ user["id"] }} 或 {{ user.id }}</p>

控制语句

html 复制代码

<!-- 里面的age不需要{{}},直接使用，规则 -->
{% if age > 18 %}
<div>你已经成年了</div>

{% elif age < 18 %}
<div>你还没有成年</div>

{% else %}
<div>刚满18岁</div>

{% endif %}

python 复制代码

@app.route("/if_for")
def if_for():
    age = 19
    # 给html中的age传入值
    return render_template("if-for.html",age=age)

for循环

html 复制代码

{% if age > 18 %}
<div>你已经成年了</div>

{% elif age < 18 %}
<div>你还没有成年</div>

{% else %}
<div>刚满18岁</div>

{% endif %}


<!-- for循环的话，需要{{}}括起来 -->
{% for i in data %}

name: {{i["name"]}}
age: {{i["age"]}}

{% endfor %}

python 复制代码

@app.route("/if_for")
def if_for():
    age = 19
    data = [
        {"name": "zhangsan", "age": 18},{"name": "lisi", "age": 19}
    ]
    # 传入列表进去，循环，得到每一个字典，然后通过字典取值来获取即可
    return render_template("if-for.html",age=age,data=data)

注释

html 复制代码

不会渲染到最终的html上，仅在模块内注释

{# 注释内容  #}

过滤器(filter)

对输出变量做格式化、转义、处理，支持链式调用 var|f1|f2

html 复制代码

<!-- 转大写 -->
{{ username|upper }}
<!-- 首字母大写 -->
{{ username|capitalize }}
<!-- 列表长度 -->
{{ hobby|length }}
<!-- 默认值，变量为空则显示默认 -->
{{ desc|default("暂无描述") }}
<!-- 四舍五入保留2位小数 -->
{{ 3.1415 | round(2) }}
<!-- 截取前5个字符 -->
{{ content|truncate(5) }}
<!-- 反转列表 -->
{{ hobby|reverse }}

html 复制代码

<h1>{{username|upper}}</h1>

python 复制代码

@app.route("/test2")
def test2():
    return render_template("test2.html",username="admin")

模板继承(最常用，复用公共页面)

标签	作用
`{% extends "base.html" %}`	声明当前模板继承自 base.html（必须放在第一行）
`{% block name %}...{% endblock %}`	定义一个可被子模板覆盖的区域
`{{ super() }}`	在子模板 block 中调用父模板同名 block 的内容

父模板

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 子模板可以自定义的 -->
    <title>{% block title %} 默认标题 {% endblock %}</title>
</head>
<body>
    <!-- 没有这个block的话，就是直接继承使用，父模板是什么样子，子模板就继承 -->
<nav>网站导航|首页|个人中心</nav>

{% block content %} {% endblock %}

<foote>版权所有 2026flask演示</foote>
</body>
</html>

子模板

html 复制代码

<!-- 继承父模板的内容 -->
{% extends "base.html" %}

<!-- 自定义内容 -->
{% block title %}

这个我的首页网站

{% endblock %}


{% block content %}

<h1>欢迎来到我的首页</h1>

{% endblock %}

<!-- 其他没有写的话，自动继承父模板的 -->

python 复制代码

# 父模板
@app.route("/base")
def base():
    return render_template("base.html")

# 子模板
@app.route("/zi")
def zi():
    return render_template("子模板1.html")

@app.route("/z2")
def z2():
    return render_template("子模板2.html")

父模板

子模板

静态文件加载

除了html代码后，还有css,js,图片，这些静态文件，存放在static文件中，通过url_for来加载这些静态文件

需要创建一个static目录，用来存放静态文件的

python 复制代码

@app.route("/test/static")
# 不能写成static函数，关键字，运行会报错
def template_static():
    return render_template("static.html")

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态文件加载</title>
</head>
<body>

<h1 class="title">静态文件加载</h1>

</body>
</html>

css 复制代码

.title {

background-color: red;

}

访问，静态文件没有被加载

添加link就能生效，就能加载静态文件了

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- filename是相对于static这个目录而言的 -->
    <link rel="stylesheet" href="{{ url_for('static',filename='my.css')}}">
    <title>静态文件加载</title>
</head>
<body>

<h1 class="title">静态文件加载</h1>

</body>
</html>

还有一种写法就是，直接点

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 上面的写法会被直接渲染成下面这个路径，直接这样写，也是可以的 -->
    <link rel="stylesheet" href="/static/my.css">
    <title>静态文件加载</title>
</head>
<body>

<h1 class="title">静态文件加载</h1>

</body>
</html>

Flask框架03模板渲染

Flask模板渲染

什么是模板

目录规范

核心渲染函数(render_template)

导入与基础用法

变量的情况

jinja2模板基础语法

变量渲染

控制语句

for循环

注释

过滤器(filter)

模板继承(最常用，复用公共页面)

静态文件加载