一,模板变量
- 变量传至前端
- 可传输多种形式变量,并且可以在前端使用部分数据函数
二,变量控制语句
1.if
{% if user %}
<title> hello {{user}} </title>
{% else %}
<title> welcome to flask </title>
{% endif %}
2.for
{% for index in fruit %}
<li>{{ index }}</li>
{% endfor %}
3.with+set
二,过滤器(支持链式操作)
过滤器的本质就是函数。有时候我们不仅仅只是需要输出变量的值,我们还需要修改变量的显示,甚至格式化、运算等等,这就用到了过滤器。 过滤器的使用方式为:变量名 | 过滤器。 过滤器名写在变量名后面,中间用 | 分隔。如:{{variable | capitalize}},这个过滤器的作用:把变量variable的值的首字母转换为大写,其他字母转换为小写。
- 过滤器支持链式操作
1.系统预设过滤器
https://www.likecs.com/show-203879391.html
- 常用字符串操作
#safe:禁用转义;
<p>{{ '<em>hello</em>' | safe }}</p>
#capitalize:把变量值的首字母转成大写,其余字母转小写;
<p>{{ 'hello' | capitalize }}</p>
#lower:把值转成小写;
<p>{{ 'HELLO' | lower }}</p>
#upper:把值转成大写;
<p>{{ 'hello' | upper }}</p>
#title:把值中的每个单词的首字母都转成大写;
<p>{{ 'hello' | title }}</p>
#trim:把值的首尾空格去掉;
<p>{{ ' hello world ' | trim }}</p>
#reverse:字符串反转;
<p>{{ 'olleh' | reverse }}</p>
#format:格式化输出;
<p>{{ '%s is %d' | format('name',17) }}</p>
#striptags:渲染之前把值中所有的HTML标签都删掉;
<p>{{ '<em>hello</em>' | striptags }}</p>
#truncate过滤器: 截取一个变量的字符串长度, 相当于切片操作
<div class="intro">
{{article.content | striptags | truncate(80)}}
</div>
- 常用列表操作
#first:取第一个元素
<p>{{ [1,2,3,4,5,6] | first }}</p>
#last:取最后一个元素
<p>{{ [1,2,3,4,5,6] | last }}</p>
#length:获取列表长度
<p>{{ [1,2,3,4,5,6] | length }}</p>
#sum:列表求和
<p>{{ [1,2,3,4,5,6] | sum }}</p>
#sort:列表排序
<p>{{ [6,2,3,1,5,4] | sort }}</p>
2.自定义过滤器
过滤器的本质是函数。当模板内置的过滤器不能满足需求,可以自定义过滤器。自定义过滤器有两种实现方式:一种是通过Flask应用对象的add_template_filter方法。还可以通过装饰器来实现自定义过滤器。
自定义的过滤器名称如果和内置的过滤器重名,会覆盖内置的过滤器。
- 注册自定义过滤器
#【过滤器注册1】
def list_step_2(li):
"""自定义的过滤器"""
return li[::2]
# 注册过滤器
app.add_template_filter(list_step_2, "li2")
#【过滤器注册2】
@app.template_filter("li3")
def list_step_3(li):
"""自定义的过滤器"""
return li[::3]
- 调用自定义过滤器
<!--过滤器过滤数据-->
<p>{{my_list | li2 }}</p>
<p>{{my_list | li3 }}</p>
三,模板宏+闪现
1.模板宏(纯前端方法)
- 宏的作用就是在模板中重复利用代码,避免代码冗余
(1)常用使用流程
- 定义:将宏单独封装在html文件中(例:macro.html)
{% macro input() %}
<input type="text" name="username" placeholde="Username">
<input type="password" name="password" placeholde="Password">
<input type="submit">
{% endmacro %}
- 调用:在其它模板文件中先导入,再调用
{% import 'macro.html' as func %}
{{ func.input() }}
(2)不带参数宏的定义与使用
(3)带参数宏的定义与使用
2.闪现:闪现信息-存一次只能取一次(常用于提供首次执行需要用到的数据)
- 前端显示闪现数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>闪现--显示模板渲染前添加的闪现信息</h1>
{% for msg in get_flashed_messages() %}
<p>{{msg}}</p>
{% endfor %}
</body>
</html>
- 后端插入闪现信息数据
# coding:utf-8
from flask import Flask, render_template, flash
app = Flask(__name__)
flag = True
app.config["SECRET_KEY"] = "SDHFOSDF"
#模板不仅可以创建,还可以继承-拓展(父模板为中心扩充),继承-包含(自己为中心包含其他模板)
@app.route("/")
def index():
global flag #变量全局化,用于控制闪现信息只显示一次
if flag:
# 添加闪现信息-存一次只能取一次--用于自定义错误显示信息(用时再看)
flash("hello1")
flash("hello2")
flash("hello3")
flag = False #设置为只添加一次闪现信息
return render_template("micro.html")
if __name__ == '__main__':
app.run(debug=True)
四,模板继承/引入
1.模板继承–基于其他前端模板填充上本模板代码
- 其他模板填充位置标注
<!-- 中部区域布局 -->
<div class="container" style="margin-top: 20px;">
<div class="row">
<!-- 填充中部左侧文章列表和文章阅读页面内容 -->
{% block content %}
{% endblock %}
</div>
</div>
- 本模板添加继承标注
2.模板引入–基于本前端模板填充其他模板代码
- 被引入模板无需任何标注
- 引入模板需要在需要位置,填写include标注(即可引入模板):
{# 按需引入side.html,首页需要 #}
{% include '侧边栏-vue.html' %}
五,前端模板直接调用后端数据(固定数据)
1.变量方式调用(推荐这种)
- 定义
# 【第一种方式:使用上下文处理器来注册自定义函数到Jinja2模板引擎中,并且返回一个字典类型的数据】
@jinja2.context_processor
def gettype_01():
type = {'1':'PHP开发', '2':'Java开发', '3':'Python开发'}
return dict(mytype=type)
# 【使用频数较低】如果要为自定义函数传参,则需要使用二层闭包进行包裹
@jinja2.context_processor
def myfunc():
def mytype(arg):
type = {'1': 'PHP开发', '2': 'Java开发', '3': 'Python开发',"bianliang":arg}
return type
return dict(mytype=mytype)
- 调用
{# 调用上下文处理器函数--函数形式调用 #}
{{mytype('bianliang')}}<br/><br/>
{{mytype('bianliang')['2']}}<br/><br/>
{{mytype('bianliang')['2']}}<br/><br/>
2.标准函数方式调用
- 定义
# 【第二种方式:按照标准的函数调用的方式进行】
def gettype():
type = {'1': 'PHP开发', '2': 'Java开发', '3': 'Python开发'}
return type
#注册函数变量到全局环境
app.jinja_env.globals.update(mytype=gettype)
- 调用
{# 调用上下文处理器函数--函数形式调用 #}
{{mytype()}}<br/><br/>
{{mytype()['2']}}<br/><br/>
六,无Jinja2模板下的数据传送前端方法
from flask import Blueprint
myhtml = Blueprint('myhtml', __name__)
# 【方法一:直接将HTML写到代码中,并返回】
@myhtml.route('/template01')
def template01():
resp = '''
<div style="width: 500px; height: 300px; margin:auto; border: solid 2px red;">
<a href="#">建国笔记</a>
<ul>
<li>这是菜单项一</li>
<li>这是菜单项二</li>
<li>这是菜单项三</li>
<li>这是菜单项四</li>
</ul>
<p>欢迎登录.</p>
</div>
'''
return resp
# 【方法二:直接将变量和HTML进行拼接,再写入响应】
@myhtml.route('/template02/<username>')
def template02(username):
resp = '''
<div style="width: 500px; height: 300px; margin:auto; border: solid 2px red;">
<a href="#">建国笔记</a>
<ul>
<li>这是菜单项一</li>
<li>这是菜单项二</li>
<li>这是菜单项三</li>
<li>这是菜单项四</li>
</ul>
<p>欢迎 %s 登录.</p>
</div>
''' % username
return resp
# 【方法三:把HTML内容保存到文件中,打开该文件并响应】
@myhtml.route('/template03')
def template03():
with open('template/myhtml.html', encoding='utf-8') as file:
html = file.read()
return html
# 【方法四:在HTML文件中标识模板变量,然后在渲染前对模板变量的值进行替换】
# 实现了Python代码与HTML模板页面分离
@myhtml.route('/template04')
def template04():
with open('template/myhtml.html', encoding='utf-8') as file:
html = file.read()
html = html.replace('{{username}}', '建国笔记')
return html