一、页面静态化介绍：

网页静态化解决方案在实际开发中运用比较多，例如新闻网站，门户网站中的新闻频道或者是文章类的频道。
image.png
对于电商网站的商品详细页来说，至少几百万个商品，每个商品又有大量的信息，这样的情况同样也适用于使用网页静态化来解决。
网页静态化技术和缓存技术的共同点都是为了减轻数据库的访问压力，但是具体的应用场景不同，缓存比较适合小规模的数据，而网页静态化比较适合大规模且相对变化不太频繁的数据。另外网页静态化还有利于SEO。
另外我们如果将网页以纯静态化的形式展现，就可以使用Nginx这样的高性能的web服务器来部署。Nginx可以承载5万的并发，而Tomcat只有几百。

二、如何实现页面静态化：

问题一：回顾一下前后端的交互顺序:

  1. 前端提交请求
  2. 请求被springMVC收到了,调用持久层查库,把数据放入model
  3. Thymeleaf把model里面的数据渲染到模板视图里面XXX.html
  4. 把渲染后的全部信息,全部写入到response里面

其实既然能写到response里面,就能写入到其他路径下,事实上,真的是这样做.

问题二：Thymeleaf如何把信息写入到response里? 做这件事的是ThymeleafAutoConfiguration里面的TemplateEngine模板引擎使用下面的方法 process（String template, IContext context, Writer writer）方法

他是如何做的呢？新认识几个概念
1 .Context 上下文

这是块共享的空间,处理用户的请求时,各个servlet可以共享,事实上当我们把数据放入Model ,springMvc就会把model放入Context

  1. TemplateResolver 模板解析器 ```java

@Bean public SpringResourceTemplateResolver defaultTemplateResolver() { SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver(); resolver.setApplicationContext(this.applicationContext); resolver.setPrefix(this.properties.getPrefix()); resolver.setSuffix(this.properties.getSuffix()); resolver.setTemplateMode(this.properties.getMode()); if (this.properties.getEncoding() != null) { resolver.setCharacterEncoding(this.properties.getEncoding().name()); } resolver.setCacheable(this.properties.isCache()); Integer order = this.properties.getTemplateResolverOrder(); if (order != null) { resolver.setOrder(order); } resolver.setCheckExistence(this.properties.isCheckTemplate()); return resolver;

  1. > 用来解析和读取配置文件,里面有我们的模拟的后缀以及路径,Thymeleaf的视图解析器依然是依赖它知道的配置信息,有了Context和TemplateResolver万事具备,只差渲染了,TemplateEngine调用process方法,模板引擎依靠context拿到数据,依靠templateResolver拿到配置信息,第三个参数是输出流,也就是我们的目标文件.
  3. 查看ThymeleafAutoConfiguration底层原码，可以看出，系统启动时会自动注入TemplateEngine<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/22202252/1628251221786-eabfe334-2c8a-4336-a35b-3f62c320b47b.png#clientId=u0e0497ad-54ca-4&from=paste&height=248&id=u4de5a243&margin=%5Bobject%20Object%5D&name=image.png&originHeight=495&originWidth=1519&originalType=binary&ratio=1&size=126326&status=done&style=none&taskId=u05bd6294-db56-4aa2-99a9-a79603a6593&width=759.5)
  4. <a name="xlO43"></a>
  5. ### 2.1 实现页面静态化：
  6. <a name="g9qFC"></a>
  7. #### 2.1.1 windows下安装nginx，如下图：
  8. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/22202252/1628251333507-01311b72-aa8d-458c-9f14-2f43a70e59bf.png#clientId=u0e0497ad-54ca-4&from=paste&height=242&id=uc6efd32f&margin=%5Bobject%20Object%5D&name=image.png&originHeight=274&originWidth=844&originalType=binary&ratio=1&size=26269&status=done&style=shadow&taskId=uebd48cc9-2918-47fd-a316-338aefe848b&width=744)<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/22202252/1628251370439-177fd04d-2bd1-478e-b17a-4185cd377c64.png#clientId=u0e0497ad-54ca-4&from=paste&height=223&id=u32ca081d&margin=%5Bobject%20Object%5D&name=image.png&originHeight=257&originWidth=860&originalType=binary&ratio=1&size=18897&status=done&style=shadow&taskId=u4c1849b0-4ac3-42d4-a713-eda94020460&width=745)
  9. > 注：
  10. > 复制项目资料中的首页/中的静态资源到上图位置。
  12. <a name="F9tMm"></a>
  13. ### 2.2 新建工程zyg-page-interface与zyg-page-service
  14. > 注：
  15. > 按照正常流程创建。
  17. <a name="GOXgS"></a>
  18. #### 2.2.1 zyg-page-interface工程下的pom.xml文件：
  19. ```xml
  20.  <dependencies>
  21.         <dependency>
  22.             <groupId>com.zelin</groupId>
  23.             <artifactId>zyg-pojo</artifactId>
  24.             <version>2.0</version>
  25.         </dependency>
  26.     </dependencies>

2.2.2 zyg-page-service工程下的pom.xml文件：

  1.  <dependencies>
  2.         <dependency>
  3.             <groupId>org.springframework.boot</groupId>
  4.             <artifactId>spring-boot-starter-web</artifactId>
  5.         </dependency>
  6.         <dependency>
  7.             <groupId>com.zelin</groupId>
  8.             <artifactId>zyg-page-interface</artifactId>
  9.             <version>2.0</version>
  10.         </dependency>
  11.         <dependency>
  12.             <groupId>com.zelin</groupId>
  13.             <artifactId>zyg-dao</artifactId>
  14.             <version>2.0</version>
  15.         </dependency>
  16.         <!--1. 引入thymeleaf-->
  17.         <dependency>
  18.             <groupId>org.springframework.boot</groupId>
  19.             <artifactId>spring-boot-starter-thymeleaf</artifactId>
  20.         </dependency>
  21.     </dependencies>

2.2.3 zyg-page-service工程下的application.yml文件如下：

  1. server:
  2.   port: 7004
  4. logging:
  5.   level:
  6.     com.zelin: debug
  7. spring:
  8.   dubbo:
  9.     application:
  10.       name: zyg-page-service
  11.     registry:
  12.       address: zookeeper://192.168.56.10:2181
  13.     base-package: com.zelin.page.service
  14.     protocol:
  15.       name: dubbo
  16.       port: 21884
  17.   thymeleaf:
  18.     cache: false

