显示购物车列表

（一）显示购物车列表（持久层）

1.规划sql

这里需要将商品表和购物车表进行连表查询

select uid,pid,cid,image,t_cart.price,t_cart.num,title,t_product.price as realprice, from t_cart left join t_product on t_cart.pid=t_product.id
where uid=?
order by t_cart.created+time desc

2.设计接口和抽象方法

在store包下创建一个vo包,在该包下面创建CartVO类,不需要继承BaseController类,那相应的就需要单独实现Serializable接口

VO全称Value Object,值对象。当进行select查询时,查询的结果属于多张表中的内容,此时发现结果集不能直接使用某个POJO实体类来接收,因为POJO实体类不能包含多表查询出来的信息,解决方式是:重新去构建一个新的对象,这个对象用于存储所查询出来的结果集对应的映射,所以把这个对象称之为值对象.

@Data
@AllArgsConstructor
@NoArgsConstructor
public class CartVo implements Serializable {
    private Integer cid;
    private Integer pid;
    private Integer uid;
    private Long price;
private Integer num;
private String title;
private String image;
private Long realPrice;
}

在CartMapper接口中添加抽象方法

    List<CartVo> findByUid(Integer uid);

在CartMapper.xml文件中添加findVOByUid()方法的映射

    <select id="findByUid" resultType="com.cy.store.vo.CartVo">
   select cid,uid,pid,t_cart.price,t_cart.num,t_product.image,
          t_product.title,t_product.price as realPrice
from t_cart left join t_product on t_product.id=t_cart.pid
where uid=#{uid}
order by t_cart.created_time desc
    </select>

（二）显示购物车列表（业务层）

1.规划异常

查询不到就返回空,不需要规划异常

2.设计接口和抽象方法及实现

在ICartService接口中添加findVOByUid()抽象方法

//显示购物车列表
    List<CartVo> getByUid(Integer uid);

在CartServiceImpl类中重写业务接口中的抽象方法

    @Override
    public List<CartVo> getByUid(Integer uid) {
        List<CartVo> cartVoList = cartMapper.findByUid(uid);
        return cartVoList;
    }

（三）显示购物车列表（控制层）

1.处理异常

业务层没有抛出异常,所以这里不需要处理异常

2.设计请求

请求路径：/carts/

请求方式：GET

请求参数：HttpSession session

响应结果：JsonResult<List< CartVO>>

3.处理请求

在CartController类中编写处理请求的代码。

@GetMapping
public JsonResult<List<CartVo>> getCartList(HttpSession session){
    Integer getuidfromsession = getuidfromsession(session);
    List<CartVo> cartVoList = cartService.getByUid(getuidfromsession);
    return new JsonResult<>(ok,cartVoList);
}

（四）显示购物车列表（前端页面）

将cart.html页面的head头标签内引入的cart.js文件注释掉(这个就是文件的功能:点击"+“,”-",“删除”,"全选"等按钮时执行相应的操作)

<!-- <script src="../js/cart.js" type="text/javascript" charset="utf-8"></script> -->

form标签的action="orderConfirm.html"属性(规定表单数据提交到哪里)和结算按钮的类型"type=submit"是必不可少的,这样点击"结算"时才能将数据传给"确认订单页"并在"确认订单页"展示选中的商品数据

当然也可以把这两个删掉,然后给结算按钮添加"type=button"然后给该按钮绑定一个点击事件实现页面跳转和数据传递,但是这样太麻烦了

在cart.html页面body标签内的script标签中编写展示购物车列表的代码

<script type="text/javascript">
    $(document).ready(function() {
    showCartList();
  });
    //展示购物车列表数据
    function showCartList() {
        $("#cart-list").empty();
        $.ajax({
            url: "/carts",
            type: "GET",
            dataType: "JSON",
            success: function(json) {
                var list = json.data;
                for (var i = 0; i < list.length; i++) {
                    var tr = '<tr>\n' +
                        '<td>\n' +
                        '<input name="cids" value="#{cid}" type="checkbox" class="ckitem" />\n' +
                        '</td>\n' +
                        '<td><img src="..#{image}collect.png" class="img-responsive" /></td>\n' +
                        '<td>#{title}#{msg}</td>\n' +
                        '<td>¥<span id="goodsPrice#{cid}">#{singlePrice}</span></td>\n' +
                        '<td>\n' +
                        '<input type="button" value="-" class="num-btn" οnclick="reduceNum(1)" />\n' +
                        '<input id="goodsCount#{cid}" type="text" size="2" readonly="readonly" class="num-text" value="#{num}">\n' +
                        '<input class="num-btn" type="button" value="+" οnclick="addNum(#{cid})" />\n' +
                        '</td>\n' +
                        '<td><span id="goodsCast#{cid}">#{totalPrice}</span></td>\n' +
                        '<td>\n' +
                        '<input type="button" οnclick="delCartItem(this)" class="cart-del btn btn-default btn-xs" value="删除" />\n' +
                        '</td>\n' +
                        '</tr>';
                    tr = tr.replaceAll(/#{cid}/g, list[i].cid);
                    tr = tr.replaceAll(/#{image}/g, list[i].image);
                    tr = tr.replaceAll(/#{title}/g, list[i].title);
                    tr = tr.replaceAll(/#{singlePrice}/g, list[i].realPrice);
                    tr = tr.replaceAll(/#{num}/g, list[i].num);
                    tr = tr.replaceAll(/#{totalPrice}/g, list[i].realPrice * list[i].num);
                    if (list[i].realPrice < list[i].price) {
                        tr = tr.replace(/#{msg}/g, "比加入时降价" + (list[i].price - list[i].realPrice) + "元");
                    } else {
                        tr = tr.replace(/#{msg}/g, "");
                    }
                    $("#cart-list").append(tr);
                }
            },
            error: function (xhr) {
                alert("加载购物车列表数据时产生未知的异常"+xhr.status);
            }
        });
    }
</script>

增加商品数量

（一）增加商品数量（持久层）

1.规划sql

查询需要操作的购物车数据信息

SELECT * FROM t_cart WHERE cid=?

2.设计接口和抽象方法

在CartMapper接口中添加抽象方法

Cart findByCid(Integer cid);

在CartMapper文件中添加findByCid(Integer cid)方法的映射

    <select id="findByCid" resultMap="CartEntityMap">
select * from t_cart where cid=#{cid}
    </select>

（二）增加商品数量（业务层）

1.规划异常

在更新时产生UpdateException未知异常,此异常类无需再次创建

可能该购物车列表数据归属不是登录的用户,抛AccessDeniedException异常,此异常类无需再次创建

要查询的数据不存在.抛出CartNotFoundException异常,创建该异常类并使其继承ServiceException

/** 购物车数据不存在的异常 */
public class CartNotFoundException extends ServiceException {
    /**重写ServiceException的所有构造方法*/
}

2.设计接口和抽象方法及实现

在业务层ICartService接口中添加addNum()抽象方法

updateNumByCid方法.参数是cid,num,String modifiedUser,Date modifiedTime

findByCid方法.参数是cid在业务层中从购物车表查询到该商品的数量,然后再和前端传过来的增加的数量进行求和得到num所以该方法的参数是cid,uid,username

//查询购物车里的信息
   Integer addNum(Integer cid,Integer uid ,String username);

该方法返回值void.这样的话就需要在前端页面加location.href使该页面自己跳转到自己,实现刷新页面(不建议,每次都加载整个页面,数据量太大了)

返回值是Integer类型.这样的话就把数据库中更新后的数量层层传给前端,前端接收后填充到控件中就可以了

在CartServiceImpl类中实现接口中的抽象方法

@Overr
    @Override
    public Integer addNum(Integer cid,Integer uid,String username) {
        Cart result = cartMapper.findByCid(cid);
        if (result==null){
            throw new CartNotFoundException("数据不存在");
        }
        Integer pid = result.getPid();
        Cart cart = cartMapper.findByUidAndPid(uid, pid);
        if (!cart.getUid().equals(uid)){
            throw new AccessDeniedException("数据访问异常");
        }
        Integer integer = cartMapper.updateNumByCid(cid, result.getNum()+1, username, new Date());
        if (integer!=1){
            throw new UpdateException("修改时产生异常");
        }
        return result.getNum()+1;
    }

（三）增加商品数量（控制层）

1.处理异常

在BaseController类中添加CartNotFoundException异常类的统一管理

else if (e instanceof CartNotFoundException) {
    result.setState(4007);
    result.setMessage("购物车表不存在该商品的异常");
}

2.设计请求

请求路径：/carts/{cid}/num/add

请求方式：post

请求参数：@PathVariable(“cid”) Integer cid, HttpSession session

响应结果JsonResult< Integer>

3.处理请求

在CartController类中添加处理请求的addNum()方法

@PostMapping("/{cid}/num/add")
    public JsonResult<Integer> addNum(@PathVariable("cid") Integer cid,HttpSession session){
    Integer getuidfromsession = getuidfromsession(session);
    String getusernamesession = getusernamesession(session);
    Integer integer = cartService.addNum(cid, getuidfromsession, getusernamesession);
    return new JsonResult<>(ok,integer);
}

（四）增加商品数量（前端页面）

1.首先确定在showCartList()函数中动态拼接的增加购物车按钮是绑定了addNum()事件，如果已经添加无需重复添加

<input class="num-btn" type="button" value="+" onclick="addNum(#{cid})" />

2.在script标签中定义addNum()函数并编写增加购物车数量的逻辑代码

function addNum(cid) {
    $.ajax({
        url: "/carts/"+cid+"/num/add",
        type: "POST",
        dataType: "JSON",
        success: function (json) {
            if (json.state == 200) {
                $("#goodsCount"+cid).val(json.data);//字符串+整数cid后结果为字符串
                //更新该商品总价
                /*
                            html()方法:
                            不传参:是获取某个标签内部的内容(文本或标签)
                            传参:将参数放到标签里面替换掉该标签原有内容
                            * */
                var price = $("#goodsPrice"+cid).html();
                var totalPrice = price * json.data;
                //将商品总价更新到控件中
                $("#goodsCast"+cid).html(totalPrice);
            } else {
                alert("增加购物车商品数量失败"+json.message);
            }
        },
        error: function (xhr) {
            alert("增加购物车商品数量时产生未知的异常!"+xhr.message);
        }
    });
}

减少商品数量

（一）减少商品数量（持久层）

1.规划sql

deletdelete from t_cart where cid=?

2.设计接口和抽象方法

在CartMapper接口中添加抽象方法

Cart deleteByCid(Integer cid);

在CartMapper文件中添加findByCid(Integer cid)方法的映射

    <delete id="deleteByCid">
        delete from t_cart where cid=#{cid}
    </delete>

（二）减少商品数量（业务层）

1.规划异常

删除时产生的异常，前面已经开发过，无需重复开发

2.设计接口和抽象方法及实现

在业务层ICartService接口中添加reduceNum()抽象方法

//查询购物车里的信息
   Integer reduceNum(Integer cid,Integer uid ,String username);

该方法返回值void.这样的话就需要在前端页面加location.href使该页面自己跳转到自己,实现刷新页面(不建议,每次都加载整个页面,数据量太大了)
返回值是Integer类型.这样的话就把数据库中更新后的数量层层传给前端,前端接收后填充到控件中就可以了

在CartServiceImpl类中实现接口中的抽象方法

@Override
      @Override
    public Integer reduceNum(Integer cid, Integer uid, String username) {
        Cart result = cartMapper.findByCid(cid);
        if (result==null){
            throw new CartNotFoundException("数据不存在");
        }
        Integer pid = result.getPid();
        Cart cart = cartMapper.findByUidAndPid(uid, pid);
        if (!cart.getUid().equals(uid)){
            throw new AccessDeniedException("数据访问异常");
        }
        Integer num=result.getNum()-1;
        if (num==0){
            Integer integer = cartMapper.deleteByCid(cid);
            if (integer!=1){
                throw new DeleteException("删除时异常");
            }
        }else {
            Integer integer = cartMapper.updateNumByCid(cid, num, username, new Date());
            if (integer!=1){
                throw new UpdateException("修改时产生异常");
            }
        }
        return result.getNum()-1;
    }

（三）减少商品数量（控制层）

1.处理异常

异常已经处理过，无需重复处理

2.设计请求

请求路径：/carts/{cid}/num/reduce

请求方式：post

请求参数：@PathVariable(“cid”) Integer cid, HttpSession session

响应结果JsonResult< Integer>

3.处理请求

在CartController类中添加处理请求的reduceNum()方法

    @PostMapping("/{cid}/num/reduce")
    public JsonResult<Integer> reduceNum(@PathVariable("cid") Integer cid,HttpSession session){
        Integer getuidfromsession = getuidfromsession(session);
        String getusernamesession = getusernamesession(session);
        Integer integer = cartService.reduceNum(cid, getuidfromsession, getusernamesession);
        return new JsonResult<>(ok,integer);
    }

（四）减少商品数量（前端页面）

1.首先确定在showCartList()函数中动态拼接的减少购物车按钮是绑定reduceNum()事件，如果已经添加无需重复添加

<input class="num-btn" type="button" value="-" onclick="reduceNum(#{cid})" />

2.在script标签中定义reduceNum()函数并编写减少购物车数量的逻辑代码

  function reduceNum(cid) {
    $.ajax({
      url: "/carts/"+cid+"/num/reduce",
      type: "POST",
      dataType: "JSON",
      success: function (json) {
        if (json.state == 200) {
          $("#goodsCount"+cid).val(json.data);//字符串+整数cid后结果为字符串
          showCartList();
          //更新该商品总价
          /*
                    html()方法:
                    不传参:是获取某个标签内部的内容(文本或标签)
                    传参:将参数放到标签里面替换掉该标签原有内容
                    * */
          var price = $("#goodsPrice"+cid).html();
          var totalPrice = price * json.data;
          //将商品总价更新到控件中
          $("#goodsCast"+cid).html(totalPrice);
        } else {
          alert("减少购物车商品数量失败"+json.message);
        }
      },
      error: function (xhr) {
        alert("减少购物车商品数量时产生未知的异常!"+xhr.message);
      }
    });
  }

后记
👉👉💕💕美好的一天，到此结束，下次继续努力！欲知后续，请看下回分解，写作不易，感谢大家的支持！！ 🌹🌹🌹

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

基于springboot框架的电脑商城项目（八）

显示购物车列表

（一）显示购物车列表（持久层）

1.规划sql

2.设计接口和抽象方法

（二）显示购物车列表（业务层）

1.规划异常

2.设计接口和抽象方法及实现

（三）显示购物车列表（控制层）

1.处理异常

2.设计请求

3.处理请求

（四）显示购物车列表（前端页面）

增加商品数量

（一）增加商品数量（持久层）

1.规划sql

2.设计接口和抽象方法

（二）增加商品数量（业务层）

1.规划异常

2.设计接口和抽象方法及实现

（三）增加商品数量（控制层）

1.处理异常

2.设计请求

3.处理请求

（四）增加商品数量（前端页面）

减少商品数量

（一）减少商品数量（持久层）

1.规划sql

2.设计接口和抽象方法

（二）减少商品数量（业务层）

1.规划异常

2.设计接口和抽象方法及实现

（三）减少商品数量（控制层）

1.处理异常

2.设计请求

3.处理请求

（四）减少商品数量（前端页面）

热门文章

最新文章

相关课程

相关电子书

相关实验场景