Tornado框架02-模板引擎-CSDN博客

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

运行结果