知识点:
- jinja2中列表以及字典的使用,for循环的使用
- if条件语句的使用
- 过滤器
- 模板扩展
列表、字典、for循环的使用
- app主运行程序文件
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/jinja2')
def jinja2():
list_name = ['张三', '李四', '王二']
dict_name ={'name': '村花', 'age': 56, 'sex': '女', '爱好': 'play Computer'}
return render_template('jinja2.html', list_name=list_name, dict_name=dict_name) # 闯入两个变量到模板中
if __name__ == '__main__':
app.run(debug=True)
-
jinja2模板文件
在项目的模板目录templates中新建jinja2模板文件,命名为jinja2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jinja2演示</title>
</head>
<body>
<ul>
<h2>for循环的使用,打印列表内容</h2>
{% for name in list_name %}
<li>{{ name }}</li>
{% endfor %}
</ul>
<h2>列表使用方式2</h2>
<p>{{ list_name.0 }}</p>
<p>{{ list_name[1] }}</p>
<p>{{ list_name[2] }}</p>
<h2>字典使用方式一</h2>
{% for k,v in dict_name.items() %}
<p>字典的键:{{ k }}, 字典的值:{{ v }}</p>
{% endfor %}
<h2>字典使用方式二</h2>
<p>姓名:{{ dict_name.name }}</p>
<p>年龄:{{ dict_name.get('age') }}</p>
<p>性别:{{ dict_name['sex'] }}</p>
</body>
</html>
我们访问网页,查看网页加载的内容如下图所示:
if条件语句
- 修改jinja.html模板内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jinja2演示</title>
</head>
<body>
{% if list_name|length > 3 %}
<p>列表长度大于3</p>
{% elif list_name|length == 3 %}
<p>列表长度为3</p>
{% else %}
<p>长度小于3</p>
{% endif %}
</body>
</html>
访问网页,加载内容如下图所示:
过滤器
- upper:字母转化为大写
- last:取可切片内容的最后一个值
- format:格式化字符串
- truncate:截取字符长度,必须设置length >=3
- safe:设置标签不转义
- default:没有值时显示指定的默认内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jinja2演示</title>
</head>
<body>
<p>打印字典的'爱好'对应的值play Computer都为大写:{{ dict_name.get('爱好') | upper }}</p>
<p>获取列表的最后一个值:{{ list_name | last }}</p>
<p>format过滤器,和python一样:{{ '列表list_name的第一个值是:%s' | format(list_name[0]) }}</p>
<p>截取指定长度的字符串,length必须设置 >=3:{{ dict_name.get('爱好') | truncate(length=4) }}</p>
<p>不转义:{{ '<h1>关掉了转义,页面下显示h1标签的显示样式</h1>' | safe }}</p>
<p>转义:{{ '<h1>不关掉转义,页面显示的是字符串</h1>'}}</p>
<p>如果变量没有值就显示指定的默认值:{{ list_name[5] | default('123') }}</p>
</body>
</html>
网页查看渲染的结果
模板扩展extends
-
用于继承的模板内容base.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %}{% endblock %}</title> </head> <body> <h1>扩展content1内容</h1> {% block content1 %} {% endblock %} <h1>扩展content2内容</h1> {% block content2 %} {% endblock %} </body> </html>
-
被继承的模板内容jinja2.html
{% extends 'base.html' %} {% block title %} 这是一个title {% endblock %} {% block content1 %} 这是content1 {% endblock %} {% block content2 %} 这是content2 {% endblock %}
访问网页,加载内容如下图所示: