🎁🎁静态资源及sql文件分享
链接：https://pan.baidu.com/s/1X-yjmQcPD3PqS21x0HplNA?pwd=23gr
提取码：23gr

显示购物车列表功能及增加和减少商品数量功能的实现

显示购物车列表
- （一）显示购物车列表（持久层）
- - - 1.规划sql
    - 2.设计接口和抽象方法
- （二）显示购物车列表（业务层）
- - - 1.规划异常
    - 2.设计接口和抽象方法及实现
- （三）显示购物车列表（控制层）
- - - 1.处理异常
    - 2.设计请求
    - 3.处理请求
- （四）显示购物车列表（前端页面）
增加商品数量
- （一）增加商品数量（持久层）
- - - 1.规划sql
    - 2.设计接口和抽象方法
- （二）增加商品数量（业务层）
- - - 1.规划异常
    - 2.设计接口和抽象方法及实现
- （三）增加商品数量（控制层）
- - - 1.处理异常
    - 2.设计请求
    - 3.处理请求
- （四）增加商品数量（前端页面）
减少商品数量
- （一）减少商品数量（持久层）
- - - 1.规划sql
    - 2.设计接口和抽象方法
- （二）减少商品数量（业务层）
- - - 1.规划异常
    - 2.设计接口和抽象方法及实现
- （三）减少商品数量（控制层）
- - - 1.处理异常
    - 2.设计请求
    - 3.处理请求
- （四）减少商品数量（前端页面）

显示购物车列表

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

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接口中添加抽象方法

    ListCartVo> 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()抽象方法

//显示购物车列表
    ListCartVo> getByUid(Integer uid);

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

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

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

1.处理异常

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

2.设计请求

请求路径：/carts/
请求方式：GET
请求参数：HttpSession session
响应结果：JsonResult>

3.处理请求

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

@GetMapping
public JsonResultListCartVo>> getCartList(HttpSession session){
    Integer getuidfromsession = getuidfromsession(session);
    ListCartVo> 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 = 'n' +
                        'n' +
                        'n' +
                        '
n' +
                        'n' +
                        '#{title}#{msg}n' +
                        '¥#{singlePrice}
n' +
                        'n' +
                        'n' +
                        'n' +
                        'n' +
                        '
n' +
                        '#{totalPrice}n' +
                        'n' +
                        'n' +
                        '
n' +
                        '
';
                    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类中实现接口中的抽象方法


    @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

3.处理请求

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

@PostMapping("/{cid}/num/add")
    public JsonResultInteger> 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

delete 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()抽象方法

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

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

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


      @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

3.处理请求

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

    @PostMapping("/{cid}/num/reduce")
    public JsonResultInteger> 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);
			}
		});
	}

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

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

基于springboot框架的电脑商城项目（八）显示购物车列表增加商品数量减少商品数量