本次文章主要讲解如何使用Tornado模板,让原本的html里的固定内容修改成可变变量。
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>
<div class="topNavBg">
<div class="wrap">
<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>
<ul class="topRtNav">
<li><a href="user.html">个人中心a>li>
<li><a href="cart.html" class="cartIcon">购物车<i>0i>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>
<div class="wrap logoSearch">
<div class="logo">
<h1><img src="static/img/logo.png" />h1>
div>
<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>
<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.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>
{order.get('price')*order.get('num')}} -->
<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>
<div hidden>
{{ total = total + count_price(order.get('price'),order.get('num')) }}
div>
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>
<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">DethGhosta>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>
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>
<div class="topNavBg">
<div class="wrap">
<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>
<ul class="topRtNav">
<li><a href="user.html">个人中心a>li>
<li><a href="cart.html" class="cartIcon">购物车<i>0i>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>
<div class="wrap logoSearch">
<div class="logo">
<h1><img src="static/img/logo.png" />h1>
div>
<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>
<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.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>
{ order.get('price')*order.get('num')}} -->
<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>
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>
<footer>
<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">DethGhosta>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,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": '删除'
},
{
'id':2,
'name': 'HuaWei Mate 2060',
'type':'32G',
'price': 8000,
'num':2,
'img': '/static/img/goods007.jpg',
"opts": '删除'
},
{
'id':3,
'name': 'Sony 耳机',
'type':'立体混响',
'price':2000,
'num':1,
'img': '/static/img/goods008.jpg',
"opts": '删除'
}]
self.render('shop13.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/'}
app = web.Application([
('/',IndexHandler)
],
debug=True,**settings) # 设置查找路径
app.listen(8000)
ioloop.IOLoop.current().start()