zoukankan      html  css  js  c++  java
  • tornado学习笔记11 Web应用中模板(Template)使用应用实践

           上一篇中(Web应用中模板的工作流程分析),已经分析了模板的渲染流程,以及相关参数获取及设置原理。这篇主要讲述模板在实际应用案例。

    11.1 需求

          根据用户输入的两次密码,判断两次密码是否一致,并将判断后的结论用自定义的模板方法格式化输出。

          备注:只为满足演示实验需要,不考虑密码的安全性。

    11.2 结果预览

          两次密码输入一致时,下面显示绿色的结论:

    image

         两次密码输入不一致时,实现红色的结论:

    image

    11.3 代码结构

    image

    其中,

           controllers:为页面控制器模块,放置所有业务handlers.里面再按业务模块分类,比如我们这里放置了主页、密码两个模块;

           static:为静态文件根目录,放置图片,css等静态文件;

           templates:模板文件的根目录,放置所有的模板文件。里面同样再按业务模板进行细分,比如这里细分出了密码模块的子文件夹。

           views:视图模块。主要为一些跟页面显示有关的函数。比如自定义的模板方法(uiMethods)。

           采取分层的方式组织代码,清晰明了,而且易于维护。

    11.4 实现详解

    (1)先看applicationConfigure.py,应用程序的配置。

    STATIC_ROOT = os.path.join(os.path.dirname(__file__), 'static').replace('\', '/')
    TEMPLATE_PATH = os.path.join(os.path.dirname(__file__), 'templates').replace('\', '/')
    
    
    settings = {
        "static_path": STATIC_ROOT,
        "static_url_prefix": "/static/",
        'debug': True,
        "template_path": TEMPLATE_PATH,
    }
    
    
    application = Application(handlers=[
        url(r"/", MainHanlder),
        url(r"/story/([0-9]+)", StoryHanlder, dict(db=db), name="story"),
        url(r"/psw/check", PasswordRequestHandler),
    ], **settings)

           主要设置template_path选项值以及url路由映射,访问路径url为/psw/check以及相应的处理handler为PaasswordRequestHandler。

           template_path指定了模板的路径为源代码的templates根目录,为实际的物理路径。

    (2)再看PaasswordRequestHandler.py的实现,位于controllers模块下。

    class PasswordRequestHandler(RequestHandler):
        def get(self, *args, **kwargs):
            password = self.get_argument("f")
            check_password = self.get_argument("s")
    
            datas={
                "password": password,
                "checkPassword": check_password
            }
    
            self.render("password/check.html", **datas)
    
        def get_template_namespace(self):
            namespace = {}
    
            namespace = super(PasswordRequestHandler, self).get_template_namespace()
    
            uimethods={
                "check": checkPasswordResult
            }
            namespace.update(uimethods)
    
            return namespace

       

                 重写RequestHandler的两个方法,get/get_template_namespace.其中,

                get方法来接收请求,获得两次输入的密码参数值,并组织数据,传递给模板。注意,传递的数据是以字典的形式组织的。

                get_template_namespace用来注册模板的自定义方法。这里注册名叫check的方法,而具体的实现位于views.password.uiMethods.py的checkPasswordResult方法。这样,PasswordRequestHandler涉及的模板中都可以使用check自定义方法。

    (3)看模板文件,check.html.这里用html格式文件,原则上,任何文本格式的文件都可以。

    <!DOCTYPE html
            PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>判断两次输入密码是否一致</title>
    </head>
    <body>
        第一个输入的密码为:{{ password }} <br/>
        第二次输入的密码为:{{ checkPassword }}<br/>
    
        结论:{% raw check(password,checkPassword) %}
    
    </body>
    </html>

              很简单的一段代码。取得两次输入密码的值,然后得出结论。注意,结论的模板指令使用了raw关键字,用来表示结果的原样输入。稍后解释为什么使用raw。

             模板的语法使用说明请参考 这里

    (4)checkPasswordResult 自定义模板方法的实现。位于views/password/uiMethods.py下。

    def checkPasswordResult(first,second):
        """
         判断两次输入密码的一致性
        :param first: 第一个密码
        :param second: 第二个密码
        :return: 是否一致的结果
        """
        result = ""
        if first == second:
            result = "<span style='color:green;'>两次密码输入相同! </span>"
        else:
            result = "<span style='color:red;'> 两次密码输入不相同!</span>"
    
        return result

             逻辑很简单,就是如果两次密码相同,则输出绿色的结论,如果不相同,则输出红色的结论。这里用html的样式来表示颜色,返回的也是包含html的字符串。

             再来回答上面提出的问题,模板文件的结论渲染指令中为什么用raw关键字。因为tornado模板的输出在默认情况下是被转义的,如果不用raw关键子,checkPassswordResult方法返回的结果被原样输出在游览器中,而不会当成是html格式的文本内容。

          如果把raw关键子去掉,结果如下:

    image

  • 相关阅读:
    javascript 字符串与正则
    微信小程序 实现三级联动-省市区
    VUE图片懒加载-vue lazyload插件的简单使用
    移动端使用mint-ui loadmore实现下拉刷新上拉显示更多
    vue-cli创建的项目中引入第三方库报错 'caller', 'calle', and 'arguments' properties .....报错问题
    js判断两个数组是否相等
    234回文链表
    剑指 Offer 22. 链表中倒数第k个节点
    返回倒数第 k 个节点
    leetcode 179.最大数
  • 原文地址:https://www.cnblogs.com/liaofeifight/p/4968986.html
Copyright © 2011-2022 走看看