一、商品详情页与购物车对接：

1.1 新建zyg-page-web工程：

在resources/templates/item.html文件中添加如下代码：

  1.     <div class="summary-wrap">
  2.                             <div class="fl title">
  3.                                 <div class="control-group">
  4.                                     <div class="controls">
  5.                                         <input autocomplete="off" type="text" value="1" id="num" minnum="1" class="itxt" />
  6.                                         <a href="javascript:void(0)" class="increment plus">+</a>
  7.                                         <a href="javascript:void(0)" class="increment mins">-</a>
  8.                                     </div>
  9.                                 </div>
  10.                             </div>
  11.                             <div class="fl">
  12.                                 <ul class="btn-choose unstyled">
  13.                                     <li>
  14.                                         <a href="javascript:;" target="_blank"
  15.                                            class="sui-btn  btn-danger addshopcar"
  16.                                            onclick="addCart()"
  17.                                            >加入购物车</a>
  18.                                     </li>
  19.                                 </ul>
  20.                             </div>
  21.                         </div>    
  22. //添加到购物车
  23.     function addCart(){
  24.         let itemId = sku.id + "";
  25.         let num = $("#num").val();
  26.         location.href = "http://cart.zeyigou.com/cart/addCart?itemId=1420726543731773441&num="+num;
  28.     }

注意：因为我们使用了nginx处理了跨域请求，所以，这里遇不到跨域问题，后面项目中再来处理！

二、订单管理功能实现：

2.1 新建两个模块zyg-order-interface与zyg-order-service:

image.png

2.2 在zyg-cart-web工程中引入zyg-order-interface：

  2.         <dependency>
  3.             <groupId>com.zelin</groupId>
  4.             <artifactId>zyg-order-interface</artifactId>
  5.             <version>2.0</version>
  6.         </dependency>

2.3 在nginx中添加cart相关的模块：

2.3.1 在/mydata/nginx/html/static/下新建order目录，复制相关的资源：

image.png

2.3.2 在/mydata/nginx/conf/conf.d/zeyigou.conf下添加配置：

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

2.3.3 在/mydata/nginx/conf/nginx.conf下添加配置：

  1.    upstream order{
  2.         server 192.168.56.1:9008;
  3.     }

2.4 在zyg-cart-web中的/resources/templates中添加如下文件：

image.png

2.5 在zyg-cart-web中的/resources/tempaltes中的getOrderInfo.html

