1 Template
1.1 通過字符串返回
import tornado
class IndexHandler(web.RequestHandler):def get(self):arg = 'Template'self.finish(f'<h1>Hello {arg}!!</h1>')
1.2 通過模板Template返回
tornado.template
一個簡單的模板系統,將模板編譯為Python代碼。
基本用法如下
class IndexHandler1(web.RequestHandler):def get(self):arg = 'Template1't = template.Template(f'<h1>Hello {arg}!!</h1>')self.finish(t.generate())class IndexHandler2(web.RequestHandler):def get(self):arg1 = 'Template2't = template.Template('<h1>Hello {{arg}}!!</h1>')self.finish(t.generate(arg = arg1))class IndexHandler3(web.RequestHandler):def get(self):arg1 = 'Template3_file'loader = template.Loader('./templates/')self.finish(loader.load('index.html').generate(arg = arg1))
<!-- templates/index.html -->
<h1>Hello {{arg}}!!</h1>
1.3 通過模板render返回
class IndexHandler4(web.RequestHandler):def get(self):arg1 = 'render_Template3_file'self.render('index.html',arg=arg1)
2 模板案例
*前端
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>購物車</title><link rel="stylesheet" type="text/css" href="{{ static_url('css/style.css') }}" /><script src="{{ static_url('js/html5.js') }}"></script><script src="{{ static_url('js/jquery.js') }}"></script><script>$(document).ready(function(){$("nav .indexAsideNav").hide();$("nav .category").mouseover(function(){$(".asideNav").slideDown();});$("nav .asideNav").mouseleave(function(){$(".asideNav").slideUp();});});</script></head><body><!--header--><header><!--topNavBg--><div class="topNavBg"><div class="wrap"><!--topLeftNav--><ul class="topLtNav"><li><a href="login.html" class="obviousText">親,請登錄</a></li><li><a href="register.html">注冊</a></li><li><a href="#">移動端</a></li></ul><!--topRightNav--><ul class="topRtNav"><li><a href="user.html">個人中心</a></li><li><a href="cart.html" class="cartIcon">購物車<i>0</i></a></li><li><a href="favorite.html" class="favorIcon">收藏夾</a></li><li><a href="user.html">商家中心</a></li><li><a href="article_read.html" class="srvIcon">客戶服務</a></li><li><a href="union_login.html">聯盟管理</a></li></ul></div></div><!--logoArea--><div class="wrap logoSearch"><!--logo--><div class="logo"><h1><img src="{{ static_url('img/logo.png')}}"/></h1></div><!--search--><div class="search"><ul class="switchNav"><li class="active" id="chanpin">產品</li><li id="shangjia">商家</li><li id="zixun">搭配</li><li id="wenku">文庫</li></ul><div class="searchBox"><form><div class="inputWrap"><input type="text" placeholder="輸入產品關鍵詞或貨號"/></div><div class="btnWrap"><input type="submit" value="搜索"/></div></form><a href="#" class="advancedSearch">高級搜索</a></div></div></div><!--nav--><nav><ul class="wrap navList"><li class="category"><a>全部產品分類</a><dl class="asideNav indexAsideNav"><dt><a href="channel.html">女裝</a></dt><dd><a href="#">夏裝新</a><a href="#">連衣裙</a><a href="#">T恤</a><a href="#">襯衫</a><a href="#">褲子</a><a href="#">牛仔褲</a><a href="#">背帶褲</a><a href="#">短外套</a><a href="#">時尚外套</a><a href="#">風衣</a><a href="#">毛衣</a><a href="#">背心</a><a href="#">吊帶</a><a href="#">民族服裝</a></dd><dt><a href="channel.html">男裝</a></dt><dd><a href="#">襯衫</a><a href="#">背心</a><a href="#">西裝</a><a href="#">POLO衫</a><a href="#">馬夾</a><a href="#">皮衣</a><a href="#">毛衣</a><a href="#">針織衫</a><a href="#">牛仔褲</a><a href="#">外套</a><a href="#">夾克</a><a href="#">衛衣</a><a href="#">風衣</a><a href="#">民族風</a><a href="#">原創設計</a><a href="#">大碼</a><a href="#">情侶裝</a><a href="#">開衫</a><a href="#">運動褲</a><a href="#">工裝褲</a></dd></dl></li><li><a href="index.html" class="active">首頁</a></li><li><a href="#">時尚搭配</a></li><li><a href="channel.html">原創設計</a></li><li><a href="channel.html">時尚代購</a></li><li><a href="channel.html">民族風</a></li><li><a href="information.html">時尚搭配</a></li><li><a href="library.html">搭配知識</a></li><li><a href="#">促銷專區</a></li><li><a href="#">其他</a></li></ul></nav></header><script>$(document).ready(function(){//測試效果,程序對接如需變動重新編輯$(".switchNav li").click(function(){$(this).addClass("active").siblings().removeClass("active");});$("#chanpin").click(function(){$(".inputWrap input[type='text']").attr("placeholder","輸入產品關鍵詞或貨號");});$("#shangjia").click(function(){$(".inputWrap input[type='text']").attr("placeholder","輸入商家店鋪名");});$("#zixun").click(function(){$(".inputWrap input[type='text']").attr("placeholder","輸入關鍵詞查找文章內容");});$("#wenku").click(function(){$(".inputWrap input[type='text']").attr("placeholder","輸入關鍵詞查找文庫內容");});});</script><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['img']}}" style="width:50px;height:50px;"/></a></td><td><a href="product.html">{{order['name']}}</a></td><td><p>{{order['type']}}</p></td>{% if order['price'] < 100 %}<td class="center"><span class="rmb_icon">優惠力度很大</span></td>{% else %}<td class="center"><span class="rmb_icon">{{order['price']}}</span></td>{% end %}<td class="center"><span>{{ order['num'] }}</span></td><!-- <td class="center"><strong class="rmb_icon">{{ order['price']*order['num'] }}</strong></td> --><td class="center"><strong class="rmb_icon">{{ count_price(order['price'],order['num']) }}</strong></td><td class="center">{% raw order['opts'] %}</td> <!-- html 解析-->{{ total = total + count_price(order['price'],order['num']) }}</tr>{% 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><!--footer--><footer><!--help--><ul class="wrap help"><li><dl><dt>消費者保障</dt><dd><a href="article_read.html">保障范圍</a></dd><dd><a href="article_read.html">退換貨流程</a></dd><dd><a href="article_read.html">服務中心</a></dd><dd><a href="article_read.html">更多服務特色</a></dd></dl></li><li><dl><dt>新手上路</dt><dd><a href="article_read.html">保障范圍</a></dd><dd><a href="article_read.html">退換貨流程</a></dd><dd><a href="article_read.html">服務中心</a></dd><dd><a href="article_read.html">更多服務特色</a></dd></dl></li><li><dl><dt>付款方式</dt><dd><a href="article_read.html">保障范圍</a></dd><dd><a href="article_read.html">退換貨流程</a></dd><dd><a href="article_read.html">服務中心</a></dd><dd><a href="article_read.html">更多服務特色</a></dd></dl></li><li><dl><dt>服務保障</dt><dd><a href="article_read.html">保障范圍</a></dd><dd><a href="article_read.html">退換貨流程</a></dd><dd><a href="article_read.html">服務中心</a></dd><dd><a href="article_read.html">更多服務特色</a></dd></dl></li></ul><dl class="wrap otherLink"><dt>友情鏈接</dt><dd><a href="#" target="_blank">新碼筆記</a></dd><dd><a href="#" target="_blank">DethGhost</a></dd><dd><a href="#">當當</a></dd><dd><a href="#">優酷</a></dd><dd><a href="#">土豆</a></dd><dd><a href="#">新浪</a></dd><dd><a href="#">釘釘</a></dd><dd><a href="#">支付寶</a></dd></dl><div class="wrap btmInfor"><p>? 2060 版權所有 網絡文化經營許可證:浙網文[2060]***-027號 增值電信業務經營許可證:浙B2-200***24-1 信息網絡傳播視聽節目許可證:1109***4號</p><address>聯系地址:北京尚學堂科技有限公司</address></div></footer></body></html>
后端
from tornado import web,template
from tornado import ioloopclass IndexHandler(web.RequestHandler):def count(self,price,num):return price*numdef get(self):orders=[{ 'id':1,'name':'MacPro 2060','type':'32G','price':9999,'num':1,'img':'static/img/goods.jpg','opts':'<a href="delete?id=3">刪除</a>'},{'id':2,'name':'HuaWei Mate 2060','type':'512G','price':6666,'num':1,'img':'static/img/goods007.jpg','opts':'<a href="delete?id=3">刪除</a>'},{ 'id':3,'name':'Sony耳機','type':'立體混音','price':66,'num':2,'img':'static/img/goods008.jpg','opts':'<a href="delete?id=3">刪除</a>'},]self.render('shop.html',orders=orders,count_price=self.count)settings={'static_path':'./static/','static_url_prefix':'/static2/','template_path':'./templates'
}if __name__ == '__main__':app = web.Application([('/',IndexHandler),],debug=True,**settings)app.listen(8000)ioloop.IOLoop.current().start()ok