使用模板的继承可以重复使用相同结构的模板, 可以大大减少代码量

入门实例

一、demo目录结构

注解：

master.html为模板内容，被index.html，account.html引用

二、各文件代码

2.1、master.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Master</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         .page-header{

             height: 48px;

             background-color: aqua;

         }

         .page-content{

             height: 300px;

             background-color: bisque;

         }

         .page-footer{

             height: 30px;

             background-color: aqua;

         }

     </style>

 </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 %}

 <!--    自定义css，命名并占位-->

     {% block tm_css %}

     {% end %}

 </body>

 </html>

2.2、form.html

<form>

    <input type="text"/>

    <input type="submit" value="提交"/>

</form>

2.3、account.html

 {% extends "../template/master.html" %}

 <!--自定义css具体内容-->

 {% block tm_css %}

     <script type="text/css">

         .page-content{

             background-color: aliceblue;

             font-size: 20px;

         }

     </script>

 {% end %}

 <!--自定义page-content中的内容-->

 {% block tm_content %}

     <p>这是我的account</p>

 {% end %}

 <!--自定义js文件-->

 {% block tm_js %}

     <script type="text/javascript">

         console.log("这是我的account")

     </script>

 {% end %}

2.4、index.html

{% extends "../template/master.html"%}

<!--对应的自定义css具体内容-->

{% block tm_css %}

    <style type="text/css">

        .page-content{

            background-color: cornflowerblue;

        }

    </style>

{% end %}

<!--自定义page-content的内容-->

{% block tm_content %}

    <p>这是系统的首页</p>

    {%include "../include/form.html" %}

    {%include "../include/form.html" %}

{% end %}

<!--自定义js的内容-->

{% block tm_js %}

    <script type="text/javascript">

        console.log("这是系统的首页")

    </script>

{% end %}

2.5、start.py

 #!/usr/bin/env python

 # -*- coding: utf-8 -*-

 # @Time    : 2019/12/5 23:41

 # @Author  : yusheng_liang

 # @Site    :

 # @File    : start.py

 import tornado.web

 import tornado.ioloop

 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")

 if __name__ == "__main__":

     CONTENTS_LIST = []

     settings = {

         'template_path': 'views',

     }

     application = tornado.web.Application([

         (r"/index", IndexHandle),

         (r"/account", AccountHandle),

     ], **settings)

     application.listen(80)

     tornado.ioloop.IOLoop.instance().start()

三、demo效果示例

3.1、http://127.0.0.1/index

3.2、http://127.0.0.1/account

详解分析

  • 从运行结果来看, 两个网页的主体结构相同, 只是里边包含的css具体样式, 具体内容以及js文件不同
  • 要继承模板文件来使用我们要在当前文件首行写上{%extends "../template/master.html"%} , 这里表示当前文件以master.html来进行渲染
  • 在master.html文件中{%block tm_css%}{%end%}相当与为后面具体要写入的内容做一个占位符, 并且起名为tm_css

