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

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

显示购物车列表

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

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类中实现接口中的抽象方法

    @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

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);

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

在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< 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);
			}
		});
	}

后记
👉👉💕💕美好的一天，到此结束，下次继续努力！欲知后续，请看下回分解，写作不易，感谢大家的支持！！ 🌹🌹🌹文章来源地址https://www.toymoban.com/news/detail-454011.html

到了这里，关于基于springboot框架的电脑商城项目（八）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！