四、细节优化

4.1 支付页面显示总金额

在提交订单成功返回订单号时，随着页面跳转到支付页面的同时将计算好的总金额存入LocalStorage，然后在需要的地方进行显示

4.1.1 支付页面

加载数据时，获取总金额：

页面渲染：

4.1.2 支付成功页面

加载支付成功页面的时候先认证用户，然后读取总金额，删除本地存储。

页面渲染：

4.2 修改订单号的传递方式

将订单号放入本地存储，不再通过访问路径传递。

支付成功，将LocalStorage中的订单号删掉。

支付失败还可以跳转到支付页面继续进行支付操作。

4.2.1 修改订单提交函数

4.2.2 修改支付页面

4.3 订单提交时进行登录认证

4.4 本地数据删除

支付成功后，删除本地数据，在paysuccess.html页面中进行修改：

4.5 购物车数据更新

用户支付成功后，将已付款的商品从购物车中删除。

新增接口：根据订单id查询skuId

4.5.1 Controller

请求方式：GET

请求参数：/skuId/id

返回结果：商品编号集合

    /**
     * 根据订单id查询其包含的skuId
     * @param id
     * @return
     */
    @GetMapping("skuId/{id}")
    @ApiOperation(value = "根据订单号查询其包含的所有商品ID",notes = "查询商品ID")
    @ApiImplicitParam(name = "id",value = "订单编号",type = "Long")
    @ApiResponses({
            @ApiResponse(code = 200,message = "商品订单号集合"),
            @ApiResponse(code = 404,message = "没有找到对应的订单号集合"),
            @ApiResponse(code = 500,message = "服务器异常")
    })
    public ResponseEntity<List<Long>> querySkuIdByOrderId(@PathVariable("id") Long id){
        List<Long> longList = this.orderService.querySkuIdByOrderId(id);
        if (longList == null || longList.size() == 0){
            return ResponseEntity.status(HttpStatus.NOT_FOUND).build();
        }
        return ResponseEntity.ok(longList);
    }

4.5.2 Service

接口

实现

    /**
     * 根据订单号查询商品id
     * @param id
     * @return
     */
    @Override
    public List<Long> querySkuIdByOrderId(Long id) {
        Example example = new Example(OrderDetail.class);
        example.createCriteria().andEqualTo("orderId",id);
        List<OrderDetail> orderDetailList = this.orderDetailMapper.selectByExample(example);
        List<Long> ids = new ArrayList<>();
        orderDetailList.forEach(orderDetail -> ids.add(orderDetail.getSkuId()));
        return ids;
    }