【 前端提交数据方式一: 采用地址栏传参方式 】

  1. <!DOCTYPE html>
  2. <html  xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8.     <title>结算页</title>
  10.     <link rel="stylesheet" type="text/css" href="/static/order/css/webbase.css" />
  11.     <link rel="stylesheet" type="text/css" href="/static/order/css/pages-getOrderInfo.css" />
  13.     <script th:inline="javascript">
  14.         //0. 得到所有地址列表
  15.         let addressList = [[${addressList}]];
  16.         let addrs = addressList.filter(f=>f.isDefault=='1');
  17.         let url = "/order/add";
  18.         //定义方法调用的变量
  19.         let flag = false;
  20.         window.onload=function(){
  21.             setAddr(addrs[0]);
  22.         }
  23.         //1. 设置地址的勾选样式
  24.         function setStyle(address){
  25.             //1.1  取消addr-item下所有div的selected样式
  26.             $(".addr-item div").removeClass("selected");
  27.             setAddr(address)
  28.         }
  29.         function setAddr(address) {
  30.             url = "/order/add";
  31.             //1.1 在最下面的地址栏显示地址信息
  32.             let addr = "寄送至:" + address.address + " 收货人:" + address.contact + " " + address.mobile;
  33.             $("#address").html(addr);
  34.             //1.2 为url连接字符串
  35.             url += "?receiverAreaName="+address.address;
  36.             url += "&receiverMobile="+address.mobile;
  37.             url += "&receiver="+address.contact;
  38.             //1.3 如果setPaymentType()方法未调用，我们调用一次
  39.             if(!flag){
  40.                 setPaymentType(1);
  41.             }
  43.         }
  44.         //设置paymentType的值
  45.         function setPaymentType(type){
  46.             if(url.indexOf("paymentType") == -1){
  47.                 url += "&paymentType=" + type;
  48.             }
  49.             flag = true;
  51.         }
  52.         //提交订单
  53.         function submitOrder(){
  54.             let ser = $("#form1").serialize();
  55.             console.log("ser:",ser)
  56.             console.log("url:",url);
  58.             //1. 提交表单
  59.             location.href = url;
  61.         }
  62.     </script>
  63. </head>
  65. <body>
  66.     <!--head-->
  67.     <div class="top">
  68.         <div class="py-container">
  69.             <div class="shortcut">
  70.                 <ul class="fl">
  71.                     <li class="f-item">泽易购欢迎您！</li>
  72.                     <li class="f-item">请登录　<span><a href="#">免费注册</a></span></li>
  73.                 </ul>
  74.                 <ul class="fr">
  75.                     <li class="f-item">我的订单</li>
  76.                     <li class="f-item space"></li>
  77.                     <li class="f-item">我的泽易购</li>
  78.                     <li class="f-item space"></li>
  79.                     <li class="f-item">泽易购会员</li>
  80.                     <li class="f-item space"></li>
  81.                     <li class="f-item">企业采购</li>
  82.                     <li class="f-item space"></li>
  83.                     <li class="f-item">关注泽易购</li>
  84.                     <li class="f-item space"></li>
  85.                     <li class="f-item">客户服务</li>
  86.                     <li class="f-item space"></li>
  87.                     <li class="f-item">网站导航</li>
  88.                 </ul>
  89.             </div>
  90.         </div>
  91.     </div>
  92.     <div class="cart py-container">
  93.         <!--logoArea-->
  94.         <div class="logoArea">
  95.             <div class="fl logo"><span class="title">结算页</span></div>
  96.             <div class="fr search">
  97.                 <form class="sui-form form-inline">
  98.                     <div class="input-append">
  99.                         <input type="text"  class="input-error input-xxlarge" placeholder="泽易购自营" />
  100.                         <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
  101.                     </div>
  102.                 </form>
  103.             </div>
  104.         </div>
  105.         <!--主内容-->
  106.         <div class="checkout py-container">
  107.             <div class="checkout-tit">
  108.                 <h4 class="tit-txt">填写并核对订单信息</h4>
  109.             </div>
  110.             <div class="checkout-steps">
  111.                 <!--收件人信息-->
  112.                 <div class="step-tit">
  113.                     <h5>收件人信息<span><a data-toggle="modal" data-target=".edit" data-keyboard="false" class="newadd">新增收货地址</a></span></h5>
  114.                 </div>
  115.                 <div class="step-cont">
  116.                     <div class="addressInfo">
  117.                         <ul class="addr-detail">
  118.                             <li class="addr-item">
  120.                               <div th:each="address : ${addressList}">
  121.                                 <div th:class=" ${address.isDefault=='1'}?'con name selected':'con name'">
  122.                                     <a href="javascript:;" th:onclick="setStyle([[${address}]])">[[${address.contact}]]<span title="点击取消选择">&nbsp;</a></div>
  123.                                 <div class="con address">[[${address.contact}]] [[${address.address}]] <span>[[${address.mobile}]]</span>
  124.                                     <span class="base" th:if="${address.isDefault=='1'}">默认地址</span>
  125.                                     <span class="edittext"><a data-toggle="modal" data-target=".edit" data-keyboard="false" >编辑</a>&nbsp;&nbsp;<a href="/static/order/javascript:;">删除</a></span>
  126.                                 </div>
  127.                                 <div class="clearfix"></div>
  128.                               </div>
  130.                             </li>
  133.                         </ul>
  134.                         <!--添加地址-->
  135.                           <div  tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade edit">
  136.                           <div class="modal-dialog">
  137.                             <div class="modal-content">
  138.                               <div class="modal-header">
  139.                                 <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
  140.                                 <h4 id="myModalLabel" class="modal-title">添加收货地址</h4>
  141.                               </div>
  142.                               <div class="modal-body">
  143.                                   <form action="" class="sui-form form-horizontal">
  144.                                        <div class="control-group">
  145.                                         <label class="control-label">收货人：</label>
  146.                                         <div class="controls">
  147.                                           <input type="text" class="input-medium">
  148.                                         </div>
  149.                                       </div>
  151.                                        <div class="control-group">
  152.                                         <label class="control-label">详细地址：</label>
  153.                                         <div class="controls">
  154.                                           <input type="text" class="input-large">
  155.                                         </div>
  156.                                       </div>
  157.                                        <div class="control-group">
  158.                                         <label class="control-label">联系电话：</label>
  159.                                         <div class="controls">
  160.                                           <input type="text" class="input-medium">
  161.                                         </div>
  162.                                       </div>
  163.                                        <div class="control-group">
  164.                                         <label class="control-label">邮箱：</label>
  165.                                         <div class="controls">
  166.                                           <input type="text" class="input-medium">
  167.                                         </div>
  168.                                       </div>
  169.                                        <div class="control-group">
  170.                                         <label class="control-label">地址别名：</label>
  171.                                         <div class="controls">
  172.                                           <input type="text" class="input-medium">
  173.                                         </div>
  174.                                         <div class="othername">
  175.                                             建议填写常用地址：<a href="#" class="sui-btn btn-default">家里</a>　<a href="#" class="sui-btn btn-default">父母家</a>　<a href="#" class="sui-btn btn-default">公司</a>
  176.                                         </div>
  177.                                       </div>
  179.                                   </form>
  182.                               </div>
  183.                               <div class="modal-footer">
  184.                                 <button type="button" data-ok="modal" class="sui-btn btn-primary btn-large">确定</button>
  185.                                 <button type="button" data-dismiss="modal" class="sui-btn btn-default btn-large">取消</button>
  186.                               </div>
  187.                             </div>
  188.                           </div>
  189.                         </div>
  190.                          <!--确认地址-->
  191.                     </div>
  192.                     <div class="hr"></div>
  194.                 </div>
  195.                 <div class="hr"></div>
  196.                 <!--支付和送货-->
  197.                 <div class="payshipInfo">
  198.                     <div class="step-tit">
  199.                         <h5>支付方式</h5>
  200.                     </div>
  201.                     <div class="step-cont">
  202.                         <ul class="payType">
  203.                             <li class="selected" onclick="setPaymentType(1)">微信付款<span title="点击取消选择"></span></li>
  204.                             <li  onclick="setPaymentType(2)">货到付款<span title="点击取消选择"></span></li>
  205.                         </ul>
  206.                     </div>
  207.                     <div class="hr"></div>
  208.                     <div class="step-tit">
  209.                         <h5>送货清单</h5>
  210.                     </div>
  211.                     <div class="step-cont">
  212.                         <ul class="send-detail">
  213.                             <li th:each="cart : ${cartList}">
  215.                                 <div class="sendGoods">
  216.                                     <span th:text="${cart.sellerName}" style="padding:5px 10px;background-color: red;color:white"></span>
  217.                                     <ul class="yui3-g" th:each="item :  ${cart.orderItemList}">
  218.                                         <li class="yui3-u-1-6">
  219.                                             <span><img th:src="${item.picPath}"/></span>
  220.                                         </li>
  221.                                         <li class="yui3-u-7-12">
  222.                                             <div class="desc" th:text="${item.title}"></div>
  223.                                             <div class="seven">7天无理由退货</div>
  224.                                         </li>
  225.                                         <li class="yui3-u-1-12">
  226.                                             <div class="price" th:text="${item.price}">￥5399.00</div>
  227.                                         </li>
  228.                                         <li class="yui3-u-1-12">
  229.                                             <div class="num">X[[${item.num}]]</div>
  230.                                         </li>
  231.                                         <li class="yui3-u-1-12">
  232.                                             <div class="exit">有货</div>
  233.                                         </li>
  234.                                     </ul>
  235.                                 </div>
  236.                             </li>
  237.                             <li>aa</li>
  238.                             <li>bb</li>
  239.                         </ul>
  240.                     </div>
  241.                     <div class="hr"></div>
  242.                 </div>
  243.                 <div class="linkInfo">
  244.                     <div class="step-tit">
  245.                         <h5>发票信息</h5>
  246.                     </div>
  247.                     <div class="step-cont">
  248.                         <span>普通发票（电子）</span>
  249.                         <span>个人</span>
  250.                         <span>明细</span>
  251.                     </div>
  252.                 </div>
  253.                 <div class="cardInfo">
  254.                     <div class="step-tit">
  255.                         <h5>使用优惠/抵用</h5>
  256.                     </div>
  257.                 </div>
  258.             </div>
  259.         </div>
  260.         <div class="order-summary">
  261.             <div class="static fr">
  262.                 <div class="list">
  263.                     <span><i class="number">1</i>件商品，总商品金额</span>
  264.                     <em class="allprice">¥5399.00</em>
  265.                 </div>
  266.                 <div class="list">
  267.                     <span>返现：</span>
  268.                     <em class="money">0.00</em>
  269.                 </div>
  270.                 <div class="list">
  271.                     <span>运费：</span>
  272.                     <em class="transport">0.00</em>
  273.                 </div>
  274.             </div>
  275.         </div>
  276.         <div class="clearfix trade">
  277.             <div class="fc-price">应付金额:　<span class="price">¥5399.00</span></div>
  278.             <div class="fc-receiverInfo" id="address">寄送至:</div>
  279.         </div>
  281.         <div class="submit">
  282.             <a class="sui-btn btn-danger btn-xlarge" href="javascript:void(0)" onclick="submitOrder()">提交订单</a>
  283.         </div>
  284.     </div>
  285.     <!-- 底部栏位 -->
  286.     ...

