05模板继承、UImodul和UImethods-CSDN博客

本文链接：https://blog.csdn.net/qq_14993591/article/details/82458974

模板继承

父模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Base{% end %}</title>
</head>
<body>
    {% block body %}

        this is tornado1

    {% end %}
</body>
</html>

子模板

{% extends 03base.html %}

{% block title %} Extend {% end %}


{% block body %}

    {% if username != 'no' %}
        欢迎用户{{username}}登录
        <br>
        <img src="{{static_url('images/a.jpg')}}" width="250">
        <br>
    {% else %}
        您还没有登录
    {% end %}

{% end %}

继承 extend

{% extend *filename* %}继承模板，
在子模板中会把父模板的所有内容都继承到子模板中，
减少大量重复代码


{% extends 03base.html %}

块block

{% block *name* %}...{% end %}

被词语句包裹的代码块在子模板中可以被重写，覆盖父模板中的

block 包裹一部分代码块，可以在子模板中重写块中的内容

03base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Base{% end %}</title>
    <!--<link rel="shortcut icon" href="{{static_url('images/favicon.ico')}}">-->
    <link rel="shortcut icon" href="static/images/favicon.ico">
</head>
<body>
    {% block body %}

        this is tornado1

    {% end %}
</body>
</html>

04extend.html

{% extends 03base.html %}

{% block title %} Extend {% end %}


{% block body %}

this is tornado extend

{% end %}

模板导入

模板文件

05include.html

<br>
this is tornado templates include
<br>

<form method="post" action="/get?name=wu">
        <p>用户名：<input type="text" name="name"></p>
        <p>密&emsp;码：<input type="password" name="password"></p>
        <input type="submit">
</form>

子模板

{% include ./05include.html %}

04extend.html

{% extends 03base.html %}

{% block title %} Extend {% end %}


{% block body %}
     this is tornado Extend

     {% include 05include.html %}

{% end %}

因是单继承所以再继承另一个页面的话只能导入 include

页面显示

templates this is tornado Extend 

this is tornado include 

再加一个form表单

03base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Base{% end %}</title>
</head>
<body>
    {% block body %}

        this is tornado1

    {% end %}
</body>
</html>

include

{% include *filename*%}

include 可以导入一些其他的模板文件，
一般使用 include 的时候，模板文件(05include.html)中不使用 block 块

函数和类导入

渲染时导入

在 Handler 中渲染模板时传入

函数导入

class ExtHandler(tornado.web.RequestHandler):
    def haha(self):
        return 'this is haha'

    def get(self):
        self.render('04extend.html',
                    haha=self.haha
                    )

04extend.html

{% extends 03base.html %}

{% block title %} Extend {% end %}



{% block body %}

     this is tornado Extend
     {{ haha() }}

{% end %}

页面显示

this is tornado Extend  
this is haha

类导入

class Calculation:
   def sum(self, a, b):
      return a + b


class ExtHandler(tornado.web.RequestHandler):
   def get(self, *args, **kwargs):
      self.render('04extend.html',
               cal=Calculation,
               )

04extend.html

{% extends 03base.html %}

{% block title %} Extend {% end %}


{% block body %}

     {{ cal() }}
     <br>
     {{ cal().sum(1,3) }}
     <br>


{% end %}

页面显示

 <__main__.Calculation object at 0xb69651ec> 
4

模板中直接导入

在模板中也可以直接导入 python 模块

导入内置模块

<br>
{% import time %}
{{ time.time() }}
<br>

1534751253.988571

导入自定义模块

{% from util.mod_file import add,upper %}
{{ add(3,4) }}
<br>
{{ upper('st') }}
<br>



注意：python解释器查找 mod_file 时是根据 py 文件的路径来查找的，不是根据模板的路径来查找

util文件下的 mod_file.py

def add(a,b):
   return a+b

def upper(a):
   return a.upper()

页面显示

7 
ST

ui_methods和ui_modules

第一步

新建文件ui_methods.py

新建文件ui_methods.py ，这里的文件名是随意的只要在import时合法即可，
这里可以新建一个文件夹，如util，来放置 ui_methods.py 和 ui_modules.py 


def methods1(self):  #注意这里要加上self 
    return 'ui_methods 1' 
def methods2(self): 
    return 'ui_methods 2'

新建文件ui_modules.py

新建文件ui_modules.py，使用ui_modules需要继承UIModule类


from tornado.web import UIModule

class UiModule(UIModule):
    def render(self, *args, **kwargs):
        return '我是 ui_module'

第二步

在项目中导入

import util.ui_modules
import util.ui_methods

第三步

配置 Application 参数

ui_methods=util.ui_methods,
ui_modules=util.ui_modules,


也可以写成字典形式：

ui_methods=util.ui_methods,
ui_modules={
'UiModule':util.ui_modules.UiModule,
}

第四步

在模板中调用

<br>
{% module UiModule() %}\
<br>
{{ methods1() }}
<br>

页面显示

我是 ui_module 
ui_methods 1

刚才的这种方式，虽然烦琐了一点，但是在调用的时候十分简单，在越是有很多模板需要导入同一个对象的时候，就越显得其方便简洁，接下来演示个具体的案例

添加 ui_module

在 ui_modules 中添加如下代码

class Advertisement(UIModule):
    def render(self, *args, **kwargs):
        return self.render_string('06ad.html')

    def css_files(self):
        return "/static/css/King_Chance_Layer7.css"

    def javascript_files(self):
        return [
            "/static/js/jquery_1_7.js",
            "/static/js/King_Chance_Layer.js",
            "/static/js/King_layer_test.js",
        ]

导入静态文件 :

06ad.html

<div class="King_Chance_Layer">
        <div class="King_Chance_LayerCont" style="display:none;">
            <div class="King_Chance_Layer_Close">Close</div>
            <div class="King_Chance_Layer_Title">SHOPBEST 商城SHOPBEST 商城SHOPBEST 商城SHOPBEST 商城</div>
            <div class="King_Chance_Layer_Btn">
                <ul>
                    <li><a href="#" title="百搭潮">百搭潮</a></li>
                    <li><a href="#" title="抗皱棉">抗皱棉</a></li>
                    <li><a href="#" title="植绒">植绒</a></li>
                    <li><a href="#" title="潮范">潮范</a></li>
                </ul>
            </div>
            <div class="King_Chance_Layer_Content">
                <ul>
                    <li><a href="#" title="百搭潮"><img src="/static/images/King_imgs/ipush1.jpg" alt="百搭潮"></a></li>
                    <li><a href="#" title="抗皱棉"><img src="/static/images/King_imgs/ipush2.jpg" alt="抗皱棉"></a></li>
                    <li><a href="#" title="植绒"><img src="/static/images/King_imgs/ipush3.jpg" alt="植绒"></a></li>
                    <li><a href="#" title="潮范"><img src="/static/images/King_imgs/ipush4.jpg" alt="潮范"></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

模板中使用

{% module Advertisement() %}

页面会有一个小广告

模板其他命令

apply

{% from util.mod_file import add,upper %}

<br>
{% apply upper %}
    hello world<br>
    hahaha
{% end %}
<br>
{{ upper('hahaha') }}
<br>



使用apply语句，使用函数的作用范围到最近的{%end%}为止

页面显示

HELLO WORLD 
HAHAHA
HAHAHA

linkify

<br>
{{linkify('百度: http://www.baidu.com') }}
<br>
{% raw linkify('百度: http://www.baidu.com') %}
<br>


linkify生成一个链接,但是要注意模板转义

页面显示

百度: <a href="http://www.baidu.com">http://www.baidu.com</a>
百度: http://www.baidu.com