SSM架构商城项目

Posted 2021-02-04 wood-life

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