Flask使用jinja2作为默认模板引擎
作用：将html页面与python业务代码分离，页面中嵌入动态变量，循环，判断逻辑，后端传入数据，引擎的自动渲染生成完整的html返回浏览器
flask默认从templates目录下加载模板
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)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<h1>welcome index page</h1>
</body>
</html>
变量，字典，类名
html中变量用{{变量名}} 包裹起来
@app.route("/test1")
def test1():
username = "admin"
password = "123"
# 使用test1.html文件，username 将值传入给模板文件中去
return render_template("test1.html",username=username,password=password)
<!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>
字典的情况
@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文件
<!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>
关于类的情况
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)
<!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>
变量用{{变量名}}来渲染
<!-- index.html -->
<p>用户名：{{ username }}</p>
<p>年龄：{{ user_age + 5 }}</p>
<p>爱好第一条：{{ hobby[0] }}</p>
<p>字典取值：{{ user["id"] }} 或 {{ user.id }}</p>
<!-- 里面的age不需要{{}},直接使用，规则 -->
{% if age > 18 %}
<div>你已经成年了</div>
{% elif age < 18 %}
<div>你还没有成年</div>
{% else %}
<div>刚满18岁</div>
{% endif %}
@app.route("/if_for")
def if_for():
age = 19
# 给html中的age传入值
return render_template("if-for.html",age=age)
{% 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 %}
@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上，仅在模块内注释
{# 注释内容 #}
对输出变量做格式化、转义、处理，支持链式调用 var|f1|f2
<!-- 转大写 -->
{{ username|upper }}
<!-- 首字母大写 -->
{{ username|capitalize }}
<!-- 列表长度 -->
{{ hobby|length }}
<!-- 默认值，变量为空则显示默认 -->
{{ desc|default("暂无描述") }}
<!-- 四舍五入保留2位小数 -->
{{ 3.1415 | round(2) }}
<!-- 截取前5个字符 -->
{{ content|truncate(5) }}
<!-- 反转列表 -->
{{ hobby|reverse }}
<h1>{{username|upper}}</h1>
@app.route("/test2")
def test2():
return render_template("test2.html",username="admin")
| 标签 | 作用 |
|---|---|
{% extends "base.html" %} |
声明当前模板继承自 base.html（必须放在第一行） |
{% block name %}...{% endblock %} |
定义一个可被子模板覆盖的区域 |
{{ super() }} |
在子模板 block 中调用父模板同名 block 的内容 |
父模板
<!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>
子模板
<!-- 继承父模板的内容 -->
{% extends "base.html" %}
<!-- 自定义内容 -->
{% block title %}
这个我的首页网站
{% endblock %}
{% block content %}
<h1>欢迎来到我的首页</h1>
{% 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")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>静态文件加载</title>
</head>
<body>
<h1 class="title">静态文件加载</h1>
</body>
</html>
.title {
background-color: red;
}
访问，静态文件没有被加载
添加link就能生效，就能加载静态文件了
<!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>
还有一种写法就是，直接点
<!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>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。