2.2.4 复制项目资料首页下的item.html到zyg-page-service中的resources/templates目录下：

image.png

2.3 修改linux下的/mydata/nginx/conf/nginx.conf配置文件，添加上游服务器：

image.png

2.4 增加/mydata/nginx/conf/conf.d/zeyigou.conf如下配置：

  1. server {
  2.     listen       80;
  3.     server_name  manager.zeyigou.com;
  5.     location / {
  6.     proxy_pass http://manager;
  7.     proxy_set_header Host $host:$server_port;
  8.     }
  10.     include /etc/nginx/static.conf;
  11. }

2.5 利用switchHost工具添加域名映射：

image.png

2.6 在zyg-manager-web工程下的goodsController中添加如下方法：

  1.  /**
  2.      * 功能: 根据商品id生成商品静态面
  3.      * 参数:
  4.      * 返回值:
  5.      * 时间: 2021/8/6 14:31
  6.      */
  7.     @RequestMapping("/item")
  8.     public void createHtml(Long goodsId) throws IOException {
  9.         pageSerivce.createHtml(goodsId);
  10.     }

2.7 在zyg-page-service工程添加createHtml方法：

  1. /**
  2.  * ------------------------------
  3.  * 功能：
  4.  * 作者：WF
  5.  * 微信：hbxfwf13590332912
  6.  * 创建时间：2021/8/6-14:37
  7.  * ------------------------------
  8.  */
  9. @Service
  10. public class PageServiceImpl implements PageSerivce {
  12.     //1. 引入模板引擎
  13.     @Autowired
  14.     private TemplateEngine engine;
  15.     //2. 引入其它mapper
  16.     @Autowired
  17.     private GoodsDao goodsDao;
  18.     @Autowired
  19.     private GoodsDescDao goodsDescDao;
  20.     @Autowired
  21.     private ItemDao itemDao;
  22.     /**
  23.      * 功能: 根据spu商品id生成静态页面
  24.      * 参数:
  25.      * 返回值: void
  26.      * 时间: 2021/8/6 14:37
  27.      */
  28.     @Override
  29.     public void createHtml(Long goodsId) throws IOException {
  30.         //1. 定义模板工作的上下文环境对象
  31.         Context context = new Context();
  32.         //2. 定义存放商品数据的集合
  33.         Map<String, Object> goodsMap = new HashMap<>();
  35.         //4. 向集合中添加内容
  36.         //4.1 查询spu商品信息
  37.         GoodsEntity goodsEntity = goodsDao.selectById(goodsId);
  38.         //4.2 查询商品描述信息
  39.         GoodsDescEntity goodsDescEntity = goodsDescDao.selectById(goodsId);
  40.         //4.3 查询sku商品列表
  41.         QueryWrapper<ItemEntity> itemQueryWrapper = new QueryWrapper<ItemEntity>().eq("goods_id", goodsId)
  42.                                                                 .orderByDesc("is_default");
  43.         List<ItemEntity> items = itemDao.selectList(itemQueryWrapper);
  44.         //4.4 处理ItemEntity中的spec字符串为Map对象
  45.         for (ItemEntity item : items) {
  46.             String spec = item.getSpec();
  47.             Map map = JSON.parseObject(spec, Map.class);
  48.             item.setSpecMap(map);
  49.         }
  50.         //4.5 重新组织数据
  51.         List<Map> itemImages = JSON.parseArray(goodsDescEntity.getItemImages(), Map.class);
  52.         List<Map> customAttributeItems = JSON.parseArray(goodsDescEntity.getCustomAttributeItems(), Map.class);
  53.         List<Map> specificationItems = JSON.parseArray(goodsDescEntity.getSpecificationItems(), Map.class);
  55.         //将商品信息放到map中
  56.         goodsMap.put("goods",goodsEntity);
  57.         goodsMap.put("itemImages",itemImages);
  58.         goodsMap.put("customAttributeItems",customAttributeItems);
  59.         goodsMap.put("specificationItems",specificationItems);
  60.         goodsMap.put("goodsDesc",goodsDescEntity);
  61.         goodsMap.put("items",items);
  64.         //3. 绑定集合
  65.         context.setVariables(goodsMap);
  67.         //定义要输出的文件流
  68.         File file = new File("D:\\nginx-1.8.0\\html\\item\\" + goodsId + ".html");
  69.         Writer writer = new FileWriter(file);
  71.         //执行相关操作
  72.         engine.process("item",context,writer);
  73.     }
  74. }

