Flask框架03模板渲染

Flask模板渲染

什么是模板

Flask利用jinja2作为默认模板引擎
作用：将html页面与python业务代码分离，页面中嵌入动态变量，循环，判断逻辑，后端传入数据，引擎的主动渲染天生完备的html返回欣赏器
目次规范

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

核心渲染函数(render_template)

导入与根本用法

1. from flask import  Flask,render_template
3. app = Flask(__name__)
5. @app.route("/")
6. def index():
7.     # 直接返回index.html页面，从templates目录下面找
8.     return render_template("index.html")
10. if __name__ == '__main__':
11.     app.run(debug=True)

复制代码

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <title>index</title>
6. </head>
7. <body>
8. <h1>welcome index page</h1>
9. </body>
10. </html>

复制代码

变量的环境

变量，字典，类名
html中变量用{{变量名}} 包裹起来

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

复制代码

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <title>test1</title>
6. </head>
7. <body>
8. <h1>username:{{username}}</h1>
9. <h1>psd:{{password}}</h1>
10. </body>
11. </html>

复制代码

字典的环境

1. @app.route("/test1")
2. def test1():
3.     username = "admin"
4.     password = "123"
5.     data = {
6.         "name": "zhangsan",
7.         "age": 18
8.     }
9.     # 直接传入data字典
10.     return render_template("test1.html",username=username,password=password,data=data)

复制代码

html文件

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <title>test1</title>
6. </head>
7. <body>
8. <h1>username:{{username}}</h1>
9. <h1>psd:{{password}}</h1>
10. </body>
11. </html>[size=6]{{data.name}},{{data.age}}[/size]

复制代码

关于类的环境

1. class User():
2.     def __init__(self,sex):
3.         self.sex=sex
5. @app.route("/test1")
6. def test1():
7.     username = "admin"
8.     password = "123"
9.     data = {
10.         "name": "zhangsan",
11.         "age": 18
12.     }
13.     user = User("男")
14.     return render_template("test1.html",username=username,password=password,data=data,user=user)

复制代码

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <title>test1</title>
6. </head>
7. <body>
8. <h1>username:{{username}}</h1>
9. <h1>psd:{{password}}</h1>
10. </body>
11. </html>[size=6]{{data.name}},{{data.age}}[/size]
13. [size=6]{{user.sex}}[/size]

复制代码

jinja2模板根本语法

变量渲染

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

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

复制代码

控制语句

1. {% if age > 18 %}
2. 你已经成年了
4. {% elif age < 18 %}
5. 你还没有成年
7. {% else %}
8. 刚满18岁
10. {% endif %}

复制代码

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

复制代码

for循环

1. {% if age > 18 %}
2. 你已经成年了
4. {% elif age < 18 %}
5. 你还没有成年
7. {% else %}
8. 刚满18岁
10. {% endif %}{% for i in data %}name: {{i["name"]}}age: {{i["age"]}}{% endfor %}

复制代码

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

复制代码

解释

1. 不会渲染到最终的html上，仅在模块内注释
3. {# 注释内容  #}

复制代码

过滤器(filter)

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

1. {{ username|upper }}
3. {{ username|capitalize }}
5. {{ hobby|length }}
7. {{ desc|default("暂无描述") }}
9. {{ 3.1415 | round(2) }}
11. {{ content|truncate(5) }}
13. {{ hobby|reverse }}

复制代码

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

复制代码

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

复制代码

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

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

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.    
6.     <title>{% block title %} 默认标题 {% endblock %}</title>
7. </head>
8. <body>
9.    
10. <nav>网站导航|首页|个人中心</nav>
12. {% block content %} {% endblock %}
14. <foote>版权所有 2026flask演示</foote>
15. </body>
16. </html>

复制代码

子模板

1. {% extends "base.html" %}
3. {% block title %}
5. 这个我的首页网站
7. {% endblock %}
9. {% block content %}
11. <h1>欢迎来到我的首页</h1>
13. {% endblock %}

复制代码

1. # 父模板
2. @app.route("/base")
3. def base():
4.     return render_template("base.html")
6. # 子模板
7. @app.route("/zi")
8. def zi():
9.     return render_template("子模板1.html")
11. @app.route("/z2")
12. def z2():
13.     return render_template("子模板2.html")

复制代码

父模板

子模板

静态文件加载

除了html代码后，尚有css,js,图片，这些静态文件，存放在static文件中，通过url_for来加载这些静态文件
须要创建一个static目次，用来存放静态文件的

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

复制代码

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <title>静态文件加载</title>
6. </head>
7. <body>
9. <h1 >静态文件加载</h1>
11. </body>
12. </html>

复制代码

1. .title {
3. background-color: red;
5. }

复制代码

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

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

1.         <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <title>静态文件加载</title>
6. </head>
7. <body>
9. <h1 >静态文件加载</h1>
11. </body>
12. </html>

复制代码

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

1.         <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <title>静态文件加载</title>
6. </head>
7. <body>
9. <h1 >静态文件加载</h1>
11. </body>
12. </html>

复制代码