Jinja2模板引擎简介(template)
模板
视图函数的主要作用是生成请求的响应,这是最简单的请求。实际上,视图函数有两个作用:处理业务逻辑和返回响应内容。在大型应用中,把业务逻辑和表现内容放在一起,会增加代码的复杂度和维护成本。本节学到的模板,它的作用即是承担视图函数的另一个作用,即返回响应内容。
模板其实是一个包含响应文本的文件,其中用占位符(变量)表示动态部分,告诉模板引擎其具体的值需要从使用的数据中获取
使用真实值替换变量,再返回最终得到的字符串,这个过程称为“渲染”
Flask是使用 Jinja2 这个模板引擎来渲染模板
使用模板的好处:
视图函数只负责业务逻辑和数据处理(业务逻辑方面)
而模板则取到视图函数的数据结果进行展示(视图展示方面)
代码结构清晰,耦合度低
Jinja2
两个概念:
Jinja2:是 Python 下一个被广泛应用的模板引擎,是由Python实现的模板语言,他的设计思想来源于 Django 的模板引擎,并扩展了其语法和一系列强大的功能,其是Flask内置的模板语言。
模板语言:是一种被设计来自动生成文档的简单文本格式,在模板语言中,一般都会把一些变量传给模板,替换模板的特定位置上预先定义好的占位变量名。
渲染模版函数
Flask提供的 render_template 函数封装了该模板引擎
render_template 函数的第一个参数是模板的文件名,后面的参数都是键值对,表示模板中变量对应的真实值。
{{}} 来表示变量名,这种 {{}} 语法叫做变量代码块
{{ post.title }}
Jinja2 模版中的变量代码块可以是任意 Python 类型或者对象,只要它能够被 Python 的 str() 方法转换为一个字符串就可以,比如,可以通过下面的方式显示一个字典或者列表中的某个元素:
{{your_dict[‘key’]}}
{{your_list[0]}}
用 {%%} 定义的控制代码块,可以实现一些语言层次的功能,比如循环或者if语句
{% if user %}
{{ user }}
{% else %}
hello!
<ul>
{% for index in indexs %}
<li> {{ index }} </li>
{% endfor %}
</ul>
注释
使用 {# #} 进行注释,注释的内容不会在html中被渲染出来
模板使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>flask网页模板的学习</title>
</head>
<body>
<center>
<div>
<!-- 双中括弧是输出。单中括弧是逻辑判断 以后的注释要用{# #} -->
这是我们第一个网页模板 <br /><br />
<!-- 这里是注释。最基本的模板语法输出一个变量 -->
<!-- {{ my_str + ", 前端页面" }} <br /><br /> -->
<!-- 模板语法可以做简单的运算 -->
{{ my_int + 10 }} <br /><br />
<!-- list的操作,可以引用下表的方式输出list元素 -->
{{ my_list }}<br />
{{ my_list[0] }}<br />
{{ my_list.1 }}<br /><br />
{# 这是模板的注释方法 #} <br />
{{ my_dict["name"] }} <br />
{{ my_dict }} <br />
{{ my_dict.age }} <br />
{# 使用{% %} 来定义简单的逻辑控制代码 #}
{% if my_int %}
整型存在
{% else %}
不存在
{# 使用if判断。一定要有endif 用来结束逻辑判断#}
{% endif %}
<ul>
{# 使用for循环来遍历list #}
{% for item in my_list %}
<li>{{ item }}</li>
{# 使用for循环也要用endfor#}
{% endfor %}
</ul>
{# 使用if for 嵌套来实现单双行背景色 #}
<table style="border:1px solid black;padding: 5px;">
{% for item in my_list %}
{% if loop.index % 2 == 0 %}
<tr style="background-color:tomato">
<td>{{ item }}</td>
</tr>
{% else %}
<tr style="background-color:violet">
<td>{{ item }}</td>
</tr>
{% endif %}
{% endfor %}
</table>
</div>
</center>
</body>
</html>
过滤器
过滤器的本质就是函数。有时候我们不仅仅只是需要输出变量的值,我们还需要修改变量的显示,甚至格式化、运算等等,而在模板中是不能直接调用 Python 中的某些方法,那么这就用到了过滤器。
链式调用
{{ “hello world” | reverse | upper }}
上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flask过滤器的学习</title>
</head>
<body>
<center>
1.<br />
{# 过滤器调用方式 {{ 变量 | 过滤器的名称 }} #}
safe过滤器,可以禁用转义
{{ '<strong>hello</strong>' | safe }}
<br />
2.<br />
系统默认的过滤器,把大写字母转换为小写
<br />
{{ 'HELLO' | lower }}
<br />
3.<br />
把小写换为大写
<br />
{{ 'hello' | upper }}
<br />
4.<br />
经典。字符串反转
<br />
{{ '来一个反转' | reverse }}
<br />
5.<br />
首字母大写。其余字母小写
<br />
{{ 'james' | capitalize }}
<br />
6.<br />
过滤所有的html标签,em标签是斜体。跟转义没有任何关系,只是在过滤标签,把所有文本中的标签过滤掉
<br />
{{ '<em>hello</em>' | striptags }}
<br />
7.<br />
只显示list首个元素
<br />
{{ [100,99,65] | first }}
<br />
8.<br />
只显示最后一个元素
<br />
{{ [100,90,520] | last }}
<br />
9.<br />
显示一个list的长度
<br />
{{ [1,2] | length }}
<br />
10.<br />
对list里面的所有元素求和
<br />
{{ [100,200] | sum }}
<br />
11.<br />
对list进行排序
<br />
{{ [12,3,4,56,7,89,8,76,5] | sort }}
<br />
12.<br />
对语句块儿进行过滤 (相当于文本,以换大写为例)
<br />
{% filter upper %}
hello world hello python hello flask hello filter hello csdn
{% endfilter %}
<br />
13.<br />
链式调用(嵌套的使用过滤器)
<br />
{{'abcdefg' | reverse | upper }} 双管道调用,先反转。后大写
<br />
{{'abcdefg' | upper | reverse }} 执行的顺序。谁先谁后
<br />
</center>
</body>
</html>
代码复用
宏 —- 类似python中的函数
创建:
{% macro 标签名(key=value)%} {% end macro %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flask中的宏编程</title>
</head>
<body>
减少重复的操作,定义一个宏
{% macro input(value,type,id) %} 也可用简写的标签来代表input替换为i 也可以,下边的input直接用i
<input style="width:300px;" id="{{ id }}" type="{{ type }}" value="{{ value }}" />
{% endmacro %}
<br />
调用宏 传参的时候要和上边的参数要等同
{{ input(type='text',value='用户名',id="abc") }}
<!-- 上边的宏等同于这里的普通html标签<input type="text" value="用户名"> -->
<br />
{{ input(type='button',value='按钮',id="abc") }}
<br />
{{ input(type='password',value='密码', id="abc") }}
</body>
</html>
宏(Macro)、继承(Block)、包含(include)均能实现代码的复用。
继承(Block)的本质是代码替换,一般用来实现多个页面中重复不变的区域。
宏(Macro)的功能类似函数,可以传入参数,需要定义、调用。
包含(include)是直接将目标模板文件整个渲染出来。