Flask教程3：jinja2模板引擎

文章目录

模板的导入与使用

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否则返回False
loop.last: 判断当前是否是最后一次迭代, 是返回True否则返回False
loop.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>