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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/286172.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Goole上架年度总结(2023年)

今天来总结一下2023年关于谷歌商店上架的相关政策改动和对应的拒审解决方法。 目录 政策更新与改动2023 年 2 月 22 日2023 年 4 月5 日2023 年 7 月 12 日2023 年 10 月 25 日 开发者计划政策拒审邮件内容和解决办法 政策更新与改动 2023 年 2 月 22 日 生效日期&#xff1…

普中STM32-PZ6806L开发板(HAL库函数实现-TIM5捕获上升沿, 获取输入频率)

简介 通过TIM5_CH1捕获上升沿电平, 两个上升沿的计数值计算频率;电路原理图 连接图 将 PC7 与 PA0使用跳线进行连接 其他知识 APIs /* Blocking mode: Polling */ HAL_StatusTypeDef HAL_TIM_IC_Start(TIM_HandleTypeDef *htim, uint32_t Channel); // 堵塞捕获开启 HAL_St…

什么是高防 IP?哪些行业适合用高防 IP?

在数字化浪潮席卷全球的今天&#xff0c;网络安全问题日益凸显。有听说过“高防 IP”这个名词吗&#xff1f;它究竟是什么东西&#xff0c;又能在哪些领域大显身手呢&#xff1f; 一、什么是高防 IP&#xff1f; 高防 IP&#xff0c;顾名思义&#xff0c;就是具备高级防护能力…

深度生成模型之图像翻译GAN ->(个人学习记录笔记)

文章目录 深度生成模型之图像翻译GAN图像翻译的应用1. 风格迁移2. 数据增强3. 经典图像任务4. 内容创作5. 人脸图像编辑6. 人体图像编辑 图像翻译模型1. 有监督图像翻译模型2. 无监督图像翻译模型3. 多域图像翻译模型 深度生成模型之图像翻译GAN 图像翻译的应用 1. 风格迁移 …

Vue:使用IDEA开发Vue的相关配置

一、IDEA无法识别.vue文件 1、IDEA 添加Vue插件 2、添加Vue配置 File | Settings | Editor | File Types 找到 HTML 文件 在下面点号 输入*.vue 二、IDEA无法创建.vue文件 1、问题 在开发过程中&#xff0c;发现创建文件的界面&#xff0c;没有vue模板 2、相关配置 Fi…

MATLAB指令

01--根据数学公式进行绘制 1.绘制连续函数 ①一元函数 t0:0.1:10; y3*t2; plot(t,y) ②一元二次函数 t0:0.1:10; yt.*t; plot(t,y) 注意此处应为点乘 ③一元3次 t0:0.1:10; yt.*t.*t; plot(t,y) ④y1/t t0:0.1:10; y1./t; plot(t,y) ⑤yexp(t) t0:0.1:10; yexp(2*t); p…

BIO和NIO编程(待完善)

目录 IO模型 BIO NIO 常见问题 IO模型 Java共支持3种网络编程IO模式&#xff1a;BIO&#xff0c;NIO&#xff0c;AIO BIO 同步阻塞模型&#xff0c;一个客户端连接对应一个处理线程 代码示例&#xff1a; Server端&#xff1a; public class BioServer {private static …

ARM NEON 指令

NEON指令 按照操作数类型可以分为正常指令、宽指令、窄指令、饱和指令、长指令。 正常指令&#xff1a;生成大小相同且类型通常与操作数向量相同到结果向量。长指令&#xff1a;对双字向量操作数执行运算&#xff0c;生产四字向量到结果。所生成的元素一般是操作数元素宽度到…

PS插件一键生成超治愈向日葵花海

金黄色的向日葵总能给人带来治愈的感觉&#xff0c;仿佛在这里能够疗愈心灵所有的伤口。今天我们通过START AI来生成一片美丽的向日葵花海~ 这是小编使用的关键词&#xff0c;负面词需要填写你不想要拥有的&#xff0c;能够让生成的结果更贴合你的想法 最后的生成效果就如下图…

清风数学建模写作

Overview 标题 摘要&#xff01;&#xff01;&#xff01;&#xff08;1000字&#xff09; 开头 中间 解决的问题 应用的方法 得到的结果 结尾 应用价值、本文亮点 关键词&#xff08;3-6个&#xff09; 积累、二次拓展 目录 1.问题重述 拆分背景与问题&#xff0c;也可以结…

