在Tornado框架中, 模板引擎能带给我们很多方便, 它是便捷展现页面的极佳方式. 在上一节中我们介绍了模板引擎对于{{}}以及对于 {%%}的用法. 我们简单回顾一下:
**{{}}使用: **
- 直接取服务端在
render()函数中传递参数的值, 例如服务端中有self.render('index.html', contents=CONTENTS_LIST), 在html文件中有{{contents}}则表示在html中取服务端的CONTENTS_LIST的内容 - 我们通过配置
'ui_methods': 需要执行的自定义python模块,之后, 我们可以在html文件中通过{{自定义python模块中的函数名()}}来执行对应的函数取得该函数的返回结果以此来显示
**{%%}的使用: **
-
{%for tmp in iterable%}用于循环语句, 注意要加上{%end%}结束语句 -
{%if condition%}用于条件判断, 同样同上需要结束语句 - 通过配置
ui_modules : 需要执行的python模块之后, 我们可以在文件中通过{%module python模块名()%}来直接执行该模块中对应的方法, 注意该模块需要继承tornado.web.UIModule
以上有不懂的请参照上一篇博客(Tornado框架01-入门总概)中的具体实例实现后再对应解释来理解
接下来我们老规矩, 先使用一下模板引擎的继承之后, 再详细介绍
项目目录
**home.py文件如下: **
#!/usr/bin/env python
# -*- coding:utf-8 -*-
import tornado.web
class IndexHandle(tornado.web.RequestHandler):
def get(self, *args, **kwargs):
self.render("extend/index.html")
class AccountHandle(tornado.web.RequestHandler):
def get(self, *args, **kwargs):
self.render("extend/account.html")
**acount.html文件如下: **
{%extends "../template/master.html"%}
<!--自定义css具体内容-->
{%block tm_css%}
<style type="text/css">
.page-content{
background-color: green;
}
</style>
{%end%}
<!--#自定义的文本内容-->
{%block tm_content%}
<h1>This is Account</h1>
{%end%}
<!--#自定义的js文件-->
{%block tm_js%}
<script type="text/javascript">
console.log('This is Account')
</script>
{%end%}
**index.html文件如下: **
{%extends "../template/master.html"%}
<!--对应的自定义css的具体内容-->
{%block tm_css%}
<style type="text/css">
.page-content{
background-color: yellow;
}
</style>
{%end%}
<!--自定义的文本内容-->
{%block tm_content%}
<h1>This is Index</h1>
{%end%}
<!--自定义的js文件-->
{%block tm_js%}
<script type="text/javascript">
console.log('This is Index')
</script>
{%end%}
**master.html文件如下: **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Master</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.page-header{
height: 50px;
background-color: red;
}
.page-content {
height: 200px;
background-color: azure;
}
.page-footer{
height: 50px;
background-color: black;
}
</style>
<!--为后边自定义的css命名并占位置-->
{%block tm_css%}{%end%}
</head>
<body>
<div class="page-header"></div>
<div class="page-content">
<!--自定义的内容, 命名并占位-->
{%block tm_content%}{%end%}
</div>
<div class="page-footer"></div>
<!--自定义的js文件位置-->
{%block tm_js%}{%end%}
</body>
</html>
**start.py文件如下: **
#!/usr/bin/env python
# -*- coding:utf-8 -*-
import tornado.web, tornado.ioloop
from controllers import home
if __name__ == '__main__':
CONTENTS_LIST = []
settings = {
'template_path': 'views',
}
application = tornado.web.Application([
(r"/index", home.IndexHandle),
(r"/account", home.AccountHandle),
], **settings)
application.listen(80)
tornado.ioloop.IOLoop.instance().start()
访问`index`运行结果
访问`account`运行结果
- 从运行结果来看, 两个网页的主体结构相同, 只是里边包含的
css具体样式, 具体内容以及js文件不同 - 要继承模板文件来使用我们要在当前文件首行写上
{%extends "../template/master.html"%}, 这里表示当前文件以master.html来进行渲染
{%block tm_css%}
<style type="text/css">
.page-content{
background-color: yellow;
}
</style>
{%end%}```
在index.html的这部分其实就是master.html中tm_css的具体内容
- 在
master.html文件中{%block tm_css%}{%end%}相当与为后面具体要写入的内容做一个占位符, 并且起名为tm_css.
**使用模板的继承可以重复使用相同结构的模板, 可以大大减少代码量. 但是有时候并不是所有的网页结构都是我需要的, 我们会想要单独包含所有网页都有的相同的一小部分内容. 此时就需要模板文件的包含来实现. **
文件目录
**我们在刚刚的项目的views文件夹中加入一个include文件夹, 并且在该文件夹中新建一个form.html文件. 内容如下: **
<form>
<input type="text">
<input type="submit" value="提交">
</form>
我们将index.html修改如下: **
{%extends "../template/master.html"%}
<!--对应的自定义css的具体内容-->
{%block tm_css%}
<style type="text/css">
.page-content{
background-color: yellow;
}
</style>
{%end%}
<!--自定义的文本内容-->
{%block tm_content%}
<h1>This is Index</h1>
{%include "../include/form.html"%}
{%include "../include/form.html"%}
{%include "../include/form.html"%}
{%end%}
<!--自定义的js文件-->
{%block tm_js%}
<script type="text/javascript">
console.log('This is Index')
</script>
{%end%}
运行结果
- 从图中看出, 我们在
index.html中加上{%include "../include/form.html"%}之后, 该文件就会被包含到当前文件中执行一次 - 这种包含可以重复多次, 包含次则执行被包含的内容一次
这里再补充一点小知识, Tornado的模板引擎默认过滤掉xss攻击, 当使用{%raw content%}时, content将直接作为html内容渲染, 不进行转义来避免xss攻击
