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

相关推荐
m0_7482350717 分钟前
SpringBoot集成kafka
spring boot·kafka·linq
字节流动1 小时前
Android Java 版本的 MSAA OpenGL ES 多重采样
android·java·opengles
玉红7772 小时前
R语言的数据类型
开发语言·后端·golang
呜呼~225142 小时前
前后端数据交互
java·vue.js·spring boot·前端框架·intellij-idea·交互·css3
飞的肖2 小时前
从测试服务器手动热部署到生产环境的实现
java·服务器·系统架构
周伯通*3 小时前
策略模式以及优化
java·前端·策略模式
两点王爷3 小时前
Java读取csv文件内容,保存到sqlite数据库中
java·数据库·sqlite·csv
lvbu_2024war013 小时前
MATLAB语言的网络编程
开发语言·后端·golang
问道飞鱼3 小时前
【Springboot知识】Springboot进阶-实现CAS完整流程
java·spring boot·后端·cas
抓哇小菜鸡3 小时前
WebSocket
java·websocket