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

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

效果:

全选:

计算价格:

复制代码
	//计算总价
	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

相关推荐
一只叫煤球的猫7 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
bobz9657 小时前
tcp/ip 中的多路复用
后端
bobz9658 小时前
tls ingress 简单记录
后端
皮皮林5519 小时前
IDEA 源码阅读利器,你居然还不会?
java·intellij idea
你的人类朋友9 小时前
什么是OpenSSL
后端·安全·程序员
bobz9659 小时前
mcp 直接操作浏览器
后端
前端小张同学11 小时前
服务器部署 gitlab 占用空间太大怎么办,优化思路。
后端
databook12 小时前
Manim实现闪光轨迹特效
后端·python·动效
武子康12 小时前
大数据-98 Spark 从 DStream 到 Structured Streaming:Spark 实时计算的演进
大数据·后端·spark
该用户已不存在13 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net