Spring Boot快速搭建一个简易商城项目【四，优化购物车篇】

平顶山大师2024-01-03 9:54

在之前的基础上继续将购物车进行完善：全选，删除，加减购物车数量

效果：

全选：

计算价格：

复制代码

	//计算总价
	function jisuan(){
		let total =0;
		$(".th").each((i,el)=>{
		//each遍历  i下标  el指的是当前的对象
		let price=	$(el).find('.myprice').text().replace("￥","")*1
		let num=	$(el).find('.mynum').text()*1
		$(el).find('.sAll').text("￥"+price*num)
		// 	总价选中显示
		let f=$(el).find('input[type=checkbox]').prop('checked')
		if (f) total+=price*num
		})
		$("#all").text("￥"+total)
	}

删除商品：

复制代码

	//删除购物车商品
	$('.del').click(function(){
		// 有id代表删除全部
		let gid = $(this).attr('data-gid');
		let ids=[]
		if (gid){
			ids.push(gid)
		}else {
			$(".th").each((i,el)=>{
				let f=$(el).find('input[type=checkbox]').prop('checked')
				if (f) {
					let id = $(el).find('.mynum').attr('data-gid')
					ids.push(id)
				}
			})
		}
		if (ids.length>0){
			$.post('/cart/del',{ids},resp=>{
				if (resp.code===200){
					alert("删除成功")
					// 刷新页面
					location.reload();
				}
			},"json")
		}
	})

后台：

复制代码

    @RequestMapping("/del")
    @ResponseBody
    public JsonResponseBody<?> del(User user,@RequestParam("ids[]")List<String> ids){
        redisService.delCart(user,ids);
        //将购物车的商品放到缓存数据库中
        return JsonResponseBody.success();
    }

删除这里有选中删除，和单个删除，传递的都有gid