模板的导入与使用
-
Flask通过render_template来实现模板的渲染，要使用这个方法，我们需要导入from flask import rander_template，模板中注释需放在{# #}中 -
模板的第一个参数为指定的模板文件名称，如自定义的
html文件，第二个（及后续）参数为可选项，用于向模板中传递变量。
from flask import Flask,render_template
app = Flask(__name__)
# 给前端模板传参
@app.route("/")
def index():
data = {
'name':'张三',
'age':18,
'mylist':[1,2,3,4,5,6,7]
}
# 以键值对的形式传参给模板index2.html
# 左边是我们要在前端调用时使用的变量名称（形参：data）；
# 右边是我们给这个变量传的值（实参：字典data）；
return render_template('index2.html',data=data)
if __name__ == '__main__':
app.run()
前端html模板内需要在双括号{{ }}中使用该变量：
如果想给该变量添加属性便于CSS修改格式，我们可以在变量后添加括号，并在括号内定义class、id等属性 → \rightarrow →点击查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello world
<br>
<!-- 对传入变量的使用并显示：在双括号内，和python中用法类似 -->
{{ data }}
<br>
{{ data['name'] }}
<br>
{{ data.name }}
<br>
mylist:{{ data.mylist }}
<br>
mylist[1]:{{ data.mylist[1] }}
<br>
count:{{ data.mylist[1]+data.mylist[2] }}
</body>
</html>
- 如果有多个变量需要传递，我们可以不需要一个一个进行传参，直接使用
**locals()替代我们在当前视图函数中定义的所有变量：
from flask import Flask,render_template
app = Flask(__name__)
# 给前端模板传参
@app.route("/")
def index():
title='python键值对' # 定义键值1
author='li' # 定义键值2
return render_template('index2.html',**locals()) #渲染模型并传值
if __name__ == '__main__':
app.run()
在前段直接使用定义时的变量名就可以使用该变量，即{{ title }}和{{ author }}。
模板中的控制语句
jinja2模板引擎中也可使用if和for控制语句，但是语句需要放置在{% %}中；
if条件判断语句必须包含结束标签{% endif %}，其他部分与python中类似，可以与比较运算符> >= < <= == !=结合使用，或与逻辑运算符and,or,not,()结合使用；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% if name==1 %}
<h1>恭喜你抽中了一等奖！</h1>
{% if name==2 %}
<h1>恭喜你抽中了二等奖！</h1>
{% else %}
<h1>恭喜你抽中了三等奖！</h1>
{% endif %}
</body>
</html>
for循环控制语句在模板内的用法也和python中类似，遍历的对象可以是字典、元组、列表等，但需要注意的是在模板中无法使用continue和break来对循环进行控制；
{% for 目标 in 对象 %}
<p>目标</p>
{% endfor %}
- for循环的内置常量：
loop.index: 获取当前的索引值 从1开始loop.index0:获取当前的索引值 从0开始loop.first: 判断当前是否是第一次迭代, 是返回True否则返回Falseloop.last: 判断当前是否是最后一次迭代, 是返回True否则返回Falseloop.length: 序列的长度
<ul>
{% for item in list %}
<li>{{ item }}</li>
<li>当前的索引是：{{ loop.index }}</li>
<li>当前的索引是：{{ loop.index0 }}</li>
<li>当前是否是第一次迭代：{{ loop.first }}</li>
<li>当前是否是最后一次迭代：{{ loop.last }}</li>
<li>前序列的长度：{{ loop.length }}</li>
</ul>
过滤器的使用与自定义
常用过滤器有哪些？
可以在前端模板内{{ 内容 | 过滤器 }}的" | "后使用；
可以使用add_template_filter(函数方法名,‘过滤器名’)来自定义过滤器；
# 自定义过滤器
def list_step(li):
# 返回列表，步长为2
return li[::2]
# 注册模板过滤器（filter）
# 参数1为该过滤器调用的函数，参数2为在前端中调用该过滤器使用的名称
app.add_template_filter(list_step,'li2')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 过滤器的使用 -->
<!-- 全大写 -->
{{ 'hello_world' | upper }}
<br>
<!-- 单词首字母大写 -->
{{ 'hello world' | title }}
<br>
<!-- 替换左边的内容为右边的内容 -->
{{ 'hello_world' | replace('hello','hi') }}
<br>
<!-- 调用自定义的过滤器 -->
mylist列表：{{ data.mylist | li2 }}
</body>
</html>
include的使用
include用于在一个模板的指定位置导入另一个模板的内容，区别于宏的调用，include更像从另一个模板“复制+粘贴”；include同样在{% %}中使用，采用语句{% include 模块名 %}，需要注意两点
include是直接将目标模板中的所有内容直接“copy”在当前位置，所以被导入的模板如果有head和body部分也将被导入过来；include和import都是在templates这个目录下搜索的，所以使用路径时不需要添加相对路径：上级目录 “…/” 和当前目录
“./” ；
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!-- 可以视为父模板 -->
<body>
<!-- 可以视为子模板1 -->
{% include "common/header.html" %}
<div class="content">
中间的
</div>
<!-- 可以视为子模板2 -->
{% include "common/footer.html" %}
</body>
</html>
- 子模版——
header.html
<nav>
<div class="top">
这是顶部
</div>
</nav>
- 子模板——
footer.html
<footer>
<div class="bottom">
这是底部
<!-- 说明：子模板中可以直接使用父模板的变量，不需要其他操作
因为这一代码是被复制到父模板中去运行的 -->
author：{{ name }}
</div>
</footer>
- 后端导入父模板
from flask import Flask,render_template
app = Flask(__name__)
# 运行时直接将子模板需要的参数传给父模板
@app.route("/")
def index():
name='时生'
return render_template('include_test.html',name=name)
if __name__ == '__main__':
app.run(debug=True)
set和with的使用
我们在模板内需要使用到的变量，不仅可以通过后端传参，也可以由我们自己定义，这样更有利于前后端分离的实现；
set——自定义全局变量：由set定义的变量可以在模板内任意一个地方调用，甚至在子模板中也可以使用；
<!-- 定义普通变量并赋值 -->
{% set telephone=1234567890 %}
<!-- 定义列表变量并赋值 -->
{% set lis=[('produce.html','produce'),('index.html','index')] %}
<!-- 调用 -->
{{ telephone }}
{{ lis }}
with——自定义局部变量：with定义的变量只能在{% with %}到{% endwith %}这个代码块间使用；
<!-- 定义一个普通变量 -->
{% with test=60 %}
<!-- 内部可调用 -->
{{ test }}
{% endwith %}
加载静态文件
静态文件一般是我们在开发过程中用到的图片文件、css文件和js文件，在Flask工程中通常包含一个static文件目录，当需要调用静态文件是将会默认在该目录下进行查询，固不需要使用相对路径；
通常我们会在static文件目录下定义名为css、image和js的文件夹分别存储这些静态文件；
加载静态文件通常配合url_for函数使用(需要在双括号内调用)，将模板标签的src、href属性通过url_for(静态文件名称)设置为反转url要比使用相对路径更好。
<head>
<!-- 导入js文件 -->
<script type="text/javascript" src="{{url_for('static',filename='js/jquery-3.5.1/jquery-3.5.1.js')}}"></script>
<!-- 导入css文件 -->
<link rel="stylesheet" href="{{url_for('static',filename='css/car.css')}}">
</head>
<body>
<!-- 导入图片 -->
<img alt="" src="{{ url_for('static',filename='image/car.jpg') }}"/>
</body>
851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
