码迷,mamicode.com
首页 > 其他好文 > 详细

SSM架构商城项目(十一)

时间:2019-01-19 12:12:41      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:属性   control   return   script   页面   设置   文件   功能   mod   

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架构商城项目(十一)

标签:属性   control   return   script   页面   设置   文件   功能   mod   

原文地址:https://www.cnblogs.com/wood-life/p/10290888.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!