目錄

四、細節優化

4.1 支付頁面顯示總金額

4.1.1 支付頁面

4.1.2 支付成功頁面

4.2 修改訂單號的傳遞方式

4.2.1 修改訂單提交函式

4.2.2 修改支付頁面

4.3 訂單提交時進行登入認證

4.4 本地資料刪除

4.5 購物車資料更新

4.5.1 Controller

4.5.2 Service

4.5.3 測試

4.5.4 頁面處理

四、細節優化

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;
    }

4.5.3 測試

結果：

與資料庫中的一致：

4.5.4 頁面處理