品优购项目笔记 day17

目标

掌握跨域请求CORS解决方案
完成结算页收货人地址选择功能
完成结算页支付方式选择
完成结算页商品清单功能
完成保存订单功能

1. 商品详情页跨域请求

1. 需求分析

从商品详情页点击“加入购物车”按钮，将当前商品加入购物车，并跳转到购物车页面

2. JS跨域请求

1. 什么是域

当两个应用协议、主机地址（或域名）、端口其中有一项不同，就认为他们的域不同。

这里的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面的不同域的框架中（iframe）的数据。

3. 跨域调用测试

从page-web的itemController.js，引入$http服务，修改addToCart()方法

//添加商品到购物车
$scope.addToCart=function(){
  // alert('SKUID:'+$scope.sku.id );
  $http.get("http://localhost:9107/cart/addGoodsToCartList.do?itemId="
            +$scope.sku.id+"&num="+$scope.num).success(
    function (response) {
      if(response.success){
        location.href="http://localhost:9107/cart";
      }else{
        alert(response.message);
      }
    }
  );
}

发现无法跨域，XMLHttpRequest cannot load

4. 跨域解决方案CORS

CORS是一个w3c标准，全称为“跨域资源共享”（Cross-origin response sharing）。CORS需要浏览器和服务器同时支持。目前所有浏览器都支持，IE不能低于IE10

允许浏览器向跨源服

务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

请求过程如下：

在这里插入图片描述

Preflight Request:

在这里插入图片描述

然后服务器端给我们返回一个Preflight Response

在这里插入图片描述

下面开始让购物车工程接收跨域请求

修改cart-web的CartController.java的addGoodsToCartList方法。添加代码

response.setHeader("Access-Control-Allow-Origin", "http://localhost:9105");
response.setHeader("Access-Control-Allow-Credentials", "true");

Access-Control-Allow-Origin是HTML5定义的一种解决资源跨域的策略

用过服务器端返回带有Access-Control-Allow-Origin表示的ResponseHeader，解决资源的跨域权限问题。

在response添加Access-Control-Allow-Origin，也可以设置为*表示该资源谁都可以用

修改item-web的itemController.js

//添加商品到购物车
$scope.addToCart=function(){
  // alert('SKUID:'+$scope.sku.id );
  $http.get("http://localhost:9107/cart/addGoodsToCartList.do?itemId="
            +$scope.sku.id+"&num="+$scope.num,{"withCredentials":true}).success(
    function (response) {
      if(response.success){
        location.href="http://localhost:9107/cart";
      }else{
        alert(response.message);
      }
    }
  );
}

调用测试，可以实现跨域。

CORS请求默认不发送cookie和HTTP认证信息。如果要把cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials，另一方面，需要在ajax请求中打开withCredentials属性。

5. SpringMVC跨域注解

4.2及以上版本可以使用注解跨域。需要跨域的方法上添加注解@CrossOrigin

@CrossOrigin(orgins="http://localhost:9105",allowCredentials="true")

后面的allowCredentials="true"可以省略

2. 结算页- 收件人地址选择

1. 需求和数据库分析

1. 需求描述

在结算页实现收件人地址选择功能

2. 数据库表结构分析

Tb_address为地址表，user_id其实就是user表的username

2. 准备工作

1. 生成代码

AddressService接口拷入user-interface
AddressServiceImpl拷入user-service
cart-web引入user-interface依赖，AddressController拷入cart-web

2. 拷贝页面资源

getOrderInfo.html拷贝到cart-web的webapp下

3. 实现地址列表

1. 后端代码

修改user-interface的AddressService.java

public List<TbAddress> findListByUserId(String userId);

修改user-service的AddressServiceImpl.java

@Override
public List<TbAddress> findListByUserId(String userId) {
  TbAddressExample example = new TbAddressExample();
  Criteria criteria = example.createCriteria();
  criteria.andUserIdEqualTo(userId);
  return addressMapper.selectByExample(example);
}

修改cart-web的AddressController.java

@RequestMapping("/findListByLoginUser")
public List<TbAddress> findListByLoginUser(){
  // 获取登录用户
  String username = SecurityContextHolder.getContext().getAuthentication().getName();
  return addressService.findListByUserId(username);
}

2. 前端代码

cart-web的cartService.js

// 获取地址列表
this.findAddressList = function () {
  return $http.get('address/findListByLoginUser.do');
}

cart-web的cartController.js

// 获取当前用户的地址列表
$scope.findAddressList = function () {
  cartService.findAddressList().success(
    function (response) {
      $scope.addressList = response;
    }
  );
}

修改getOrderInfo.html

<ul class="addr-detail">
  <li class="addr-item">

    <div ng-repeat="address in addressList">
      <div class="con name "><a href="javascript:;" >{{address.contact}}<span title="点击取消选择">&nbsp;</a></div>
        <div class="con address">{{address.address}} <span>{{address.mobile}}</span>
          <span class="base" ng-if="address.isDefault=='1'">默认地址</span>
          <span class="edittext"><a data-toggle="modal" data-target=".edit" data-keyboard="false" >编辑</a>&nbsp;&nbsp;<a href="javascript:;">删除</a></span>
        </div>
        <div class="clearfix"></div>
      </div>
      </li>
