16.Tornado_UIModel的使用

1.概述

UIModel类似插件可以任意增加与获取
可以类似理解成Vue的组件功能，就是公共的内容提取出来当成组件

2.具体使用方式：

1. 继承tornado.web.UIModule建立模型类
   1. 实现render方法，返回UI模型
2. 在tornado.web.Application对象中使用ui_modules参数设置UI模型映射
   1. 值的格式未：{“UI模型名”:“UI模型类”}
3. 在使用UI模型时，通过{% module UI名(<参数>)%}

3.代码展示

UIModules：

<section class="wrap" style="margin-top:20px;overflow:hidden;">
    <table class="order_table">
      <tr>
        <th><input type="checkbox" /></th>
        <th>产品</th>
        <th>名称</th>
        <th>属性</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
      {% set total = 0 %}
      {% for order in  orders %}
      <tr>
        <td class="center"><input type="checkbox" /></td>
        <td class="center"><a href="product.html"><img src="{{order.get('img')}}" style="width:50px;height:50px;" /></a>
        </td>
        <td><a href="product.html">{{ order.get('name')}}</a></td>
        <td>
          <p>{{ order.get('type')}}</p>
        </td>
        <td class="center"><span class="rmb_icon">{{ order.get('price')}}</span></td>
        <td class="center">
          <span>{{order.get('num')}}</span>
        </td>
        <!-- 计算字段 -->
        <!-- <td class="center"><strong class="rmb_icon">{{ order.get('price')*order.get('num')}}</strong></td> -->
        <td class="center"><strong class="rmb_icon">{{ count_price(order.get('price'),order.get('num')) }}</strong></td>
        <td class="center">{% raw order.get('opts') %}</td> <!-- 后端传递的标签，可以通过raw方式解析-->
      </tr>
      <div hidden>{{ total = total + count_price(order.get('price'),order.get('num')) }}}</div>
      {% end %}

    </table>
    <div class="order_btm_btn">
      <a href="index.html" class="link_btn_01 buy_btn" />继续购买</a>
      <a href="order_confirm.html" class="link_btn_02 add_btn" />共计金额<strong class="rmb_icon">{{total}}</strong>立即结算</a>
    </div>
</section>

创建UIModule的Python

from tornado import web,ioloop, template
from tornado.web import RequestHandler


class IndexHandler(RequestHandler):
    def count_price(self,price:int, num:int) ->int:
        return price*num
    def get(self):
        orders = [
            {
                'id':1,
                'name': 'MacPro 2060',
                'type':'32G',
                'price':10000,
                'num':1,
                'img': '/static/img/goods.jpg',
                "opts": '<a href="delete?id=1">删除</a>'
            },
            {
                'id':2,
                'name': 'HuaWei Mate 2060',
                'type':'32G',
                'price': 8000,
                'num':2,
                'img': '/static/img/goods007.jpg',
                "opts": '<a href="delete?id=2">删除</a>'
            },
            {
                'id':3,
                'name': 'Sony 耳机',
                'type':'立体混响',
                'price':2000,
                'num':1,
                'img': '/static/img/goods008.jpg',
                "opts": '<a href="delete?id=3">删除</a>'
            }]
        self.render('shop15.html', orders= orders)

# 创建应该UIModule
class ProductModule(web.UIModule):
    def count_price(self,price:int, num:int) ->int:
        return price*num
    def render(self, orders:list=[])->str:
        return self.render_string('ui_models/product16.html', orders=orders, count_price = self.count_price)


if __name__ == '__main__':
    import os
    base_path = os.path.dirname(__file__)
    settings = {'template_path': os.path.join(base_path, 'templates'),
                'static_path': os.path.join(base_path, 'static'),
                'static_url_prefix': '/static/',
                # 告诉tornado，有哪些UIModule可以使用
                "ui_modules":{
                    "product":ProductModule
                }
                }
    app = web.Application([
        ('/',IndexHandler)
        ],
    debug=True,**settings) # 设置查找路径
    app.listen(8000)
    ioloop.IOLoop.current().start()

调用UIModule

<!-- 给UIModules传递参数就直接在调用的地方传递即可 -->
{% module product(orders) %}