2.8 在zyg-page-service工程resources/template/item.html中内容：

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  7.     <title>产品详情页</title>
  8.      <link rel="icon" href="assets/img/favicon.ico">
  10.     <link rel="stylesheet" type="text/css" href="css/webbase.css" />
  11.     <link rel="stylesheet" type="text/css" href="css/pages-item.css" />
  12.     <link rel="stylesheet" type="text/css" href="css/pages-zoom.css" />
  13.     <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css" />
  14.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  15. </head>
  17. <script th:inline="javascript">
  18.     //1. 得到sku商品列表
  19.     let skuList = [[${items}]];
  20.     //2. 开始得到默认sku商品的specMap值
  21.     let items = JSON.parse(JSON.stringify(skuList[0].specMap));
  22.     //3. 得到商品规格信息
  23.     function addMyClass(attrName,attrValue,specIndex,optionIndex){
  24.         let flag = false;
  25.         //3.1 遍历skuList判断是否其中的attrName与attrValue与传入的值相等
  26.         skuList.forEach(sku=>{
  27.             if(sku.specMap[attrName] == attrValue){
  28.                 flag = true;
  29.             }
  30.         })
  31.         //3.2 清空原来的规格格式
  32.         $("#spec" + specIndex + " a").removeClass("selected");
  33.         //3.3 设置选中项的样式
  34.         if(flag){
  35.             $("#spec"+specIndex + optionIndex).addClass("selected");
  36.         }
  38.         //3.4 点击了规格选项后，动态修改各个商品参数的值
  39.         //3.4.1 动态为当前选择的对象赋值
  40.         items[attrName] = attrValue;
  41.         //3.4.2 根据当前用户点击得到的规格名称及规格选项参数得到规格对象
  42.         let sku = selectSpec(items);
  43.         //3.4.3 为商品标题设置值
  44.         $("#title").html(sku.title);
  45.         $("#price").html(sku.price);
  46.     }
  47.     //比较两个对象是否相等
  48.     function matchObject(map1,map2){
  49.         for(let i in map1){
  50.             if(map1[i] != map2[i]){
  51.                 return false;
  52.             }
  53.         }
  54.         for(let i in map2){
  55.             if(map2[i] != map1[i]){
  56.                 return false;
  57.             }
  58.         }
  59.         return true;
  60.     }
  61.     //判断点击规格时哪个规格是否与skuList中的某个spec是否相等
  62.     function selectSpec(specificationItems){
  63.         for(let i = 0;i < skuList.length;i++){
  64.             if(matchObject(specificationItems,skuList[i].specMap)){
  65.                  return skuList[i];
  66.             }
  67.         }
  68.     }
  69. </script>
  70. <body>
  72. <!--页面顶部 开始-->
  73. <div id="nav-bottom">
  74.     <!--顶部-->
  75.     <div class="nav-top">
  76.         <div class="top">
  77.             <div class="py-container">
  78.                 <div class="shortcut">
  79.                     <ul class="fl">
  80.                         <li class="f-item">泽易购欢迎您！</li>
  81.                         <li class="f-item">请<a href="login.html" target="_blank">登录</a>　<span><a href="register.html" target="_blank">免费注册</a></span></li>
  82.                     </ul>
  83.                     <ul class="fr">
  84.                         <li class="f-item">我的订单</li>
  85.                         <li class="f-item space"></li>
  86.                         <li class="f-item"><a href="home.html" target="_blank">我的泽易购</a></li>
  87.                         <li class="f-item space"></li>
  88.                         <li class="f-item">泽易购会员</li>
  89.                         <li class="f-item space"></li>
  90.                         <li class="f-item">企业采购</li>
  91.                         <li class="f-item space"></li>
  92.                         <li class="f-item">关注泽易购</li>
  93.                         <li class="f-item space"></li>
  94.                         <li class="f-item" id="service">
  95.                             <span>客户服务</span>
  96.                             <ul class="service">
  97.                                 <li><a href="cooperation.html" target="_blank">合作招商</a></li>
  98.                                 <li><a href="shoplogin.html" target="_blank">商家后台</a></li>
  99.                                 <li><a href="cooperation.html" target="_blank">合作招商</a></li>
  100.                                 <li><a href="#">商家后台</a></li>
  101.                             </ul>
  102.                         </li>
  103.                         <li class="f-item space"></li>
  104.                         <li class="f-item">网站导航</li>
  105.                     </ul>
  106.                 </div>
  107.             </div>
  108.         </div>
  110.         <!--头部-->
  111.         <div class="header">
  112.             <div class="py-container">
  113.                 <div class="yui3-g Logo">
  114.                     <div class="yui3-u Left logoArea">
  115.                         <a class="logo-bd" title="泽易购" href="JD-index.html" target="_blank"></a>
  116.                     </div>
  117.                     <div class="yui3-u Center searchArea">
  118.                         <div class="search">
  119.                             <form action="" class="sui-form form-inline">
  120.                                 <!--searchAutoComplete-->
  121.                                 <div class="input-append">
  122.                                     <input type="text" id="autocomplete" class="input-error input-xxlarge" />
  123.                                     <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
  124.                                 </div>
  125.                             </form>
  126.                         </div>
  127.                         <div class="hotwords">
  128.                             <ul>
  129.                                 <li class="f-item">泽易购首发</li>
  130.                                 <li class="f-item">亿元优惠</li>
  131.                                 <li class="f-item">9.9元团购</li>
  132.                                 <li class="f-item">每满99减30</li>
  133.                                 <li class="f-item">亿元优惠</li>
  134.                                 <li class="f-item">9.9元团购</li>
  135.                                 <li class="f-item">办公用品</li>
  137.                             </ul>
  138.                         </div>
  139.                     </div>
  140.                     <div class="yui3-u Right shopArea">
  141.                         <div class="fr shopcar">
  142.                             <div class="show-shopcar" id="shopcar">
  143.                                 <span class="car"></span>
  144.                                 <a class="sui-btn btn-default btn-xlarge" href="cart.html" target="_blank">
  145.                                     <span>我的购物车</span>
  146.                                     <i class="shopnum">0</i>
  147.                                 </a>
  148.                                 <div class="clearfix shopcarlist" id="shopcarlist" style="display:none">
  149.                                     <p>"啊哦，你的购物车还没有商品哦！"</p>
  150.                                     <p>"啊哦，你的购物车还没有商品哦！"</p>
  151.                                 </div>
  152.                             </div>
  153.                         </div>
  154.                     </div>
  155.                 </div>
  157.                 <div class="yui3-g NavList">
  158.                     <div class="yui3-u Left all-sort">
  159.                         <h4>全部商品分类</h4>
  160.                     </div>
  161.                     <div class="yui3-u Center navArea">
  162.                         <ul class="nav">
  163.                             <li class="f-item">服装城</li>
  164.                             <li class="f-item">美妆馆</li>
  165.                             <li class="f-item">品优超市</li>
  166.                             <li class="f-item">全球购</li>
  167.                             <li class="f-item">闪购</li>
  168.                             <li class="f-item">团购</li>
  169.                             <li class="f-item">有趣</li>
  170.                             <li class="f-item"><a href="seckill-index.html" target="_blank">秒杀</a></li>
  171.                         </ul>
  172.                     </div>
  173.                     <div class="yui3-u Right"></div>
  174.                 </div>
  175.             </div>
  176.         </div>
  177.     </div>
  178. </div>
  179. <!--页面顶部 结束-->
  180.     <div class="py-container">
  181.         <div id="item">
  182.             <div class="crumb-wrap">
  183.                 <ul class="sui-breadcrumb">
  184.                     <li>
  185.                         <a href="#">手机、数码、通讯</a>
  186.                     </li>
  187.                     <li>
  188.                         <a href="#">手机</a>
  189.                     </li>
  190.                     <li>
  191.                         <a href="#">Apple苹果</a>
  192.                     </li>
  193.                     <li class="active">iphone 6S系类</li>
  194.                 </ul>
  195.             </div>
  196.             <!--product-info-->
  197.             <div class="product-info">
  198.                 <div class="fl preview-wrap">
  199.                     <!--放大镜效果-->
  200.                     <div class="zoom">
  201.                         <!--默认第一个预览-->
  202.                         <div id="preview" class="spec-preview">
  203.                             <span class="jqzoom">
  204.                                 <img th:jqimg="${itemImages[0].url}" th:src="${itemImages[0].url}" /></span>
  205.                         </div>
  206.                         <!--下方的缩略图-->
  207.                         <div class="spec-scroll">
  208.                             <a class="prev">&lt;</a>
  209.                             <!--左右按钮-->
  210.                             <div class="items">
  211.                                 <ul>
  212.                                     <li th:each="img : ${itemImages}">
  213.                                         <img th:src="${img.url}" th:bimg="${img.url}" onmousemove="preview(this)" />
  214.                                     </li>
  216.                                 </ul>
  217.                             </div>
  218.                             <a class="next">&gt;</a>
  219.                         </div>
  220.                     </div>
  221.                 </div>
  222.                 <div class="fr itemInfo-wrap">
  223.                     <div class="sku-name">
  224.                         <h4 id="title">[[${items[0].title}]]</h4>
  225.                     </div>
  226.                     <div class="news"><span th:utext="${goods.caption}" id="caption">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</span></div>
  227.                     <div class="summary">
  228.                         <div class="summary-wrap">
  229.                             <div class="fl title">
  230.                                 <i>价　　格</i>
  231.                             </div>
  232.                             <div class="fl price">
  233.                                 <i>¥</i>
  234.                                 <em id="price">[[${items[0].price}]]</em>
  235.                                 <span>降价通知</span>
  236.                             </div>
  237.                             <div class="fr remark">
  238.                                 <i>累计评价</i><em>612188</em>
  239.                             </div>
  240.                         </div>
  241.                         <div class="summary-wrap">
  242.                             <div class="fl title">
  243.                                 <i>促　　销</i>
  244.                             </div>
  245.                             <div class="fl fix-width">
  246.                                 <i class="red-bg">加价购</i>
  247.                                 <em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
  248. 购热销商品</em>
  249.                             </div>
  250.                         </div>
  251.                     </div>
  252.                     <div class="support">
  253.                         <div class="summary-wrap">
  254.                             <div class="fl title">
  255.                                 <i>支　　持</i>
  256.                             </div>
  257.                             <div class="fl fix-width">
  258.                                 <em class="t-gray">以旧换新，闲置手机回收  4G套餐超值抢  礼品购</em>
  259.                             </div>
  260.                         </div>
  261.                         <div class="summary-wrap">
  262.                             <div class="fl title">
  263.                                 <i>配 送 至</i>
  264.                             </div>
  265.                             <div class="fl fix-width">
  266.                                 <em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
  267.                             </div>
  268.                         </div>
  269.                     </div>
  270.                     <div class="clearfix choose">
  271.                         <div id="specification" class="summary-wrap clearfix">
  272.                             <dl th:each="attr : ${customAttributeItems}">
  273.                                 <dt>
  274.                                     <div class="fl title">
  275.                                     <i>[[${attr.text}]]</i>
  276.                                 </div>
  277.                                 </dt>
  278.                                 <dd>
  279.                                     <a href="javascript:;"  >
  280.                                         [[${attr.value}]]
  281.                                         <span title="点击取消选择">&nbsp;</span>
  282.                                     </a>
  283.                                 </dd>
  285.                             </dl>
  286.                             <dl th:each="spec,specStat : ${specificationItems}" th:id="'spec' + ${specStat.index}">
  287.                                 <dt>
  288.                                     <div class="fl title">
  289.                                     <i>[[${spec.attributeName}]]</i>
  290.                                 </div>
  291.                                 </dt>
  292.                                 <dd th:each="val,stat : ${spec.attributeValue}" >
  293.                                     <a th:onclick="addMyClass([[${spec.attributeName}]],[[${val}]],[[${specStat.index}]],[[${stat.index}]])"
  294.                                        th:id="'spec' + ${specStat.index} + ${stat.index}"
  295.                                        th:class="${#maps.containsKey(items[0].specMap, spec.attributeName)
  296.                                        && #maps.containsValue(items[0].specMap, val) ? 'selected' : ''}">
  297.                                         [[${val}]]
  298.                                         <span title="点击取消选择">&nbsp;</span>
  299.                                     </a>
  300.                                 </dd>
  302.                             </dl>
  304.                         </div>
  306.                         <div class="summary-wrap">
  307.                             <div class="fl title">
  308.                                 <div class="control-group">
  309.                                     <div class="controls">
  310.                                         <input autocomplete="off" type="text" value="1" minnum="1" class="itxt" />
  311.                                         <a href="javascript:void(0)" class="increment plus">+</a>
  312.                                         <a href="javascript:void(0)" class="increment mins">-</a>
  313.                                     </div>
  314.                                 </div>
  315.                             </div>
  316.                             <div class="fl">
  317.                                 <ul class="btn-choose unstyled">
  318.                                     <li>
  319.                                         <a href="cart.html" target="_blank" class="sui-btn  btn-danger addshopcar">加入购物车</a>
  320.                                     </li>
  321.                                 </ul>
  322.                             </div>
  323.                         </div>
  324.                     </div>
  325.                 </div>
  326.             </div>
  327.             <!--product-detail-->
  328.             <div class="clearfix product-detail">
  329.                 <div class="fl aside">
  330.                     <ul class="sui-nav nav-tabs tab-wraped">
  331.                         <li class="active">
  332.                             <a href="#index" data-toggle="tab">
  333.                                 <span>相关分类</span>
  334.                             </a>
  335.                         </li>
  336.                         <li>
  337.                             <a href="#profile" data-toggle="tab">
  338.                                 <span>推荐品牌</span>
  339.                             </a>
  340.                         </li>
  341.                     </ul>
  342.                     <div class="tab-content tab-wraped">
  343.                         <div id="index" class="tab-pane active">
  344.                             <ul class="part-list unstyled">
  345.                                 <li>手机</li>
  346.                                 <li>手机壳</li>
  347.                                 <li>内存卡</li>
  348.                                 <li>Iphone配件</li>
  349.                                 <li>贴膜</li>
  350.                                 <li>手机耳机</li>
  351.                                 <li>移动电源</li>
  352.                                 <li>平板电脑</li>
  353.                             </ul>
  354.                             <ul class="goods-list unstyled">
  355.                                 <li>
  356.                                     <div class="list-wrap">
  357.                                         <div class="p-img">
  358.                                             <img src="img/_/part01.png" />
  359.                                         </div>
  360.                                         <div class="attr">
  361.                                             <em>Apple苹果iPhone 6s (A1699)</em>
  362.                                         </div>
  363.                                         <div class="price">
  364.                                             <strong>
  365.                                             <em>¥</em>
  366.                                             <i>6088.00</i>
  367.                                         </strong>
  368.                                         </div>
  369.                                         <div class="operate">
  370.                                             <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
  371.                                         </div>
  372.                                     </div>
  373.                                 </li>
  374.                                 <li>
  375.                                     <div class="list-wrap">
  376.                                         <div class="p-img">
  377.                                             <img src="img/_/part02.png" />
  378.                                         </div>
  379.                                         <div class="attr">
  380.                                             <em>Apple苹果iPhone 6s (A1699)</em>
  381.                                         </div>
  382.                                         <div class="price">
  383.                                             <strong>
  384.                                             <em>¥</em>
  385.                                             <i>6088.00</i>
  386.                                         </strong>
  387.                                         </div>
  388.                                         <div class="operate">
  389.                                             <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
  390.                                         </div>
  391.                                     </div>
  392.                                 </li>
  393.                                 <li>
  394.                                     <div class="list-wrap">
  395.                                         <div class="p-img">
  396.                                             <img src="img/_/part03.png" />
  397.                                         </div>
  398.                                         <div class="attr">
  399.                                             <em>Apple苹果iPhone 6s (A1699)</em>
  400.                                         </div>
  401.                                         <div class="price">
  402.                                             <strong>
  403.                                             <em>¥</em>
  404.                                             <i>6088.00</i>
  405.                                         </strong>
  406.                                         </div>
  407.                                         <div class="operate">
  408.                                             <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
  409.                                         </div>
  410.                                     </div>
  411.                                     <div class="list-wrap">
  412.                                         <div class="p-img">
  413.                                             <img src="img/_/part02.png" />
  414.                                         </div>
  415.                                         <div class="attr">
  416.                                             <em>Apple苹果iPhone 6s (A1699)</em>
  417.                                         </div>
  418.                                         <div class="price">
  419.                                             <strong>
  420.                                             <em>¥</em>
  421.                                             <i>6088.00</i>
  422.                                         </strong>
  423.                                         </div>
  424.                                         <div class="operate">
  425.                                             <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
  426.                                         </div>
  427.                                     </div>
  428.                                     <div class="list-wrap">
  429.                                         <div class="p-img">
  430.                                             <img src="img/_/part03.png" />
  431.                                         </div>
  432.                                         <div class="attr">
  433.                                             <em>Apple苹果iPhone 6s (A1699)</em>
  434.                                         </div>
  435.                                         <div class="price">
  436.                                             <strong>
  437.                                             <em>¥</em>
  438.                                             <i>6088.00</i>
  439.                                         </strong>
  440.                                         </div>
  441.                                         <div class="operate">
  442.                                             <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
  443.                                         </div>
  444.                                     </div>
  445.                                 </li>
  446.                             </ul>
  447.                         </div>
  448.                         <div id="profile" class="tab-pane">
  449.                             <p>推荐品牌</p>
  450.                         </div>
  451.                     </div>
  452.                 </div>
  453.                 <div class="fr detail">
  454.                     <div class="clearfix fitting">
  455.                         <h4 class="kt">选择搭配</h4>
  456.                         <div class="good-suits">
  457.                             <div class="fl master">
  458.                                 <div class="list-wrap">
  459.                                     <div class="p-img">
  460.                                         <img src="img/_/l-m01.png" />
  461.                                     </div>
  462.                                     <em>￥5299</em>
  463.                                     <i>+</i>
  464.                                 </div>
  465.                             </div>
  466.                             <div class="fl suits">
  467.                                 <ul class="suit-list">
  468.                                     <li class="">
  469.                                         <div id="">
  470.                                             <img src="img/_/dp01.png" />
  471.                                         </div>
  472.                                         <i>Feless费勒斯VR</i>
  473.                                         <label data-toggle="checkbox" class="checkbox-pretty">
  474.     <input type="checkbox"><span>39</span>
  475.   </label>
  476.                                     </li>
  477.                                     <li class="">
  478.                                         <div id=""><img src="img/_/dp02.png" /> </div>
  479.                                         <i>Feless费勒斯VR</i>
  480.                                         <label data-toggle="checkbox" class="checkbox-pretty">
  481.     <input type="checkbox"><span>50</span>
  482.   </label>
  483.                                     </li>
  484.                                     <li class="">
  485.                                         <div id=""><img src="img/_/dp03.png" /></div>
  486.                                         <i>Feless费勒斯VR</i>
  487.                                         <label data-toggle="checkbox" class="checkbox-pretty">
  488.     <input type="checkbox"><span>59</span>
  489.   </label>
  490.                                     </li>
  491.                                     <li class="">
  492.                                         <div id=""><img src="img/_/dp04.png" /></div>
  493.                                         <i>Feless费勒斯VR</i>
  494.                                         <label data-toggle="checkbox" class="checkbox-pretty">
  495.     <input type="checkbox"><span>99</span>
  496.   </label>
  497.                                     </li>
  498.                                 </ul>
  499.                             </div>
  500.                             <div class="fr result">
  501.                                 <div class="num">已选购0件商品</div>
  502.                                 <div class="price-tit"><strong>套餐价</strong></div>
  503.                                 <div class="price">￥5299</div>
  504.                                 <button class="sui-btn  btn-danger addshopcar">加入购物车</button>
  505.                             </div>
  506.                         </div>
  507.                     </div>
  508.                     <div class="tab-main intro">
  509.                         <ul class="sui-nav nav-tabs tab-wraped">
  510.                             <li class="active">
  511.                                 <a href="#one" data-toggle="tab">
  512.                                     <span>商品介绍</span>
  513.                                 </a>
  514.                             </li>
  515.                             <li>
  516.                                 <a href="#two" data-toggle="tab">
  517.                                     <span>规格与包装</span>
  518.                                 </a>
  519.                             </li>
  520.                             <li>
  521.                                 <a href="#three" data-toggle="tab">
  522.                                     <span>售后保障</span>
  523.                                 </a>
  524.                             </li>
  525.                             <li>
  526.                                 <a href="#four" data-toggle="tab">
  527.                                     <span>商品评价</span>
  528.                                 </a>
  529.                             </li>
  530.                             <li>
  531.                                 <a href="#five" data-toggle="tab">
  532.                                     <span>手机社区</span>
  533.                                 </a>
  534.                             </li>
  535.                         </ul>
  536.                         <div class="clearfix"></div>
  537.                         <div class="tab-content tab-wraped">
  538.                             <div id="one" class="tab-pane active">
  539.                                 <ul class="goods-intro unstyled" id="introduction">
  540.                                     [[${goodsDesc.introduction}]]
  541.                                 </ul>
  542.                                 <div class="intro-detail">
  543.                                     <img src="img/_/intro01.png" />
  544.                                     <img src="img/_/intro02.png" />
  545.                                     <img src="img/_/intro03.png" />
  546.                                 </div>
  547.                             </div>
  548.                             <div id="two" class="tab-pane">
  549.                                 <p id="packageList">[[${goodsDesc.packageList}]]</p>
  550.                             </div>
  551.                             <div id="three" class="tab-pane">
  552.                                 <p id="saleService">[[${goodsDesc.saleService}]]</p>
  553.                             </div>
  554.                             <div id="four" class="tab-pane">
  555.                                 <p>商品评价</p>
  556.                             </div>
  557.                             <div id="five" class="tab-pane">
  558.                                 <p>手机社区</p>
  559.                             </div>
  560.                         </div>
  561.                     </div>
  562.                 </div>
  563.             </div>
  564.             <!--like-->
  565.             <div class="clearfix"></div>
  566.             <div class="like">
  567.                 <h4 class="kt">猜你喜欢</h4>
  568.                 <div class="like-list">
  569.                     <ul class="yui3-g">
  570.                         <li class="yui3-u-1-6">
  571.                             <div class="list-wrap">
  572.                                 <div class="p-img">
  573.                                     <img src="img/_/itemlike01.png" />
  574.                                 </div>
  575.                                 <div class="attr">
  576.                                     <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
  577.                                 </div>
  578.                                 <div class="price">
  579.                                     <strong>
  580.                                             <em>¥</em>
  581.                                             <i>3699.00</i>
  582.                                         </strong>
  583.                                 </div>
  584.                                 <div class="commit">
  585.                                     <i class="command">已有6人评价</i>
  586.                                 </div>
  587.                             </div>
  588.                         </li>
  589.                         <li class="yui3-u-1-6">
  590.                             <div class="list-wrap">
  591.                                 <div class="p-img">
  592.                                     <img src="img/_/itemlike02.png" />
  593.                                 </div>
  594.                                 <div class="attr">
  595.                                     <em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
  596.                                 </div>
  597.                                 <div class="price">
  598.                                     <strong>
  599.                                             <em>¥</em>
  600.                                             <i>4388.00</i>
  601.                                         </strong>
  602.                                 </div>
  603.                                 <div class="commit">
  604.                                     <i class="command">已有700人评价</i>
  605.                                 </div>
  606.                             </div>
  607.                         </li>
  608.                         <li class="yui3-u-1-6">
  609.                             <div class="list-wrap">
  610.                                 <div class="p-img">
  611.                                     <img src="img/_/itemlike03.png" />
  612.                                 </div>
  613.                                 <div class="attr">
  614.                                     <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
  615.                                 </div>
  616.                                 <div class="price">
  617.                                     <strong>
  618.                                             <em>¥</em>
  619.                                             <i>4088.00</i>
  620.                                         </strong>
  621.                                 </div>
  622.                                 <div class="commit">
  623.                                     <i class="command">已有700人评价</i>
  624.                                 </div>
  625.                             </div>
  626.                         </li>
  627.                         <li class="yui3-u-1-6">
  628.                             <div class="list-wrap">
  629.                                 <div class="p-img">
  630.                                     <img src="img/_/itemlike04.png" />
  631.                                 </div>
  632.                                 <div class="attr">
  633.                                     <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
  634.                                 </div>
  635.                                 <div class="price">
  636.                                     <strong>
  637.                                             <em>¥</em>
  638.                                             <i>4088.00</i>
  639.                                         </strong>
  640.                                 </div>
  641.                                 <div class="commit">
  642.                                     <i class="command">已有700人评价</i>
  643.                                 </div>
  644.                             </div>
  645.                         </li>
  646.                         <li class="yui3-u-1-6">
  647.                             <div class="list-wrap">
  648.                                 <div class="p-img">
  649.                                     <img src="img/_/itemlike05.png" />
  650.                                 </div>
  651.                                 <div class="attr">
  652.                                     <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
  653.                                 </div>
  654.                                 <div class="price">
  655.                                     <strong>
  656.                                             <em>¥</em>
  657.                                             <i>4088.00</i>
  658.                                         </strong>
  659.                                 </div>
  660.                                 <div class="commit">
  661.                                     <i class="command">已有700人评价</i>
  662.                                 </div>
  663.                             </div>
  664.                         </li>
  665.                         <li class="yui3-u-1-6">
  666.                             <div class="list-wrap">
  667.                                 <div class="p-img">
  668.                                     <img src="img/_/itemlike06.png" />
  669.                                 </div>
  670.                                 <div class="attr">
  671.                                     <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
  672.                                 </div>
  673.                                 <div class="price">
  674.                                     <strong>
  675.                                             <em>¥</em>
  676.                                             <i>4088.00</i>
  677.                                         </strong>
  678.                                 </div>
  679.                                 <div class="commit">
  680.                                     <i class="command">已有700人评价</i>
  681.                                 </div>
  682.                             </div>
  683.                         </li>
  684.                     </ul>
  685.                 </div>
  686.             </div>
  687.         </div>
  688.     </div>
  689.     <!-- 底部栏位 -->
  691. <!--页面底部  开始 -->
  692. <div class="clearfix footer">
  693.     <div class="py-container">
  694.         <div class="footlink">
  695.             <div class="Mod-service">
  696.                 <ul class="Mod-Service-list">
  697.                     <li class="grid-service-item intro  intro1">
  699.                         <i class="serivce-item fl"></i>
  700.                         <div class="service-text">
  701.                             <h4>正品保障</h4>
  702.                             <p>正品保障，提供发票</p>
  703.                         </div>
  705.                     </li>
  706.                     <li class="grid-service-item  intro intro2">
  708.                         <i class="serivce-item fl"></i>
  709.                         <div class="service-text">
  710.                             <h4>正品保障</h4>
  711.                             <p>正品保障，提供发票</p>
  712.                         </div>
  714.                     </li>
  715.                     <li class="grid-service-item intro  intro3">
  717.                         <i class="serivce-item fl"></i>
  718.                         <div class="service-text">
  719.                             <h4>正品保障</h4>
  720.                             <p>正品保障，提供发票</p>
  721.                         </div>
  723.                     </li>
  724.                     <li class="grid-service-item  intro intro4">
  726.                         <i class="serivce-item fl"></i>
  727.                         <div class="service-text">
  728.                             <h4>正品保障</h4>
  729.                             <p>正品保障，提供发票</p>
  730.                         </div>
  732.                     </li>
  733.                     <li class="grid-service-item intro intro5">
  735.                         <i class="serivce-item fl"></i>
  736.                         <div class="service-text">
  737.                             <h4>正品保障</h4>
  738.                             <p>正品保障，提供发票</p>
  739.                         </div>
  741.                     </li>
  742.                 </ul>
  743.             </div>
  744.             <div class="clearfix Mod-list">
  745.                 <div class="yui3-g">
  746.                     <div class="yui3-u-1-6">
  747.                         <h4>购物指南</h4>
  748.                         <ul class="unstyled">
  749.                             <li>购物流程</li>
  750.                             <li>会员介绍</li>
  751.                             <li>生活旅行/团购</li>
  752.                             <li>常见问题</li>
  753.                             <li>购物指南</li>
  754.                         </ul>
  756.                     </div>
  757.                     <div class="yui3-u-1-6">
  758.                         <h4>配送方式</h4>
  759.                         <ul class="unstyled">
  760.                             <li>上门自提</li>
  761.                             <li>211限时达</li>
  762.                             <li>配送服务查询</li>
  763.                             <li>配送费收取标准</li>
  764.                             <li>海外配送</li>
  765.                         </ul>
  766.                     </div>
  767.                     <div class="yui3-u-1-6">
  768.                         <h4>支付方式</h4>
  769.                         <ul class="unstyled">
  770.                             <li>货到付款</li>
  771.                             <li>在线支付</li>
  772.                             <li>分期付款</li>
  773.                             <li>邮局汇款</li>
  774.                             <li>公司转账</li>
  775.                         </ul>
  776.                     </div>
  777.                     <div class="yui3-u-1-6">
  778.                         <h4>售后服务</h4>
  779.                         <ul class="unstyled">
  780.                             <li>售后政策</li>
  781.                             <li>价格保护</li>
  782.                             <li>退款说明</li>
  783.                             <li>返修/退换货</li>
  784.                             <li>取消订单</li>
  785.                         </ul>
  786.                     </div>
  787.                     <div class="yui3-u-1-6">
  788.                         <h4>特色服务</h4>
  789.                         <ul class="unstyled">
  790.                             <li>夺宝岛</li>
  791.                             <li>DIY装机</li>
  792.                             <li>延保服务</li>
  793.                             <li>泽易购E卡</li>
  794.                             <li>泽易购通信</li>
  795.                         </ul>
  796.                     </div>
  797.                     <div class="yui3-u-1-6">
  798.                         <h4>帮助中心</h4>
  799.                         <img src="img/wx_cz.jpg">
  800.                     </div>
  801.                 </div>
  802.             </div>
  803.             <div class="Mod-copyright">
  804.                 <ul class="helpLink">
  805.                     <li>关于我们<span class="space"></span></li>
  806.                     <li>联系我们<span class="space"></span></li>
  807.                     <li>关于我们<span class="space"></span></li>
  808.                     <li>商家入驻<span class="space"></span></li>
  809.                     <li>营销中心<span class="space"></span></li>
  810.                     <li>友情链接<span class="space"></span></li>
  811.                     <li>关于我们<span class="space"></span></li>
  812.                     <li>营销中心<span class="space"></span></li>
  813.                     <li>友情链接<span class="space"></span></li>
  814.                     <li>关于我们</li>
  815.                 </ul>
  816.                 <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</p>
  817.                 <p>京ICP备08001421号京公网安备110108007702</p>
  818.             </div>
  819.         </div>
  820.     </div>
  821. </div>
  824.     <!--侧栏面板开始-->
  825. <div class="J-global-toolbar">
  826.     <div class="toolbar-wrap J-wrap">
  827.         <div class="toolbar">
  828.             <div class="toolbar-panels J-panel">
  830.                 <!-- 购物车 -->
  831.                 <div style="visibility: hidden;" class="J-content toolbar-panel tbar-panel-cart toolbar-animate-out">
  832.                     <h3 class="tbar-panel-header J-panel-header">
  833.                         <a href="" class="title"><i></i><em class="title">购物车</em></a>
  834.                         <span class="close-panel J-close" onclick="cartPanelView.tbar_panel_close('cart');" ></span>
  835.                     </h3>
  836.                     <div class="tbar-panel-main">
  837.                         <div class="tbar-panel-content J-panel-content">
  838.                             <div id="J-cart-tips" class="tbar-tipbox hide">
  839.                                 <div class="tip-inner">
  840.                                     <span class="tip-text">还没有登录，登录后商品将被保存</span>
  841.                                     <a href="#none" class="tip-btn J-login">登录</a>
  842.                                 </div>
  843.                             </div>
  844.                             <div id="J-cart-render">
  845.                                 <!-- 列表 -->
  846.                                 <div id="cart-list" class="tbar-cart-list">
  847.                                 </div>
  848.                             </div>
  849.                         </div>
  850.                     </div>
  851.                     <!-- 小计 -->
  852.                     <div id="cart-footer" class="tbar-panel-footer J-panel-footer">
  853.                         <div class="tbar-checkout">
  854.                             <div class="jtc-number"> <strong class="J-count" id="cart-number">0</strong>件商品 </div>
  855.                             <div class="jtc-sum"> 共计：<strong class="J-total" id="cart-sum">¥0</strong> </div>
  856.                             <a class="jtc-btn J-btn" href="#none" target="_blank">去购物车结算</a>
  857.                         </div>
  858.                     </div>
  859.                 </div>
  861.                 <!-- 我的关注 -->
  862.                 <div style="visibility: hidden;" data-name="follow" class="J-content toolbar-panel tbar-panel-follow">
  863.                     <h3 class="tbar-panel-header J-panel-header">
  864.                         <a href="#" target="_blank" class="title"> <i></i> <em class="title">我的关注</em> </a>
  865.                         <span class="close-panel J-close" onclick="cartPanelView.tbar_panel_close('follow');"></span>
  866.                     </h3>
  867.                     <div class="tbar-panel-main">
  868.                         <div class="tbar-panel-content J-panel-content">
  869.                             <div class="tbar-tipbox2">
  870.                                 <div class="tip-inner"> <i class="i-loading"></i> </div>
  871.                             </div>
  872.                         </div>
  873.                     </div>
  874.                     <div class="tbar-panel-footer J-panel-footer"></div>
  875.                 </div>
  877.                 <!-- 我的足迹 -->
  878.                 <div style="visibility: hidden;" class="J-content toolbar-panel tbar-panel-history toolbar-animate-in">
  879.                     <h3 class="tbar-panel-header J-panel-header">
  880.                         <a href="#" target="_blank" class="title"> <i></i> <em class="title">我的足迹</em> </a>
  881.                         <span class="close-panel J-close" onclick="cartPanelView.tbar_panel_close('history');"></span>
  882.                     </h3>
  883.                     <div class="tbar-panel-main">
  884.                         <div class="tbar-panel-content J-panel-content">
  885.                             <div class="jt-history-wrap">
  886.                                 <ul>
  887.                                     <!--<li class="jth-item">
  888.                                         <a href="#" class="img-wrap"> <img src=".portal/img/like_03.png" height="100" width="100" /> </a>
  889.                                         <a class="add-cart-button" href="#" target="_blank">加入购物车</a>
  890.                                         <a href="#" target="_blank" class="price">￥498.00</a>
  891.                                     </li>
  892.                                     <li class="jth-item">
  893.                                         <a href="#" class="img-wrap"> <img src="portal/img/like_02.png" height="100" width="100" /></a>
  894.                                         <a class="add-cart-button" href="#" target="_blank">加入购物车</a>
  895.                                         <a href="#" target="_blank" class="price">￥498.00</a>
  896.                                     </li>-->
  897.                                 </ul>
  898.                                 <a href="#" class="history-bottom-more" target="_blank">查看更多足迹商品 &gt;&gt;</a>
  899.                             </div>
  900.                         </div>
  901.                     </div>
  902.                     <div class="tbar-panel-footer J-panel-footer"></div>
  903.                 </div>
  905.             </div>
  907.             <div class="toolbar-header"></div>
  909.             <!-- 侧栏按钮 -->
  910.             <div class="toolbar-tabs J-tab">
  911.                 <div onclick="cartPanelView.tabItemClick('cart')" class="toolbar-tab tbar-tab-cart" data="购物车" tag="cart" >
  912.                     <i class="tab-ico"></i>
  913.                     <em class="tab-text"></em>
  914.                     <span class="tab-sub J-count " id="tab-sub-cart-count">0</span>
  915.                 </div>
  916.                 <div onclick="cartPanelView.tabItemClick('follow')" class="toolbar-tab tbar-tab-follow" data="我的关注" tag="follow" >
  917.                     <i class="tab-ico"></i>
  918.                     <em class="tab-text"></em>
  919.                     <span class="tab-sub J-count hide">0</span>
  920.                 </div>
  921.                 <div onclick="cartPanelView.tabItemClick('history')" class="toolbar-tab tbar-tab-history" data="我的足迹" tag="history" >
  922.                     <i class="tab-ico"></i>
  923.                     <em class="tab-text"></em>
  924.                     <span class="tab-sub J-count hide">0</span>
  925.                 </div>
  926.             </div>
  928.             <div class="toolbar-footer">
  929.                 <div class="toolbar-tab tbar-tab-top" > <a href="#"> <i class="tab-ico  "></i> <em class="footer-tab-text">顶部</em> </a> </div>
  930.                 <div class="toolbar-tab tbar-tab-feedback" > <a href="#" target="_blank"> <i class="tab-ico"></i> <em class="footer-tab-text ">反馈</em> </a> </div>
  931.             </div>
  933.             <div class="toolbar-mini"></div>
  935.         </div>
  937.         <div id="J-toolbar-load-hook"></div>
  939.     </div>
  940. </div>
  942. <script type="text/template" id="tbar-cart-item-template">
  943.     <div class="tbar-cart-item" >
  944.         <div class="jtc-item-promo">
  945.             <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
  946.             <div class="promo-text">已购满600元，您可领赠品</div>
  947.         </div>
  948.         <div class="jtc-item-goods">
  949.             <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50" /></a></span>
  950.             <div class="p-name">
  951.                 <a href="#">{1}</a>
  952.             </div>
  953.             <div class="p-price"><strong>¥{3}</strong>×{4} </div>
  954.             <a href="#none" class="p-del J-del">删除</a>
  955.         </div>
  956.     </div>
  957. </script>
  961. <script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
  962. <script type="text/javascript">
  963. $(function(){
  964.     $("#service").hover(function(){
  965.         $(".service").show();
  966.     },function(){
  967.         $(".service").hide();
  968.     });
  969.     $("#shopcar").hover(function(){
  970.         $("#shopcarlist").show();
  971.     },function(){
  972.         $("#shopcarlist").hide();
  973.     });
  975. })
  976. </script>
  977. <script type="text/javascript" src="js/model/cartModel.js"></script>
  978. <script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
  979. <script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
  980. <script type="text/javascript" src="js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script>
  981. <script type="text/javascript" src="js/plugins/jquery.jqzoom/zoom.js"></script>
  982. <script type="text/javascript" src="index/index.js"></script>
  985. <!--页面底部  结束 -->
  986. </body>
  988. </html>

点击规格选项时，自动得到某个sku对象的实现思路：

image.png

2.9 最后效果如下：

image.png
image.png
image.png
image.png