Tornado框架02-模板引擎

時間 2019-11-22

標籤 tornado 框架模板引擎欄目 Python 简体版

原文原文鏈接

在Tornado框架中, 模板引擎能帶給咱們不少方便, 它是便捷展示頁面的極佳方式. 在上一節中咱們介紹了模板引擎對於{{}}以及對於 {%%}的用法. 咱們簡單回顧一下:javascript

{{}}使用: css

直接取服務端在render()函數中傳遞參數的值, 例如服務端中有self.render('index.html', contents=CONTENTS_LIST), 在html文件中有{{contents}} 則表示在html中取服務端的CONTENTS_LIST的內容
咱們經過配置'ui_methods': 須要執行的自定義python模塊,以後, 咱們能夠在html文件中經過{{自定義python模塊中的函數名()}}來執行對應的函數取得該函數的返回結果以此來顯示

{%%}的使用: html

{%for tmp in iterable%} 用於循環語句, 注意要加上{%end%}結束語句
{%if condition%} 用於條件判斷, 一樣同上須要結束語句
經過配置ui_modules : 須要執行的python模塊 以後, 咱們能夠在文件中經過{%module python模塊名()%}來直接執行該模塊中對應的方法, 注意該模塊須要繼承tornado.web.UIModule

以上有不懂的請參照上一篇博客(Tornado框架01-入門總概)中的具體實例實現後再對應解釋來理解java

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

home.py文件以下: web

#!/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文件以下: app

{%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文件以下: xss

<!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()複製代碼

從運行結果來看, 兩個網頁的主體結構相同, 只是裏邊包含的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%}複製代碼