</ul>

<body ng-app="pinyougou" ng-controller="cartController" ng-init="findAddressList()">

<script type="text/javascript" src="plugins/angularjs/angular.min.js">  </script>
<script type="text/javascript" src="js/base.js">  </script>
<script type="text/javascript" src="js/service/cartService.js">  </script>
<script type="text/javascript" src="js/controller/cartController.js">  </script>

4. 地址的选择

在orderInfoController.js增加代码

// 选择地址
$scope.selectAddress = function (address) {
  $scope.address = address;
}

// 判断某地址对象是不是当前选择的地址
$scope.idSelectedAddress = function (address) {
  if(address===$scope.address){
    return true;
  }else{
    return false;
  }
}

修改页面-点击选择

<div class="con name {{idSelectedAddress(address)?'selected':''}}"><a href="javascript:;" ng-click="selectAddress(address)">{{address.contact}}<span title="点击取消选择">&nbsp;</a></div>

修改页面，显示选择的地址

<div class="fc-receiverInfo">寄送至:{{address.address}} 收货人：{{address.contact}} {{address.mobile}}</div>

5. 默认地址显示

修改orderInfoController.js

// 获取当前用户的地址列表
$scope.findAddressList = function () {
  cartService.findAddressList().success(
    function (response) {
      $scope.addressList = response;
      for(var i=0;i<$scope.addressList.length;i++){
        if($scope.addressList[i].isDefault==='1'){
          $scope.address = $scope.addressList[i];
          break;
        }
      }
    }
  );
}

6. 收件人地址增删改

TODO

3. 结算页-支付方式选择

1. 需求分析

实现支付方式的选择，品优购支持两种支付方式：微信支付和货到付款

2. 支付方式的选择

1. 前端控制层

cartController.js

$scope.order = {paymentType:'1'};//订单对象

// 选择支付方式
$scope.selectPayType = function (type) {
  $scope.order.paymentType = type;
}

2. 页面

getOrderInfo.html

<li class="selected" ng-click="selectPayType('1')">微信付款<span title="点击取消选择"></span></li>
<li  ng-click="selectPayType('2')">货到付款<span title="点击取消选择"></span></li>

4. 结算页-商品清单与金额显示

1. 需求分析

显示购物车的商品清单和合计数量、金额

2. 显示商品清单

页面getOrderInfo.html上初始化调用

<body ng-app="pinyougou" ng-controller="cartController" ng-init="findAddressList();findCartList()">

循环显示商品清单

<ul class="send-detail"  ng-repeat="orderItem in cart.orderItemList">
  <li>
    <div class="sendGoods">

      <ul class="yui3-g">
        <li class="yui3-u-1-6">
          <span><img width="100px" height="100px" src="{{orderItem.picPath}}"/></span>
        </li>
        <li class="yui3-u-7-12">
          <div class="desc">{{orderItem.title}}</div>
          <div class="seven">7天无理由退货</div>
        </li>
        <li class="yui3-u-1-12">
          <div class="price">￥{{orderItem.price.toFixed(2)}}</div>
        </li>
        <li class="yui3-u-1-12">
          <div class="num">X{{orderItem.num}}</div>
        </li>
        <li class="yui3-u-1-12">
          <div class="exit">有货</div>
        </li>
      </ul>
    </div>
  </li>
</ul>

3. 显示合计金额

修改getOrderInfo.html

<div class="order-summary">
  <div class="static fr">
    <div class="list">
      <span><i class="number">{{totalValue.totalNum}}</i>件商品，总商品金额</span>
      <em class="allprice">¥{{totalValue.totalMoney.toFixed(2)}}</em>
    </div>
    <div class="list">
      <span>返现：</span>
      <em class="money">0.00</em>
    </div>
    <div class="list">
      <span>运费：</span>
      <em class="transport">0.00</em>
    </div>
  </div>
</div>
<div class="clearfix trade">
  <div class="fc-price">应付金额:　<span class="price">¥{{totalValue.totalMoney.toFixed(2)}}</span></div>

5. 保存订单

1. 需求分析

1. 需求描述

点击订单结算页的提交订单，将购物车保存到订单表和订单明细表，并将购物车数据清除。

2. 数据库表结构分析

Tb_order为订单主表

2. 准备工作

1. 搭建框架

创建order-interface 引入依赖pojo
创建order-service，参见content-service，添加各种配置，dubbox端口20888，tomcat端口9008
cart-web引入依赖order-interface

2. 生成代码

根据之前生成的user相关的代码，拷贝到工程order-interface、order-service和cart-web

3. 分布式ID生成器

为什么不让order表的主键自增？

对于互联网应用，可能某个表会占用很大的存储空间，比如订单表，每天都会生成很多订单，如果服务器的硬盘满了怎么办？

采用数据库分片，把一个数据库进行拆分，通过数据库中间件进行连接

如果采用数据自增，可能会产生重复的ID

分布式ID生成解决方案：

