第四章 Jinja2模版
模板简介：
在之前的章节中，视图函数只是直接返回文本，而在实际生产环境中的页面大多是带有样式和复杂逻辑的HTML代码，这可以让浏览器渲染出非常漂亮的页面。目前市面上有非常多的模板系统，其中最知名好用的就是]inja2和Mako，
这两个模板的特点和不同：
1.Jinja2：]inja是日本寺庙的意思，并且寺庙的英文是temple和模板的英文template的发音类似。Jinja2是默认的仿Django模板的一个模板引擎，由F1ask的作者开发。它速度快，被广泛使用，并且提供了可选的沙箱模板来保证执行环境的安全，它有以下优点：
- 让前端开发者和后端开发者工作分离。
- 减少F1ask项目代码的耦合性，页面逻辑放在模板中，业务逻辑放在视图函数中，将页面逻辑和业务逻辑解耦有利于代码的维护。
- 提供了控制语句、继承等高级功能，减少开发的复杂度。
2.Marko:Marko是另一个知名的模板。他从Django、Jinja2等模板借鉴了很多语法和APl，他有以下优点：
- 性能和]inja2相近
- 有成功的案例有，大型网站在使用，Reddit和豆瓣都在使用。
- 有知名的web框架支持。Pylons和Pyramid 这两个web框架内置模板就是Mako
- 支持在模板中写几乎原生的Python语法的代码，对Python工程师比较友好，开发效率高。
- 自带完整的缓存系统。当然也提供了非常好的扩展借口，很容易切换成其他的缓存系统。
Flask渲染Jinja模板：
要渲染一个模板，通过 render_template方法即可，以下将用一个简单的例子进行请解：
- 在使用`render_template`渲染模版的时候，使用关键字参数传参。在模版中{{}}引用关键字参数。
- 当你的参数过多，将所有的参数放到一个字典中，传这个字典参数的时候，需使用两个星号，将字典打散成关键参数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>从模版中渲染数据</title>
</head>
<body>
这是从模版中渲染的数据
<p>{{ username }}</p>
<p>{{ age }}</p>
<p>{{ country }}</p>
<p>{{ childrens.name }}</p>
<p>{{ childrens['name'] }}</p>
</body>
</html>
python代码：
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
def hello_world():
context = {
'username':'wqbin',
'age': 25,
'country': 'china',
'childrens': {
'name':'没有',
'height': None
}
}
return render_template('index.html',**context)
if __name__ == '__main__':
app.run(debug=True)
结果：
url_for在html的使用
- 模版中的`url_for`跟我们后台视图函数中的`url_for`使用起来是一样的。传递视图函数的名字，也可以传递参数。
- 使用的时候，需要在`url_for`左右两边加上一个`{{ url_for('func') }}`
index.html
- {# {{ 用来存放变量 }}#}
- {# {% 用来执行函数或者逻辑代码 %}#}
这个#快捷键没听到，一会补充上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习url_for</title>
</head>
<body>
这是从模版中渲染的 <!-- <p><a href="/accounts/login/">登录</a></p>--> <p><a href="{{ url_for('login2',ref='/',id='1') }}">登录</a></p> </body>
</html>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
这是登录页面
</body>
</html>
python：
from flask import Flask,render_template,url_for
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/accounts/login/<id>/')
def login2(id):
print(id)
return render_template('login.html')
@app.route('/accounts/login/')
def login1():
return render_template('login.html')
if __name__ == '__main__':
app.run(debug=True)
其他 问题：
jinja2模板过滤器
过滤器是通过管道符号( | )进行使用的，例如：{{name|length}}，将返回name的长度。过滤器相当于是一个函数，把|当前的变量传入到过滤器中，然后过滤器根据自己的功能，再返回相应的值，之后再将结果渲染到页面中。
jinja2中内置了许多过滤器，在这里可以看到所有的过滤器，下面是一些常用的过滤器：
- ·abs(value)：返回一个数值的绝对值。例如：-1|abs。
- ·default(value,default_value,boolean=false)：如果当前变量没有值，则会使用参数中的值来代替。name|default（"不存在"）--如果name不存在，则会使用"不存在"来替代。boolean=False默认是在只有这个变量为undefined的时候才会使用default中的值，如果想使用python的形式判断是否为false，则可以传递boolean=true。也可以使用or来替换。
- ·escape（value）或e：转义字符，会将(、)等符号转义成HTML中的符号。例如：content|escape或content|e。
- ·first（value）：返回一个序列的第一个元素。names|first。
- ·format（value，*args，**kwargs）：格式化字符串。
{{"%s" -"%s" | format("He11o?","Foo!")}} 将输出：Hello?-Foo!
- ·last（value）：返回一个序列的最后一个元素。示例：names|last。
- ·length(value):返回一个序列或者字典的长度。示例：names|length。
- ·join(value.d=u""))将一个序列用d这个参数的值拼接成字符串。
- ·safe(value))如果开启了全局转义,那么safe过滤器会将变量关掉转义。示例:content_html|safe。
- ·int(value))将值转换为int类型。
- ·float(value))将值转换为float类型。
- ·lower(value))将字符串转换为小写。
- ·upper(value))将字符串转换为小写。
- ·replace(value,old,new))替换将o1d替换为new的字符串。
- ·truncate(value,1ength=255,killwords=False))截取1ength长度的字符串。
- ·striptags(value))除字符串中所有的HTML标签,如果出现多个空格,将替换成一个空格。
- ·trim截取字符串前面和后面的空白字符。
- ·string(value))将变量转换成字符串。
- ·wordcount(s))计算一个长字符串中单词的个数。
1.对defaul过滤器的案例讲解：
使用方式`{{ value|default('默认值') }}`。如果value这个`key`不存在，那么就会使用`default`过滤器提供的默认值。
如果你想使用类似于`python`中判断一个值是否为False（例如：None、空字符串、空列表、空字典等），那么就必须要传递另外一个参数`{{ value|default('默认值',boolean=True) }}`。
可以使用`or`来替代`default('默认值',boolean=True)`
2.对过滤器的转移详解
###### 自动转义过滤器：
1. `safe`过滤器：可以关闭一个字符串的自动转义。
2. `escape` 或者 e 过滤器：对某一个字符串进行转义。
3. `autoescape`-`endautoescape`标签，可以对他里面的代码块关闭或开启自动转义。
jinja: {% autoescape off/on %}
...代码块
{% endautoescape %}
代码如下：
'signature': '<script>alert("hello")</script>'
0.flask有自动转义功能：
1.`safe`过滤器：可以关闭一个字符串的自动转义
2.`escape` 或者 e 过滤器：对某一个字符串进行转义。
3.autoescape---我去。。没成功
3.其他过滤器
truncate和striptags的应用场景
4. 自定义模版过滤器：
1.过滤器本质上就是一个函数。如果在模版中调用这个过滤器，那么就会将这个变量的值作为第一个参数传给过滤器这个函数，然后函数的返回值会作为这个过滤器的返回值。需要使用到一个装饰器：`@app.template_filter('cut')`
```python
@app.template_filter('cut')
def cut(value):
value = value.replace("hello",'')
return value
```
```html
<p>{{ article|cut }}</p>
```
其他疑问：不设app.config['TEMPLATES_AUTO_RELOAD'] = True 也可以模板重加载
2.案例2：自定义时间过滤器
类似：
@app.template_filter('handle_time')
def handle_time(time):
"""
time距离现在的时间间隔
1. 如果时间间隔小于1分钟以内，那么就显示“刚刚”
2. 如果是大于1分钟小于1小时，那么就显示“xx分钟前”
3. 如果是大于1小时小于24小时，那么就显示“xx小时前”
4. 如果是大于24小时小于30天以内，那么就显示“xx天前”
5. 否则就是显示具体的时间 2017/10/20 16:15
"""
if isinstance(time,datetime):
now = datetime.now()
timestamp = (now - time).total_seconds()
if timestamp < 60:
return "刚刚"
elif timestamp>=60 and timestamp < 60*60:
minutes = timestamp / 60
return "%s分钟前" % int(minutes)
elif timestamp >= 60*60 and timestamp < 60*60*24:
hours = timestamp / (60*60)
return '%s小时前' % int(hours)
elif timestamp >= 60*60*24 and timestamp < 60*60*24*30:
days = timestamp / (60*60*24)
return "%s天前" % int(days)
else:
return time.strftime('%Y/%m/%d %H:%M')
else:
return time
jinja2模板循环语句
1.for循环语句
1在`jinja2`中的`for`循环，也是`for...in...`的形式,并且也可以遍历所有的序列以及迭代器。
2但是不同的是，`jinja2`中的`for`循环没有`break`和`continue`语句,else 语句也挺奇怪。
@app.route('/')
def index():
context = {
'users':['wqbin','wangyang','K'],
'person': {
'username': 'wqbin',
'age': 25,
'country': 'china'
},
'books':[
{
'name': '三国演义',
'author':'罗贯中',
'price': 30
},{
'name': '西游记',
'author':'吴承恩',
'price': 25
},{
'name': '红楼梦',
'author':'曹雪芹',
'price': 20
},{
'name': '水浒传',
'author':'施耐庵',
'price': 19
}
]
}
return render_template('index.html',**context)
2.if语句
if条件判断语句：
- `if`条件判断语句必须放在`{% if statement %}`中间，并且还必须有结束的标签`{% endif %}`。
- 可以使用`>，<，<=，>=，==，!=`来进行判断，也可以通过`and，or，not，()`来进行逻辑合并操作。
@app.route('/')
def index():
context = {
'username': 'wqbin',
'age': 17
}
return render_template('index.html',**context)
jinja2模板之宏
模板中的宏跟python中的函数类似，可以传递参数，但是不能有返回值，可以将一些经常用到的代码片段放到宏中，然后把一些不固定的值抽取出来当成一个变量。
使用宏的时候，参数可以为默认值。相关示例代码如下：
1. 定义宏：
```html
{% macro input(name, value='', type='text') %}
<input type="{{ type }}" name="{{ name }}" value="{{ value }}">
{% endmacro %}
```
2，导入宏
1. `import "宏文件的路径" as xxx`。
2. `from '宏文件的路径' import 宏的名字 [as xxx]`。
3. 宏文件路径，不要以相对路径去寻找，都要以`templates`作为绝对路径去找。
4. 如果想要在导入宏的时候，就把当前模版的一些参数传给宏所在的模版，那么就应该在导入的时候使用`with context`。
置顶
```html
{#{% from "macros/macros.html" import input as input_field %}#}
{% import "macros/macros.html" as macros with context %}
```
3. 使用宏：
```html
<p>{{ input('username') }}</p>
<p>{{ input('password', type='password') }}</p>
```
macros/macros.html
{% macro input(name="",value="",type="text") %}
<input type="{{ type }}" name="{{ name }}" value="123">
{% endmacro %}
index/index.html
{#{% from "macros.html" import input as input_field %}#}
{% import "macros/macros.html" as macros with context %}
<!--<!DOCTYPE html>-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>what is 宏</title>
</head>
<body>
<h1>XX网站登录</h1>
<table>
<tbody>
<tr>
<td>用户名：</td>
<td>{{ macros.input(name) }}</td>
</tr>
<tr>
<td>密码：</td>
<td>{{ macros.input("1234",type=type) }}</td>
</tr>
<tr>
<td>请提交</td>
<td>{{ macros.input(value="OK",type="submit") }}</td>
</tr>
</tbody>
</table>
<p>{{ name }}</p>
</body>
</html>
python
@app.route('/')
def hello_world():
return render_template('index/index.html',name='wang')
include语句
- 这个标签相当于是直接将指定的模版中的代码复制粘贴到当前位置。
- `include`标签：如果想要使用父模版中的变量，直接引用不需要使用`with context`。
- `include`的路径：直接从`templates`根目录下去找，不要以相对路径去找。
{% include "common/header.html" %}
案例代码：
common/footer.html
<style>
.nav ul{
overflow: hidden;
}
.nav ul li{
float: left;
margin: 0 20px;
}
</style>
<nav class="nav">
<ul>
<li>首页</li>
<li>flask源码</li>
<li>案例教程</li>
<li>{{ username }}</li> </ul>
</nav>
<p>******以上是顶部【common/footer.html】*****</p>
common/footer.html
<footer>
********这是底部的【common/footer.html】********
</footer>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>include学习</title>
</head>
<body>
{% include "common/header.html" %}
<div class="content">
这是中间的 【index.html】
</div>
{% include "common/footer.html" %}
</body>
</html>
course_detail.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% include "common/header.html" %}
<div class="content">
include详情【course_detail.html】
</div>
{% include "common/footer.html" %}
</body>
</html>
python：
from flask import Flask,render_template app = Flask(__name__)
app.config['TEMPLATES_AUTO_RELOAD'] = True @app.route('/')
def hello_world():
return render_template('index.html',username='wqbin') @app.route('/detail/')
def detail():
return render_template('course_detail.html') if __name__ == '__main__':
app.run(debug=True)
set与with··endwith语句
set语句：
可以使用`set`语句来定义变量,一旦定义了这个变量，那么在后面的代码中，都可以使用这个变量。
示例如下：
```html
{% set username='wqbin' %}
<p>用户名：{{ username }}</p>
```
`with`语句：
- `with`语句定义的变量，只能在`with`语句块中使用，超过了这个代码块，就不能再使用。
- `with`语句可以定义一个空的`with`语句，在`with`块中通过`set`定义的变量的就只能在这个`with`块中使用。
示例代码如下：
```html
{% with major = 'IT' %}
<p>专业：{{ major }}</p>
{% endwith %}
``` ```html
{% with %}
{% set major = 'IT' %}
<p>班级：{{ major }}</p>
{% endwith %}
```
加载静态文件
加载静态文件使用的是`url_for`函数。
第一个参数需要为`static`，
第二个参数需要为一个关键字参数`filename='路径'，路径查找时要以当前项目的`static`目录作为根目录。
```html
{{ url_for("static",filename='xxx') }}
```
html:
templates\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>static静态加载</title>
<link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
<script src="{{ url_for('static',filename='js/index.js') }}"></script> </head>
<body>
<img src="{{ url_for('static',filename='imgs/300.jpg') }}" alt=""> </body>
</html>
static/css/index.css
body{
background: pink;
}
模版继承
模版继承可以把一些公用的代码单独抽取出来放到一个父模板中，子模板直接继承就可使用，解耦后的代码可复用。
1.模版继承语法：
使用`extends`语句，来指明继承的父模板。父模板的路径，也是相对于`templates`文件夹下的绝对路径。
示例代码如下：
{% extends "common/father.html" %}
继承之后所有的子模板都具备父模板的所有格式。。。如果你要子模板有个性，那需要对父的使用block语句进行模板块分割。
2.覆盖父模板block语法：
父模版就应该有能力实现一些公用的功能并提供一个接口，但是子模板可能要根据具体的需求实现不同的代码，这时候从而实现具体业务需求的功能。
那这样只需在继承的父的模板块中重写模板块即可。
在父模板中：
```html
{% block block的名字 %}
{% endblock %}
```
在子模板中：（下面这样就覆盖上面父模板）
```html
{% block block的名字 %}
子模板中的代码
{% endblock %}
```
3.调用父模版代码block中的代码：
默认情况下，子模板如果实现了父模版定义的block。那么子模板block中的代码就会覆盖掉父模板中的代码。如果想要在子模板中仍然保持父模板中的代码，那么可以使用`{{ super() }}`来实现。
示例如下：
父模板：
```html
{% block body_block %}
<p style="background: red;">这是父模板中的代码</p>
{% endblock %}
```
子模板：
```html
{% block body_block %}
{{ super() }}
<p style="background: green;">我是子模板中的代码</p>
{% endblock %}
```
4.调用另外一个block中的代码
如果想要在另外一个模版中使用其他模版中的代码，则可以通过`{{ self.其他block名字() }}`实现。
父模板：
```html
{% block title %}
这是父类的title
{% endblock %}
```
子模板：
```html
{% block body_block %}
{{ self.title() }}
<p style="background: green;">这是子模板中的代码</p>
{% endblock %}
```
5.其他注意事项：
- 子模板中的代码，第一行，应该是`extends`。
- 子模板中，如果要实现自己的代码，应该放到父类有的block中。如果放到其他地方，那么就不会被渲染。
- 再强调一遍 子模板内容必须写在父模板定义的接口中，写在接口外面的内容不会被渲染。
案例讲解：
common/father.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}【father.html的title】{% endblock %}</title>
<style>.nav ul{overflow: hidden;}
.nav ul li{float: left;margin: 0 20px;}
</style>
</head>
<body>
<nav class="nav">
<ul>
<li style="background: pink;">首页【father.html】</li>
<li style="background: pink;">flask学习文档【father.html】</li>
<li style="background: pink;">flask学习教程【father.html】</li>
<li style="background: pink;">{{ username }}</li>
</ul>
</nav>
{% block body_block %}
<p style="background: red;">这是父模板中的代码1【father.html】</p>
{% endblock %}
{% block body_block2 %}
<p style="background: red;">这又是父模板中的代码2【father.html】</p>
{% endblock %}
{% block body_block3 %}
<p style="background: red;">这又是父模板中的代码3【father.html】</p>
{% endblock %}
{% block footer %}
<footer>
<p style="background: pink;">这是底部【father.html】</p>
</footer> {% endblock %}
</body>
</html>
index2.html
{% extends 'common/father.html' %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wqbin</title>
</head>
<body>
<p>子模板中，如果要实现自己的代码，应该放到block中。
如果放到其他地方，那么就不会被渲染
</p>
{% block body_block %}
<p >子模板中的代码【index2.html】
父类有body_block 所以会被覆盖
</p>
{% endblock %}
{% block index2_block %}
<p >子模板中的代码【index2.html】
父类没有index2_block 所以也不会被渲染
</p>
{% endblock %}
{% block body_block2 %}
{{ super() }}
<p >子模板中的代码【index2.html】:
父类有body_block2,重新用super调用，再添加子模板自己功能
</p>
{% endblock %}
{% block body_block3 %}
<p >子模板中的代码【index2.html】：父类有body_block3
使用self.title调用 父类的title {{ self.title() }}</p>
{% endblock %}
</body>
</html>
第四章 Jinja2模版的更多相关文章
- 第四章SignalR自托管主机
第四章SignalR自托管主机 SignalR服务器通常在IIS的Asp.Net应用程序上承载,但它也可以使用自托管库来作为自托管的主机来运行(就像控制台应用程序或Windows服务那样)与Signa ...
- 《HALCON数字图像处理》第四章笔记
目录 第四章 HALCON数据结构 HALCON Image图像 图像通道 HALCON Region区域 Region的初步介绍 Region的点与线 Region的行程 Region的区域特征 H ...
- 《Django By Example》第四章 中文 翻译 （个人学习，渣翻）
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...
- 《Linux内核设计与实现》读书笔记 第四章 进程调度
第四章进程调度 进程调度程序可看做在可运行太进程之间分配有限的处理器时间资源的内核子系统.调度程序是多任务操作系统的基础.通过调度程序的合理调度,系统资源才能最大限度地发挥作用,多进程才会有并发执行的 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章 ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (21) -----第四章 ASP.NET MVC中使用实体框架之在页面中创建查询和使用ASP.NET URL路由过虑
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 4.2. 构建一个搜索查询 搜索数据是几乎所有应用的一个基本功能.它一般是动态的,因 ...
- 精通Web Analytics 2.0 （6） 第四章：点击流分析的奇妙世界：实际的解决方案
精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第四章:点击流分析的奇妙世界:实际的解决方案 到开始实际工作的时候了.哦耶! 在本章中,您将了解到一些最重要的网络分析报告,我将 ...
- Java语言程序设计(基础篇) 第四章 数学函数、字符和字符串
第四章 数学函数.字符和字符串 4.2 常用数学函数 方法分三类:三角函数方法(trigonometric method).指数函数方法(exponent method)和服务方法(service m ...
- 《利用python进行数据分析》读书笔记--第四章 numpy基础：数组和矢量计算
http://www.cnblogs.com/batteryhp/p/5000104.html 第四章 Numpy基础:数组和矢量计算 第一部分:numpy的ndarray:一种多维数组对象 实话说, ...
随机推荐
- ztree点击节点实现选中/取消复选框
效果 代码 在js中初始化tree时 设置复选框操作只影响子节点 复选框事件,想怎么处理就怎么处理
- 《MIT 6.828 Lab 1 Exercise 2》实验报告
本实验链接:mit 6.828 lab1 Exercise2. 题目 Exercise 2. Use GDB's si (Step Instruction) command to trace into ...
- 《鸟哥的Linux私房菜：基础学习篇》读书笔记之第一部分
一.如何学习Linux 1. Linux基础知识 (1) 计算机概论与硬件相关知识. (2) 先从Linux的安装与命令学起. (3) Linux操作系统的基础技能.如用户/用户组.权限.程序等概念. ...
- linux_mysql学习系列
Linux&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 网站架构系列文章:http://www.cnblogs.co ...
- [转帖]SSH远程登录配置文件sshd_config详解
SSH远程登录配置文件sshd_config详解 2016年06月02日 17:42:25 Field_Yang 阅读数 61386 版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权 ...
- 缓存穿透 & 缓存雪崩 & 缓存击穿
一 缓存穿透 1. 行为 查询一个一定不存在的数据.存储层(姑且认为是db,下面都用db指代)查不到数据则不写入缓存,那么下次请求这个不存在的数据同样会到db层查询,失去了缓存的意义.流量大或人为恶意 ...
- MyBatis配置文件中的标签mappers的子标签mapper的url属性
在浏览器中输入file:/可以打开访达根目录,file:后面至少跟一个杠 MyBatis配置文件中的标签mappers的子标签mapper的url属性中file:后面至少要跟两个杠
- python — 生成器、推导式、递归
目录 1 生成器(函数的变异) 2 推导式 3 递归 1 生成器(函数的变异) 判断一个函数是否是生成器函数:只需看函数内部是否有yield # 生成器函数(内部是否包含yield) def func ...
- gdb暂停或恢复程序的运行
ref : https://blog.csdn.net/seu_lyr/article/details/9050657 一 暂停程序的运行: (一)GDB的暂停方式:断点(BreakPoint). ...
- MyBatis Java不同方式加载文件时的路径格式问题、Mybatis中加载.properties文件
public class LoadPropTest { public static void main(String[] args) throws IOException { //一.Properti ...