Tornado框架02-模板引擎

貓xian森發表於2019-03-04
框架

在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-入門總概)中的具體例項實現後再對應解釋來理解

接下來我們老規矩, 先使用一下模板引擎的繼承之後, 再詳細介紹

Tornado框架02-模板引擎
專案目錄

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()複製程式碼

Tornado框架02-模板引擎
訪問`index`執行結果

Tornado框架02-模板引擎
訪問`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.

使用模板的繼承可以重複使用相同結構的模板, 可以大大減少程式碼量. 但是有時候並不是所有的網頁結構都是我需要的, 我們會想要單獨包含所有網頁都有的相同的一小部分內容. 此時就需要模板檔案的包含來實現.

Tornado框架02-模板引擎
檔案目錄

我們在剛剛的專案的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%}複製程式碼

Tornado框架02-模板引擎
執行結果

  • 從圖中看出, 我們在index.html中加上{%include "../include/form.html"%}之後, 該檔案就會被包含到當前檔案中執行一次
  • 這種包含可以重複多次, 包含次則執行被包含的內容一次

這裡再補充一點小知識, Tornado的模板引擎預設過濾掉xss攻擊, 當使用{%raw content%}時, content將直接作為html內容渲染, 不進行轉義來避免xss攻擊

相關文章