1.概述
UIModel类似插件可以任意增加与获取
可以类似理解成Vue的组件功能,就是公共的内容提取出来当成组件
2.具体使用方式:
- 继承tornado.web.UIModule建立模型类
1. 实现render方法,返回UI模型 - 在tornado.web.Application对象中使用ui_modules参数设置UI模型映射
1. 值的格式未:{“UI模型名”:“UI模型类”} - 在使用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) %}