SpringBoot项目--电脑商城【显示勾选的购物车数据】

news2024/10/6 20:37:56

1.持久层[Mapper]

1.规划SQL语句

用户在购物车列表页中通过随机勾选相关的商品,在点击“结算”按钮后,跳转到结算页面,在这个页面中需要展示用户在上个页面所勾选的购物车对应的数据,列表的展示,而展示的内容还是在于购物车的表,两个页面需要用户勾选多个值传递给下一个

select
	cid, #日后勾选购物车商品模块需要用到cid来确定勾选的是购物车表的哪一条数据
	
	uid, #感觉没必要,因为uid可以从session中拿的呀,难道是为
	#了后面提交购物车订单时判断提交的商品的uid和登录的uid是否一致?
	
	pid, #日购提交订单模块需要用到pid来确定购买的是商品表的哪件商
	#品,然后对商品表的该商品的库存,销售热度等信息进行修改
	
	t_cart.price, #两个表都有该字段,需要指定获取的是哪个数据表的
	
	t_cart.num, #两个表都有该字段且含义不同,需要指定获取的是哪个数据表的
	
	title,
	
	t_product.price as realPrice, #为了在购物车列表页展示两个价格的差值
	
	image
	
from t_cart
left join t_product on t_cart.pid = t_product.id #把t_cart作为主表(老师说现在处理的是购物车表的数据所以让其为主表,我不明白)
where
	cid in (?,?,?)
order by
	t_cart.created_time desc #进行排序使最新加入购物车的在最上面

2. 接口和抽象方法

    /**
     * 用于:显示勾选购物车数据
     * 根据购物车的id将用户选中的商品传递给“结算”页面
     * @param cid
     * @return
     */
    List<CartVO> findVOByCid(Integer cid);

3.配置映射

    <select id="findVOByCid" resultMap="CartEntityMap">
        SELECT cid, uid, pid,
               t_cart.price, t_cart.num,
               t_product.title, t_product.image,
               t_product.price AS realprice
        FROM t_cart
                 LEFT JOIN t_product
                           ON t_cart.pid = t_product.id
        WHERE cid in (
        /*
                collection:是什么类型
         */
                <foreach collection="array" separator="," item="cid">
                    #{cid}
                </foreach>
            )
        ORDER BY t_cart.created_time DESC
    </select>

4.单元测试

    @Test
    public void findVOByCid(){
        Integer[] cids={1,2,3,45,6,9};
        System.out.println(cartMapper.findVOByCid(cids));

    }

2.业务层[Service]

1.异常规划

因为是查询语句,所以没有异常处理

2.设计业务层接口抽象方法

    /**
     * 将用户在购物车页面中勾选中的数据传递给"结算“页面
     * @param uid
     * @param cids
     * @return
     */
    List<CartVO> getVOByCid(Integer uid,
            Integer[] cids);

3.完成抽象方法的设计

    /**
     * 将用户在购物车页面中勾选中的数据传递给"结算“页面
     *
     * @param uid
     * @param cids
     * @return
     */
    @Override
    public List<CartVO> getVOByCid(Integer uid, Integer[] cids) {
        List<CartVO> list = cartMapper.findVOByCid(cids);
        //循环遍历获取到的数据,查看该数据是否与目前传入的uid是一致的
        Iterator<CartVO> it = list.iterator();
        while (it.hasNext()){//如果循环没有遍历结束
            //因为it一开始是指向下标为0,所以一上来就要next,才可以指向下一个
            CartVO cartVO = it.next();
            //进行判断用户对应是否正确
            if (cartVO.getUid().equals(uid)) {//表示当前数据不属于当前的用户
                //从集合中移除这个元素
                list.remove(cartVO);
            }
        }

        return list;
    }

3.控制层{Controller]

1.请求设计

  • /cart/list
  • Integeer cids,HttpSession session
  • POST
  • JsonResult<List<CartVO>>

2.完成请求处理

    /**
     * 将用户在购物车选中的商品通过”结算“传递到结算页面
     * @param cids
     * @param session
     * @return
     */
    @PostMapping("/list")
    public JsonResult<List<CartVO>> getVOByCid(Integer[] cids,
                                               HttpSession session){
        List<CartVO> data = cartService.getVOByCid(getuidFromSession(session), cids);
        return new JsonResult<>(OK,data);
    }

4.前端页面

1.将cart.html页面的”结算“按钮属性更改为”type=submit"

2.注释调用orderConfirm.html中的js代码

<!--		<script src="../js/orderConfirm.js" type="text/javascript" charset="utf-8"></script>-->

3.orderConfirm.html页面中添加自动加载从上一个页面中传递过来的cids数据,再起请求ajax,中进行填充当前页面的某一个区域中