【 前端提交数据方式二: 采用表单隐藏域方式 】

  1. <script th:inline="javascript">
  2.         //0. 得到所有地址列表
  3.         let addressList = [[${addressList}]];
  4.         let addrs = addressList.filter(f=>f.isDefault=='1');
  5.         let url = "/order/add";
  6.         //定义方法调用的变量
  7.         let flag = false;
  8.         window.onload=function(){
  9.             setAddr2(addrs[0])
  10.         }
  11.         //1. 设置地址的勾选样式
  12.         function setStyle(address){
  13.             //1.1  取消addr-item下所有div的selected样式
  14.             $(".addr-item div").removeClass("selected");
  15.             setAddr2(address)
  16.         }
  18.         //设置提交数据方式二：直接为表单隐藏域赋值
  19.         function setAddr2(address){
  20.             //2.1 在最下面的地址栏显示地址信息
  21.             let addr = "寄送至:" + address.address + " 收货人:" + address.contact + " " + address.mobile;
  22.             $("#address").html(addr);
  23.             //2.2 为表单隐藏域赋值
  24.             $("#receiverAreaName").val(address.address);
  25.             $("#receiverMobile").val(address.mobile);
  26.             $("#receiver").val(address.contact);
  27.         }
  28.         //设置paymentType的值
  29.         function setPaymentType(type){
  30.              $("#paymentType").val(type);
  32.         }
  33.         //提交订单
  34.         function submitOrder(){
  35.             let ser = $("#form1").serialize();
  36.             console.log("ser:",ser)
  37.             console.log("url:",url);
  39.             //1. 提交表单
  40.             location.href = url;
  42.         }
  43.     </script>
  45. <form action="/order/add" th:action="@{/order/add}" method="post" id="form1">
  46.     <input type="hidden" name="receiverAreaName" id="receiverAreaName">
  47.     <input type="hidden" name="receiverMobile"  id="receiverMobile">
  48.     <input type="hidden" name="receiver"  id="receiver">
  49.     <input type="hidden" name="paymentType"  id="paymentType" value="1">
  50. </form>
  51. <div class="step-cont">
  52.   <ul class="payType">
  53.     <li class="selected" onclick="setPaymentType2(1)">微信付款<span title="点击取消选择"></span></li>
  54.     <li  onclick="setPaymentType2(2)">货到付款<span title="点击取消选择"></span></li>
  55.   </ul>
  56. </div>

