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

入门实例

一、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. AtCoder Grand Contest 037

    Preface 这篇咕了可能快一个月了吧,正好今天晚上不想做题就来补博客 现在还不去复习初赛我感觉我还是挺刚的(微笑) A - Dividing a String 考虑最好情况把每个字符串当作一个来看 ...

  2. SpringBoot启用https

    1.利用JDK自带的keytool生成证书 keytool -genkey -storetype PKCS12 -alias tomcat -keyalg RSA -keysize 2048 -key ...

  3. Python 将numpy array由浮点型转换为整型

    Python 将numpy array由浮点型转换为整型 ——使用numpy中的astype()方法可以实现,如:

  4. LeetCode 160： 相交链表 Intersection of Two Linked Lists

    爱写Bug(ID:iCodeBugs) 编写一个程序,找到两个单链表相交的起始节点. Write a program to find the node at which the intersectio ...

  5. Shell基本运算符之字符串运算符

    Shell基本运算符 1.字符串运算符 常用的字符串运算符 运算符 说明 例子 = 检测两字符串是否相等,相等返回true [ $a = $b ] != 检测两个字符串是否部相等,不相等返回true ...

  6. Elasticsearch搜索调优权威指南 （1/3）

    本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/qwkZKLb_ghmlwrqMkqlb7Q英文原文:https://qbox.io/blog/ela ...

  7. dubbo入门教程-从零搭建dubbo服务

    [原创 转载请注明出处] 本文是学习了dubbo之后自己手动写的,比较通俗,很多都是自己学习之后的理解,写的过程中没有参考任何文章. 另外dubbo也有官方文档,但是比较官方,也可以多看看dubbo的 ...

  8. 最近在折腾在线编辑，研究了下Wopi，下面粘贴出自己Office Online Server2016搭建与部署

    至少需要两台服务器,一台域控制器,一台部署Office Online Server https://docs.microsoft.com/zh-cn/officeonlineserver/office ...

  9. PHP工作岗位要求

    初级PHP 企业对初级PHP的要求是,在日常工作中,保证编码质量,对一般问题具有解决能力. 1.团队合作:经常是Git或者SVN.主要是为了能够融入敏捷开发团队2.前端:HTML.CSS.JS要精通. ...

  10. 微信小程序滚动tab的实现

    微信小程序滚动tab的实现 1.目的:为了解决滚动版本的tab,以及实现虹吸效果. 2.方案:自己动手写了一个Demo,用于测试实现如上的效果.其代码有做参考,在这里先声明.具体的参照如下:重庆大学二 ...