UUID（不用的理由：1. 太长；2. 没办法排序）
Redis（产生自增的序号主键的生成需要访问redis，对redis有依赖）
Oracle 数据库对象-序列（与表无关）只有数据库用Oracle才行
程序自己写算法（不重复）

为什么无需的UUID导致入库性能变差呢？

涉及到B+树索引的分类，关系型数据库的索引大多是B+树。

采用开源的Twitter的snowflake算法

在这里插入图片描述

第一位：占用1bit，值为0，没有实际作用
时间戳：占用41bit，精确到毫秒，总共可容纳约69年时间
工作机器id：占用10bit，高位5bit是数据中心id，低位5bit为工作节点id，最多容纳1024个节点
序列号：占用12bit，该值在同一毫秒同一节点从0开始不断累加，最多累加到4095。

雪花算法在同一毫秒最多可生成1024*4096=42万左右个id

3. 后端代码

1. 服务实现层

order-service的OrderServiceImpl.java

@Autowired
private RedisTemplate redisTemplate;

@Autowired
private IdWorker idWorker;

@Autowired
private TbOrderItemMapper orderItemMapper;

@Override
public void add(TbOrder order) {
  // 1. 从redis中提取购物车列表
  List<Cart> cartList = (List<Cart>) redisTemplate.boundHashOps("cartList").get(order.getUserId());
  // 2. 循环购物车列表添加订单

  for (Cart cart : cartList) {
    TbOrder tbOrder = new TbOrder();
    long orderId = idWorker.nextId();
    tbOrder.setOrderId(orderId);
    tbOrder.setPaymentType(order.getPaymentType());// 付款方式
    tbOrder.setStatus("1");//未付款
    tbOrder.setCreateTime(new Date());
    tbOrder.setUpdateTime(new Date());
    tbOrder.setUserId(order.getUserId());
    tbOrder.setReceiverAreaName(order.getReceiverAreaName());//收货人地址
    tbOrder.setReceiverMobile(order.getReceiverMobile());//收货人电话
    tbOrder.setReceiver(order.getReceiver());// 收货人
    tbOrder.setSourceType(order.getSourceType());//订单来源
    tbOrder.setSellerId(order.getSellerId());//商家id

    double money = 0;//合计数
    // 循环购物车中每条明细记录
    for (TbOrderItem orderItem : cart.getOrderItemList()) {
      orderItem.setId(idWorker.nextId());
      orderItem.setOrderId(orderId);//订单编号
      // 注意：商家id来自购物车
      orderItem.setSellerId(cart.getSellerId());//商家id
      orderItemMapper.insert(orderItem);
      money += orderItem.getTotalFee().doubleValue();
    }
    tbOrder.setPayment(new BigDecimal(money));//合计
    orderMapper.insert(tbOrder);
  }
  // 3. 清除redis中的购物车
  redisTemplate.boundHashOps("cartList").delete(order.getUserId());
}

记得在类上添加事务注解

在spring的配置applicationContext-service中添加idWorker

<bean id="idWorker" class="util.IdWorker">
  <!--进程id-->
  <constructor-arg index="0" value="0"/>
  <!--数据中心id-->
  <constructor-arg index="1" value="0"/>
</bean>

3. 控制层

修改cart-web的OrderController.java

修改add方法

@RequestMapping("/add")
public Result add(@RequestBody TbOrder order){

  // 获取当前登录人账号
  String username = SecurityContextHolder.getContext().getAuthentication().getName();
  order.setUserId(username);
  order.setSourceType("2");//订单来源 PC
  try {
    orderService.add(order);
    return new Result(true, "增加成功");
  } catch (Exception e) {
    e.printStackTrace();
    return new Result(false, "增加失败");
  }
}

4. 前端代码

1. 服务层

修改cart-web的cartService.js

// 提交订单
this,submitOrder = function (order) {
  return $http.post('order/add.do',order);
}

2. 控制层

修改cartController.js

// 保存订单
$scope.submitOrder = function () {

  $scope.order.receiverAreaName=$scope.address.address;
  $scope.order.receiverMobile = $scope.address.mobile;
  $scope.order.receiver = $scope.address.contact;//联系人

  cartService.submitOrder($scope.order).success(
    function (response) {
      alert(response.message);
    }
  );
}

3. 测试

最终需要跑cart-web，依赖user-service cart-service order-service

中间小bug，开始时不出现收货地址和收货手机号，发现controller写错了，receiverAreaName和receiverMobile

后来发现数据库没有存sellerid，发现sellerid应该是来自cart，写成了order

4. 完善

// 保存订单
$scope.submitOrder = function () {

  $scope.order.receiverAreaName=$scope.address.address;
  $scope.order.receiverMobile = $scope.address.mobile;
  $scope.order.receiver = $scope.address.contact;//联系人

  cartService.submitOrder($scope.order).success(
    function (response) {
      if(response.success){
        if($scope.order.paymentType==='1'){//微信支付，跳转到支付页面
          location.href="pay.html";
        }else{
          location.href="paysuccess.html";
        }
      }else{
        alert(response.message);//也可以跳转提示页面
      }

    }
  );
}