在Tornado框架中, 模板引擎能帶給我們很多方便, 它是便捷展現(xiàn)頁面的極佳方式. 在上一節(jié)中我們介紹了模板引擎對于{{}}以及對于 {%%}的用法. 我們簡單回顧一下:
**{{}}使用: **
- 直接取服務(wù)端在
render()函數(shù)中傳遞參數(shù)的值, 例如服務(wù)端中有self.render('index.html', contents=CONTENTS_LIST), 在html文件中有{{contents}}則表示在html中取服務(wù)端的CONTENTS_LIST的內(nèi)容 - 我們通過配置
'ui_methods': 需要執(zhí)行的自定義python模塊,之后, 我們可以在html文件中通過{{自定義python模塊中的函數(shù)名()}}來執(zhí)行對應(yīng)的函數(shù)取得該函數(shù)的返回結(jié)果以此來顯示
**{%%}的使用: **
-
{%for tmp in iterable%}用于循環(huán)語句, 注意要加上{%end%}結(jié)束語句 -
{%if condition%}用于條件判斷, 同樣同上需要結(jié)束語句 - 通過配置
ui_modules : 需要執(zhí)行的python模塊之后, 我們可以在文件中通過{%module python模塊名()%}來直接執(zhí)行該模塊中對應(yīng)的方法, 注意該模塊需要繼承tornado.web.UIModule
以上有不懂的請參照上一篇博客(Tornado框架01-入門總概)中的具體實(shí)例實(shí)現(xiàn)后再對應(yīng)解釋來理解
接下來我們老規(guī)矩, 先使用一下模板引擎的繼承之后, 再詳細(xì)介紹
項(xiàng)目目錄
**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具體內(nèi)容-->
{%block tm_css%}
<style type="text/css">
.page-content{
background-color: green;
}
</style>
{%end%}
<!--#自定義的文本內(nèi)容-->
{%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"%}
<!--對應(yīng)的自定義css的具體內(nèi)容-->
{%block tm_css%}
<style type="text/css">
.page-content{
background-color: yellow;
}
</style>
{%end%}
<!--自定義的文本內(nèi)容-->
{%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">
<!--自定義的內(nèi)容, 命名并占位-->
{%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`運(yùn)行結(jié)果
訪問`account`運(yùn)行結(jié)果
- 從運(yùn)行結(jié)果來看, 兩個網(wǎng)頁的主體結(jié)構(gòu)相同, 只是里邊包含的
css具體樣式, 具體內(nèi)容以及js文件不同 - 要繼承模板文件來使用我們要在當(dāng)前文件首行寫上
{%extends "../template/master.html"%}, 這里表示當(dāng)前文件以master.html來進(jìn)行渲染
{%block tm_css%}
<style type="text/css">
.page-content{
background-color: yellow;
}
</style>
{%end%}```
在index.html的這部分其實(shí)就是master.html中tm_css的具體內(nèi)容
- 在
master.html文件中{%block tm_css%}{%end%}相當(dāng)與為后面具體要寫入的內(nèi)容做一個占位符, 并且起名為tm_css.
**使用模板的繼承可以重復(fù)使用相同結(jié)構(gòu)的模板, 可以大大減少代碼量. 但是有時候并不是所有的網(wǎng)頁結(jié)構(gòu)都是我需要的, 我們會想要單獨(dú)包含所有網(wǎng)頁都有的相同的一小部分內(nèi)容. 此時就需要模板文件的包含來實(shí)現(xiàn). **
文件目錄
**我們在剛剛的項(xiàng)目的views文件夾中加入一個include文件夾, 并且在該文件夾中新建一個form.html文件. 內(nèi)容如下: **
<form>
<input type="text">
<input type="submit" value="提交">
</form>
我們將index.html修改如下: **
{%extends "../template/master.html"%}
<!--對應(yīng)的自定義css的具體內(nèi)容-->
{%block tm_css%}
<style type="text/css">
.page-content{
background-color: yellow;
}
</style>
{%end%}
<!--自定義的文本內(nèi)容-->
{%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%}
運(yùn)行結(jié)果
- 從圖中看出, 我們在
index.html中加上{%include "../include/form.html"%}之后, 該文件就會被包含到當(dāng)前文件中執(zhí)行一次 - 這種包含可以重復(fù)多次, 包含次則執(zhí)行被包含的內(nèi)容一次
這里再補(bǔ)充一點(diǎn)小知識, Tornado的模板引擎默認(rèn)過濾掉xss攻擊, 當(dāng)使用{%raw content%}時, content將直接作為html內(nèi)容渲染, 不進(jìn)行轉(zhuǎn)義來避免xss攻擊
