9. 顯示商品詳情頁

9.1. 分析

在靜態頁面資源中，使用product_details.html顯示商品詳情，為保證命名統一，應該先將該文件重命名為goods_details.html。

在主頁的顯示前3名電腦的js代碼中，模版代碼裏使用超鏈接跳轉到product_details.html，也應該調整相應的代碼：

<a href="goods_details.html?id=#{id}">查看詳情</a>

由於此前使用了HtmlAccessFilter攔截所有html文件，並且，設置了直接放行的白名單，此時，需要將goods_details.html也添加到白名單中，即允許沒有登錄的用戶直接訪問該頁面

accessibleHtml.add("goods_details.html");

測試：經過以上調整後，刷新主頁，點擊前3名電腦的“查看詳情”，應該可以跳轉到goods_details.html，並且，在URL中可以看到參數id。

然後，在goods_details.html中，嘗試獲取URL中的id：

<script type="text/javascript" src="../js/jquery-getUrlParam.js"></script>
<script type="text/javascript">
function loadGoodsDetails() {
    var id = $.getUrlParam("id");
    console.log("id=" + id);
}

loadGoodsDetails();
</script>
 

9.3. 顯示商品詳情頁-持久層

在接口中聲明：

Goods getGoodsById(Long id);

9.4. 顯示商品詳情頁-業務層

使用持久層的同名方法，完成後測試。

9.5. 顯示商品詳情頁-控制器層

分析根據商品id獲取某個商品的信息的請求：

請求路徑：/goods/details.do
請求類型：GET
請求參數：id=?
響應方式：ResponseResult<Goods>
是否攔截：否，無需登錄即可訪問

然後，在GoodsController類中添加處理請求的方法：

@RequestMapping("/details.do")
@ResponseBody
public ResponseResult<Goods> getDetails(
    @RequestParam("id") Long id) {
    // 調用業務層對象的getGoodsById(id)方法，並獲取返回值
    // 創建返回值對象
    // 向返回值對象的data屬性封裝數據
    // 執行返回
}
 

完成後，應該通過在瀏覽器地址欄中輸入URL執行測試：

http://localhost:8080/TeduStore/goods/details.do?id=10000017

9.6. 顯示商品詳情頁-前端頁面

function loadGoodsDetails() {
    var id = $.getUrlParam("id");
    var url = "../goods/details.do";
    var data = "id=" + id;
    $.ajax({
        "url": url,
        "data": data,
        "type": "GET",
        "dataType": "json",
        "success": function(json) {
            var goods = json.data;
            $("#goods_title").html(goods.title);
            $("#goods_item_type").html(goods.itemType);
            $("#goods_price").html("￥" + goods.price + ".00");
            $("#mImg").attr("src", ".." + goods.image);
        }
    });
}

loadGoodsDetails();

10. 加入購物車

10.1. 功能分析

購物車數據是存在於數據庫中的！則需要設計數據表：

CREATE TABLE t_cart (
    id INT AUTO_INCREMENT,
    uid INT,
    goods_id BIGINT(20),
    goods_image VARCHAR(500),
    goods_title VARCHAR(100),
    goods_price BIGINT(20),
    goods_num INT,
    created_user VARCHAR(16),
    created_time DATETIME,
    modified_user VARCHAR(16),
    modified_time DATETIME,
    PRIMARY KEY(id)
) DEFAULT CHARSET=UTF8;

然後，創建實體類com.company.store.entity.Cart。

10.2. 持久層

接口：com.company.store.mapper.CartMapper

抽象方法：Integer insert(Cart cart);

完成後，及時測試。

10.3. 業務層

接口：com.company.store.service.ICartService

抽象方法：void addToCart(Cart cart);

實現類：com.company.store.service.impl.CartServiceImpl

方法：

public void addToCart(Cart cart) { ...

private Cart insert(Cart cart) { ...

當前業務需要產生分支，即：當用戶點擊界面上的“添加到購物車”，可能需要執行insert增加，也可能需要執行update修改數量！到底執行哪一種，取決於當前用戶的購物車中是否已經存在當前商品，如果不存在，則增加，如果已經存在，則修改數量！

所以，此時需要回到持久層完成：

Integer getCountByUidAndGoodsId(
    @Param("uid") Integer uid,
    @Param("goods_id") Long goods_id);

SELECT COUNT(id) FROM t_cart WHERE uid=? AND goods_id=?

Integer changeGoodsNum(
    @Param("num") Integer num,
    @Param("uid") Integer uid,
    @Param("goods_id") Long goods_id);

UPDATE t_cart SET goods_num=goods_num + ? WHERE uid=? AND goods_id=?

完成持久層的功能後，首先，把持久層的功能也在業務層的接口中聲明，並在實現類調用同名方法來實現：

public void changeGoodsNum(Integer num,Integer uid,Long goods_id) { ...

public Integer getCountByUidAndGoodsId(Integer uid, Long goods_id) { ...

最後，在addToCart()中組合業務：

// 參數cart中必須包括uid和goods_id、商品數量
public Cart addToCart(Cart cart) {
    // 先判斷購物車是否已經存在相關數據
    // 結果=0：沒有數據：則新增
    // -- 調用insert()完成增加
    // -- 返回參數對象
    // 結果!=0：有數據：則修改數量
    // -- 調用changeGoodsNum()完成修改
    // -- 返回null
}

完成後，測試！

為了保證“新增”時，向t_cart表中插入的數據是完整的，需要調整業務層的insert()方法，在調用持久層對象執行插入之前，必須保證各字段的數據的完整性！

所以，在CartServiceImpl中，聲明：

@Autowired private IGoodsService goodsService;

然後，在insert()方法中：

private Cart insert(Cart cart) {
    Goods goods = goodsService.getGoodsById(
                    cart.getGoodsId));

    cart.setGoodsTitle(goods.get...);
    cart.setGoodsImage(goods.get...);
    cart.setGoodsPrice(goods.get...);

    Integer rows = cartMapper.insert(cart);
    // ...
}

10.4. 控制器層

創建控制器類com.company.store.controller.CartController，添加註解，繼承父類。

在控制器中添加處理請求的方法：

@RequestMapping("/add_to_cart.do")
@ResponseBody
public ResponseResult<Void> addToCart(
    HttpSession session,
    @RequestParam("goods_id") Long goodsId,
    @RequestParam("goods_num") Integer goodsNum) {
    Integer uid = ...;
    Cart cart = new Cart();
    cart.setUid(..);
    cart.setGoodsId(..);
    cart.setGoodsNum(..);
    cartService.addToCart(Cart cart);
    return new ResponseResult<Void>();
}

然後，先登錄，然後通過以下URL進行測試：

http://localhost:8080/TeduStore/cart/add_to_cart.do?goods_id=1000017&goods_num=3

SSM架構商城項目（十一）