注意：这里表单 的action一定要用th:action的形式，否则，报错，原因是： CsrfFilter与Rest服务Post方式的矛盾： 只有GET|HEAD|TRACE|OPTIONS这4类方法会被放行，其它Method的http请求，都要验证_csrf的token是否正确，而通常post方式调用rest服务时，又没有_csrf的token，所以校验失败。 具体解决方案，参考：https://blog.csdn.net/wangmate/article/details/106198947

2.6 在zyg-cart-web中的orderController中添加方法：

  1.  /**
  2.      * 功能: 提交订单
  3.      * 参数:
  4.      * 返回值: java.lang.String
  5.      * 时间: 2021/8/14 16:44
  6.      */
  7.     @Transactional
  8.     @RequestMapping("/add")
  9.     public String add(OrderEntity order){
  10.         System.out.println("order = " + order);
  11.         //1.1 得到订单址列表
  12.         //① 获取登录名
  13.         String name = SecurityContextHolder.getContext().getAuthentication().getName();
  14.         //② 为订单对象设置属性
  15.         order.setSourceType("2");
  16.         order.setUserId(name);
  17.         orderService.add(order);
  18.         return "pay";
  19.     }

2.7 在zyg-order-service中添加如下方法：

  1.  /**
  2.      * 功能: 提交订单
  3.      * 参数:
  4.      * 返回值: void
  5.      * 时间: 2021/8/14 16:44
  6.      */
  7.     @Override
  8.     public void add(OrderEntity order) {
  9.         //1. 得到购物车列表的字符串
  10.         String cartStr = redisTemplate.opsForValue().get(order.getUserId());
  11.         //2. 转换为List<Cart>对象并返回
  12.         List<Cart> cartList = null;
  13.         if(StringUtils.isNotBlank(cartStr)){
  14.              cartList = JSON.parseArray(cartStr,Cart.class);
  15.         }
  16.         //3. 添加订单(一个购物车对应一个订单)
  17.         for (Cart cart : cartList) {
  18.             //3.1 定义订单对象
  19.             OrderEntity orderEntity = new OrderEntity();
  20.             //3.2 生成订单id主键
  21.             long id = idWorker.nextId();
  22.             orderEntity.setOrderId(id);
  23.             //3.3 设置订单的其它相关属性
  24.             orderEntity.setCreateTime(new Date());
  25.             orderEntity.setPaymentType(order.getPaymentType());
  26.             orderEntity.setReceiver(order.getReceiver());
  27.             orderEntity.setReceiverAreaName(order.getReceiverAreaName());
  28.             orderEntity.setReceiverMobile(order.getReceiverMobile());
  29.             orderEntity.setSellerId(cart.getSellerId());
  30.             orderEntity.setUserId(order.getUserId());
  31.             orderEntity.setSourceType(order.getSourceType());
  32.             orderEntity.setStatus("1");     //未支付
  33.             double sum = 0; //定义订单的总金额
  34.             //3.4 得到购物车的购物项数据，向订单项表中添加此数据
  35.             for (OrderItemEntity item : cart.getOrderItemList()) {
  36.                 //3.4.1 计算小计
  37.                 BigDecimal totalFee = new BigDecimal(item.getNum() * item.getPrice().doubleValue());
  38.                 item.setTotalFee(totalFee);
  39.                 //3.4.2 累加总金额
  40.                 sum += totalFee.doubleValue();
  41.                 //3.4.3 设置订单的id
  42.                 item.setOrderId(id);
  43.                 //3.4.4 设置订单项的id
  44.                 item.setId(idWorker.nextId());
  45.                 //3.4.5 添加订单项到tb_ordeItem表
  46.                 orderItemDao.insert(item);
  47.             }
  48.             //3.5 计算此订单的总金额
  49.             orderEntity.setPayment(new BigDecimal(sum));
  50.             //3.6 添加订单
  51.             this.save(orderEntity);
  52.         }
  53.         //4. 清空redis中的购物车
  54.         //todo...
  55.     }

2.8 程序运行效果如下：

image.png