Flask模板渲染

什么是模板

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

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

目录规范

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

核心渲染函数(render_template)

导入与基础用法

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)

    
    


welcome index page

变量的情况

变量，字典，类名

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

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

    
    


username:{{username}}
psd:{{password}}

字典的情况

@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文件

    
    


username:{{username}}
psd:{{password}}

{{data.name}},{{data.age}}

关于类的情况

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)

    
    


username:{{username}}
psd:{{password}}
{{data.name}},{{data.age}}

{{user.sex}}

jinja2模板基础语法

变量渲染

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

用户名：{{ username }}
年龄：{{ user_age + 5 }}
爱好第一条：{{ hobby[0] }}
字典取值：{{ user["id"] }} 或 {{ user.id }}

控制语句

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

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

{% else %}
刚满18岁

{% endif %}

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

for循环

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

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

{% else %}
刚满18岁

{% endif %}



{% for i in data %}

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

{% endfor %}

@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上，仅在模块内注释

{# 注释内容  #}

过滤器(filter)

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

{{ username|upper }}

{{ username|capitalize }}

{{ hobby|length }}

{{ desc|default("暂无描述") }}

{{ 3.1415 | round(2) }}

{{ content|truncate(5) }}

{{ hobby|reverse }}

{{username|upper}}

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

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

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

父模板

    
    
    


    


{% block content %} {% endblock %}

版权所有 2026flask演示

子模板

{% extends "base.html" %}


{% block title %}

这个我的首页网站

{% endblock %}


{% block content %}

欢迎来到我的首页

{% endblock %}

# 父模板
@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目录，用来存放静态文件的

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

    
    



静态文件加载

.title {

background-color: red;

}

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

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

    
    
    
    



静态文件加载

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

    
    
    
    



静态文件加载