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%}复制代码

从图中看出, 咱们在index.html中加上{%include "../include/form.html"%}以后, 该文件就会被包含到当前文件中执行一次
这种包含能够重复屡次, 包含次则执行被包含的内容一次

这里再补充一点小知识, Tornado的模板引擎默认过滤掉xss攻击, 当使用{%raw content%}时, content将直接做为html内容渲染, 不进行转义来避免xss攻击