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

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

效果:

Spring Boot快速搭建一个简易商城项目【四,优化购物车篇】_第1张图片

全选:

计算价格:

Spring Boot快速搭建一个简易商城项目【四,优化购物车篇】_第2张图片

	//计算总价
	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)
	}

删除商品:

Spring Boot快速搭建一个简易商城项目【四,优化购物车篇】_第3张图片

	//删除购物车商品
	$('.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")
		}
	})

后台:

Spring Boot快速搭建一个简易商城项目【四,优化购物车篇】_第4张图片

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

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

Spring Boot快速搭建一个简易商城项目【四,优化购物车篇】_第5张图片

Spring Boot快速搭建一个简易商城项目【四,优化购物车篇】_第6张图片

你可能感兴趣的:(spring,boot,后端,java)