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 ioloop
class IndexHandler(web.RequestHandler):
def count(self,price,num):
return price*num
def 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