web框架--tornado框架之模板引擎继承的更多相关文章

  1. web框架--tornado框架之模板引擎

    使用Tornado实现一个简陋的任务表功能demo来讲解tornado框架模板引擎 一.demo目录结构 二.具体文件内容 2.1.commons.css .body{ margin: 0; back ...

  2. Tornado框架配置使用Jinja2模板引擎

    安装jinja2包 pip install jinja2 定义继承tornado.web.RequestHandler的子类BaseHandler.如果请求处理类继承这个类将会使用jinja模板引擎: ...

  3. flask框架下的jinja2模板引擎(3)(模板继承与可以在模板使用的变量、方法)

    flask 框架下的jinja2模块引擎(1):https://www.cnblogs.com/chichung/p/9774556.html flask 框架下的jinja2模块引擎(2):http ...

  4. flask框架下的jinja2模板引擎(1)(模板渲染)

    #转载请留言联系 模板是什么? 在 flask 框架中,视图函数有两个作用:处理业务逻辑和返回响应内容.在大型应用中,把业务逻辑和表现内容放在一起,会增加代码的复杂度和维护成本.模板作用即是承担视图函 ...

  5. laravel框架总结(二) -- blade模板引擎

    ## 1.基本用法 ##情形1 $name = laravel5 <div class="title"> {{$name}} {{$name}}</div> ...

  6. flask框架下的jinja2模板引擎(2)(过滤器与自定义过滤器)

    flask框架下的jinja2模块引擎(1):https://www.cnblogs.com/chichung/p/9774556.html 这篇论文主要用来记录下 jinja2 的过滤器. 什么是过 ...

  7. Spring Boot 系列（五）web开发-Thymeleaf、FreeMarker模板引擎

    前面几篇介绍了返回json数据提供良好的RESTful api,下面我们介绍如何把处理完的数据渲染到页面上. Spring Boot 使用模板引擎 Spring Boot 推荐使用Thymeleaf. ...

  8. web框架--tornado框架之初识

    在python中常见的web框架构建模式有以下两种: *MVC框架: * 数据库相关操作的Models 视图文件的Views 业务逻辑的Controllers MTV框架: 数据库相关操作的Model ...

  9. [SpringBoot——Web开发（使用Thymeleaf模板引擎）]

    [文字只能描述片段信息,具体细节参考代码] https://github.com/HCJ-shadow/SpringBootPlus 引入POM依赖 <properties> <ja ...

随机推荐

  1. c++负数下标

    如何使用负数下标呢? 让数组前面有东西 int y[100]; int *z = y + 50; 这样的话调用\(z[-50]\)就变成了调用\(y[0]\) z[-50] = y[0]; 然后这样就 ...

  2. ubutnu 挂载磁盘

    1. 查看已挂载的磁盘 df -h 2. 查看可挂载的磁盘 fdisk -l 3. 创建挂载点 mkdir /media/HDD 注意: /media/HDD 必须为空文件夹 4. 挂载 sudo m ...

  3. AngleSharp 实战（03）之遍历内部子元素

    文档地址:https://anglesharp.github.io/docs/Examples.html 直接贴代码了: using System; using System.Linq; using ...

  4. F#周报2019年第19期

    新闻 介绍.NET 5 发布.NET Core 3.0预览版5以及F#的REPL OpenFsharp CFP开启 F#的Giraffe服务端stub生成器被添加到openapi-generator中 ...

  5. RootKit随手记(一)RootKit的驱动隐藏、读取配置、卸载安装

    边学习边更新这专题,随手记录一下用到的思路,给自己看的(所以读者看可能有些懵,不好意思...) RootKit随手记(一)RootKit的驱动隐藏.读取配置.卸载安装 一.驱动隐藏 1. 隐藏原理 一 ...

  6. mongodb实现文件存储系统

    前言:这种坑很深呀,要对应mongodb的版本跟php支持的版本,然后,如果要用composer安装第三方的库,一定要一一对应的 正片开始! 开发环境: 系统:window 开发语言:php+apac ...

  7. 编辑修改json文件（PSCustomObject）

    #$uname:用户 #$mails:需要绑定或删除的邮箱,如有多个邮箱,中间以,为分隔符,无需添加引号 #######################脚本开始#################### ...

  8. Vue 动态修改data 值 并触发视图更新

    Vue 动态修改data 值 并触发视图更新 this.$set(obj, key, '') // Vue 动态修改或者添加data key 并触发视图更新

  9. Linux 配置程序包源 Nuget

    编辑文件NuGet.Config vi ~/.nuget/NuGet/NuGet.Config 新增源 <add key="fz" value="http://19 ...

  10. 解决 bash: vue command not found

    背景  : win10 使用  yarn  全局 安装  vue/cli 后   yarn  global add  @vue/cli 提示安装成功 使用vue create   提示  bash: ...