菜鸟之MATLAB学习——QPSK OQPSK信号生成及频谱分析

本人MATLAB学习小白&#xff0c;仅做笔记记录和分享~~ % qpsk && oqpsk clc; close all;Ts1; fc10;N_sample16; N_sum100; dt1/fc/N_sample; t0:dt:N_sum*Ts-dt; Tdt*length(t);d1sign(randn(1,N_sum)); d2sign(randn(1,N_sum));gtones(1,fc*N_sample); …

Java基础综合练习(飞机票,打印素数,验证码,复制数组,评委打分,数字加密,数字解密,抽奖,双色球)

练习一&#xff1a;飞机票 需求: ​ 机票价格按照淡季旺季、头等舱和经济舱收费、输入机票原价、月份和头等舱或经济舱。 ​ 按照如下规则计算机票价格&#xff1a;旺季&#xff08;5-10月&#xff09;头等舱9折&#xff0c;经济舱8.5折&#xff0c;淡季&#xff08;11月到来…

产品电子画册用什么工具可以轻松制作

​随着互联网的普及和移动设备的增多&#xff0c;电子画册已经成为了企业宣传和产品展示的重要工具。然而&#xff0c;制作电子画册并不是一件容易的事情&#xff0c;需要耗费大量的时间和精力。现在&#xff0c;我们可以通过使用一些专业的工具来轻松制作产品电子画册&#xf…

想升职or转岗,可以考一个PMP吗?

现在就业形式比较严峻&#xff0c;如果不想被淘汰&#xff0c;就得提升自己的能力&#xff0c;增加自己的职场竞争力&#xff0c;今天就来推荐一个能在工作中起到非常大重要的证书--pmp项目管理证书。 首先&#xff0c;pmp是什么呢&#xff1f; PMP是由美国项目管理协会&…

Windows搭建Emby媒体库服务器,无公网IP远程访问本地影音文件

文章目录 1.前言2. Emby网站搭建2.1. Emby下载和安装2.2 Emby网页测试 3. 本地网页发布3.1 注册并安装cpolar内网穿透3.2 Cpolar云端设置3.3 Cpolar内网穿透本地设置 4.公网访问测试5.结语 1.前言 在现代五花八门的网络应用场景中&#xff0c;观看视频绝对是主力应用场景之一&…

UCOSIII移植

1、“sys.h” 头文件修改 //0,不支持ucos //1,支持ucos #define SYSTEM_SUPPORT_OS 1 //定义系统文件夹是否支持UCOS2、stm32f10x_it.c中断屏蔽 注释掉void PendSV_Handler(void) 和 void SysTick_Handler(void)中断 //void PendSV_Handler(void) //{ //} // //void Sys…

New!DevExpress WinForms v23.2系统环境配置要求

DevExpress WinForms拥有180组件和UI库&#xff0c;能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序&#xff0c;无论是Office风格的界面&#xff0c;还是分析处理大批量的业务数据&#xff0c;它都能轻松胜…

创建x11vnc系统进程

为方便使用vnc&#xff0c;所以寻找到一个比较好用的vnc服务端那就是x11vnc&#xff0c;索性就创建了一个系统进程 一、环境 系统&#xff1a;银河麒麟v4-sp2-server 软件&#xff1a;x11vnc【linux下】、VNCviewer【win下】 二、安装x11vnc 1、挂载光盘源并修改apt源 mou…

test ui-02-UI 测试组件之 Appium 入门介绍

Appium简介 正如主页所述&#xff0c;Appium的目标是支持许多不同平台&#xff08;移动、Web、桌面等&#xff09;的UI自动化。 不仅如此&#xff0c;它还旨在支持用不同语言&#xff08;JS、Java、Python等&#xff09;编写的自动化代码。 将所有这些功能组合到一个程序中是…

反转链表、链表的中间结点、合并两个有序链表【LeetCode刷题日志】

一、反转链表 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 思路一&#xff1a;翻转单链表指针方向 这里解释一下三个指针的作用&#xff1a; n1&#xff1…