14.Tornado_模板案例_购物车——template模板修改动态参数

1.概述

本次文章主要讲解如何使用Tornado模板,让原本的html里的固定内容修改成可变变量。

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/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.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 方式解析-->
        <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-->
  <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>

3.修改后代码

<!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/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.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>
  <!--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,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('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()
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

想成为数据分析师的开发工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值