function showCartList() {
			$("#cart-list").empty();
			/*
            * location.search.substr:是获取url中的数据
            * 1:表示查找?之前
            * 0:表示查找?之后【请求参数】
            *
            * 	这里要传data是因为后端接口需要传入参数,所以这里才要写
            * */
			$.ajax({
				url: "/cart/list",
				data: location.search.substr(1),
				type: "GET",
				dataType: "JSON",
				success: function(json) {
					let list = json.data;
					console.log("count=" + list.length);
					let allCount = 0;
					let allPrice = 0;
					for (let i = 0; i < list.length; i++) {
						console.log(list[i].title);
						let tr = '<tr>'
								+ '<td><img src="..#{image}collect.png" class="img-responsive" /></td>'
								+ '<td><input type="hidden" name="cid" value="#{cid}" />#{title}</td>'
								+ '<td>¥<span>#{realPrice}</span></td>'
								+ '<td>#{num}</td>'
								+ '<td>¥<span>#{totalPrice}</span></td>'
								+ '</tr>';

						tr = tr.replace(/#{cid}/g, list[i].cid);
						tr = tr.replace(/#{image}/g, list[i].image);
						tr = tr.replace(/#{title}/g, list[i].title);
						tr = tr.replace(/#{realPrice}/g, list[i].realPrice);
						tr = tr.replace(/#{num}/g, list[i].num);
						tr = tr.replace(/#{totalPrice}/g, list[i].realPrice * list[i].num);

						$("#cart-list").append(tr);

						allCount += list[i].num;
						allPrice += list[i].realPrice * list[i].num;
					}
					$("#all-count").html(allCount);
					$("#all-price").html(allPrice);
				},
				error: function() {
					alert("购物车数据加载未知异常 + 原因:" + xhr.status);
				}
			});
		}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

OpenCV学习笔记(6)_由例程学习高斯图像金字塔和拉普拉斯金字塔

1 图像金字塔 图像金字塔是图像多尺度表达的一种。 尺度&#xff0c;顾名思义&#xff0c;可以理解为图像的尺寸和分辨率。处理图像时&#xff0c;经常对源图像的尺寸进行缩放变换&#xff0c;进而变换为适合我们后续处理的大小的目标图像。这个对尺寸进行放大缩小的变换过程…

Python的get请求报错Error: Unexpected status code 400

一句话导读&#xff1a; 最近在做研发效能提升的事情&#xff0c;其中有一块就是要对项目管理相关数据做统计&#xff0c;我们使用的是ones做的项目管理&#xff0c;ones本身带的那些报表满足不了我们的需求&#xff0c;就想着看这些数据是不是能自己拿出来做统计&#xff0c;有…

代码随想录--数组--长度最小的子数组

给定一个含有 n 个正整数的数组和一个正整数 s &#xff0c;找出该数组中满足其和 ≥ s 的长度最小的 连续 子数组&#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0。 示例&#xff1a; 输入&#xff1a;s 7, nums [2,3,1,2,4,3]输出&#xff1a;2…

华为3面已过,面议薪资要价10K,面试官说我不尊重华为?

在不知道一个公司的普遍薪资水平的时候&#xff0c;很多面试者不敢盲目的开价&#xff0c;但就因为这样可能使得面试官怀疑你的能力。一位网友就在网上诉说了自己的经历&#xff0c;男子是一位测试员&#xff0c;已经有九年的工作经历了&#xff0c;能力自己觉得还不错。 因为…

2002-2020年地级市各类制造业企业进入数量数据

2002-2020年地级市各类制造业企业进入数量数据 1、时间&#xff1a;2002-2020年 2、指标&#xff1a;地区、年份、城市代码、所属省份、省份代码、高技术行业企业数量、中高技术行业企业数量、中低技术行业企业数量、低技术行业企业数量 3、样本量&#xff1a;1万多条 4、来…

mac使用squidMan设置代理服务器

1&#xff0c;下载squidMan http://squidman.net/squidman/ 2, 配置SquidMan->Preference 3, mac命令窗口配置 export http_proxy export https_porxy 4&#xff0c;客户端配置&#xff08;centos虚拟机&#xff09; export http_proxyhttp://服务器ip:8080 export https…

肖sir__mysql之单表__004

mysql之单表 一、建表语句 1、show databases 查看所有的数据库 2、create databaes 数据库名 创建数据库 3、use 数据库名 指定使用数据库 4、show tables &#xff1b; 5、创建表 格式&#xff1a;create table 表名 (字段名1 数据类型1(字符长度),字段名2 数据类型2(字…

【鸿蒙(HarmonyOS)】UI开发的两种范式:ArkTS、JS(以登录界面开发为例进行对比)

文章目录 一、引言1、开发环境2、整体架构图 二、认识ArkUI1、基本概念2、开发范式&#xff08;附&#xff1a;案例&#xff09;&#xff08;1&#xff09;ArkTS&#xff08;2&#xff09;JS 三、附件 一、引言 1、开发环境 之后关于HarmonyOS技术的分享&#xff0c;将会持续使…

学习记忆——宫殿篇——记忆宫殿——数字编码——记忆数字知识点

面对错综复杂的数字信息&#xff0c;我们想要记住可以通过以下三点&#xff1a; 1、首先找到关键词 2、数字编码牢记 3、关键词跟编码链接 案例&#xff1a;会计考试-时间期限为 3、7、10 日、1 年的知识点 3 天 (1)托收承付的承付期验单付款为 3 天。 (2)失票人应当在通…

考研英语笔记:经济学人特别一篇,看到此,流口水

文 / 谷雨 考研是一件非常痛苦的事情。 你可能在一个漫长时间当中&#xff0c;看不到任何回报。但是成功和失败之间就在于你是否能够坚持走完这段路。 无数备考的朋友&#xff0c;无不走过这段路。 很多人可能复习了好几个月&#xff0c;上考场之后还是发现没有一点进步&#x…

嘉泰实业:真实低门槛,安全有保障

在互联网金融大行其道的当下&#xff0c;无论用户是多么的青睐、喜爱这种便捷的理财方式&#xff0c;也一定得把资金安全放在心上。要投就投那些实力背景雄厚&#xff0c;诚信经营的平台&#xff0c;可以选择投资用户基数庞大的理财老品牌&#xff0c;也可以选择发展势头迅猛的…

学习记忆——宫殿篇——记忆宫殿——数字编码——三十六计

案例&#xff1a;中国古代兵书《三十六计》 第1计 瞒天过海 第2计 围魏救赵 第3计 借刀杀人 第4计 以逸待劳 第5计 趁火打劫 第6计 声东击西 第7计 无中生有 第8计 暗渡陈仓 第9计 隔岸观火 第10计 笑里藏刀 我们可以这样记忆&#xff1a; 一、先熟悉1-10的编码&#xff1a;…

解决方案 | 法大大电子签为物流行业发展提速提效

近年来&#xff0c;受益于物流行业的快速发展&#xff0c;人们的生活便利度得到了极大提升。与此同时&#xff0c;传统的物流行业也在面临着新时代的挑战&#xff0c;长期面临回程空驶、装载率低、仓库资源闲置、堆存利用率低等痛点&#xff0c;尤其在公路货运市场&#xff0c;…

[GWCTF 2019]我有一个数据库

过来毛都没有 直接dirsearch 扫一下 发现存在 phpadmin 我们直接访问一下 啥都没有 但是给我们了 phpadmin的版本 我们去搜搜看是否存在漏洞 phpMyAdmin 4.8.1后台文件包含漏洞&#xff08;CVE-2018-12613&#xff09;_phpmyadmin cve-2018-12613漏洞获取webshell_zhang三的…

Facebook 惊现网络钓鱼浪潮,每周攻击 10 万个账户

Bleeping Computer 网站披露&#xff0c;某黑客组织通过一个伪造和受损的 Facebook 账户网络&#xff0c;发送数百万条 Messenger 钓鱼信息&#xff0c;利用密码窃取恶意软件攻击 Facebook 企业账户。 据悉&#xff0c;网络攻击者通过诱骗目标用户下载一个 RAR/ZIP 压缩包&…

Shell编程之定时任务

什么是定时任务 顾名思义&#xff0c;定时任务指的就是在指定/特定的时间进行工作&#xff0c;例如备份/归档数据、清理临时文件等。 在 Linux 中&#xff0c;可以使用 cron 定时器来定期执行任务。cron 是一个在后台运行的守护进程&#xff0c;用于根据指定的时间表自动执行任…

驱动开发,udev机制创建设备节点的过程分析

1.创建设备文件的机制种类 mknod命令&#xff1a;手动创建设备节点的命令 devfs:可以用于创建设备节点&#xff0c;创建设备节点的逻辑在内核空间&#xff08;内核2.4版本之前使用&#xff09; udev:自动创建设备节点的机制&#xff0c;创建设备节点的逻辑在用户空间&#xf…

【正点原子STM32连载】 第三十章 PVD电压监控实验 摘自【正点原子】APM32F407最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子stm32f103战舰开发板V4 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/thread-340252-1-1.html# 第三…

VUE 的eslint 代码规范检查

报错&#xff1a; You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. 解决&#xff1a; 注释&#xff1a;...(config.dev.useEslint ? [creat…

ThreadLocal功能实现

模拟ThreadLocal功能实现 当前线程任意方法内操作连接对象 一个栈对应一个线程 , 一个方法调用另一个方法都是在一个线程内 , 只有执行了线程的start方法才会创建一个线程 定义一个Map集合 , key是当前线程(Thread.currentThread) , value是要绑定的数据(Connection对象) 以…