实战项目继续冲(Spring Boot淘宝购物车案例)

个人简介: js同学你好


💖年龄: 20   大二在读
📃专业:   计算机科学技术
💪爱好:   单曲循环 写写文章
🎯相关:   课设级别商城项目续篇(购物车部分)
淘宝实例演示:

在这里插入图片描述

点击加入购物车在这里插入图片描述
哎奈何两兜空空只能加入购物车了在这里插入图片描述
商品便会被添加进购物车中
商品加入购物车操作:
=======================================================================

" 为了使用户在每一次登录的时候都可以实时的查看自己之前加入购物车中的商品,我们需要将用户购买的商品保存到数据库中,为了区分哪一个用户保存的哪一个商品和对应的数量我们需要将本次购买商品的用户id和商品id和它对应的商品数量进行保存, 还有商品对应的价格。加上四个基本的字段这样数据库就建立好了。
在这里插入图片描述
而加入购物车操作便是基本的insert操作了。但是如果购书车中已经存在了cartID(是否存在我们是不是得进行搜索,那么搜索的依据是不是该商品的id和该用户的id同时存在于数据库中,如果可以通过这个两个字段查询到某一个cart那么不正是说明t_cart表中该记录已经存)也就是说你之前已经添加了类似商品在购物车中现在还想加入到购物车中,那是不是就变成了一个更新操作。那更新操作是不是应该有修改人,修改时间和修改数量(当前数量加上原来存在的数量),已经cart的唯一标识cartID。
我们提供三个用户将商品加入到购物车的接口
Integer insert(Cart cart);
Cart findByUidAndPid(@Param("uid") Integer uid, @Param("pid") Integer pid);
Integer updateNumByCid( Integer cid, Integer num,String modifiedUser, Date modifiedTime);
别忘了在service层加上异常处理因为再添加操作或者修改操作时可能会出现一些未知的错误,我们不能因为这一个未知的错误就影响了整个软件的使用,所以所以我们需要将异常抛出并添加一个用户专门捕获异常的Controller因为service层上的方法最终被拿去给controller层用了,那么在编写controller类的时候只需要集成这个含有异常处理的类即可。

=======================================================================

在这里插入图片描述
继续想一下我们我们的controller层如何编写,想一下我们平时去淘宝买东西如果没有登录的话如果查看购物车的话是不是会直接跳转到登录页面进行登录,如果在登录的时候我们将用户信息保存在session中那么以后再用到有关用户信息的时候直接从session中取出即可。我们用到最多是不是就是用户名和用户id为了方便后面的取用我们考虑封装两个方法。
在这里插入图片描述
有个这些个基础条件我们的controller接口的编写便容易得多了,只需要将session和用户接收用户上传的商品id和数量作为参数即可
在这里插入图片描述

前台处理:

有了后端和逻辑接口我们前端只需要做的事情便是将页面做的好看些,将数据提供给后端接口便可.
在这里插入图片描述
这里的商品id我想在跟大家聊一下,因为我们之前在商品的展示区中已经从后端将将商品的数据传递到
在这里插入图片描述
所以我们需要通过解析的url将其中的参数拿出来作为全局变量(因为用到该商品id的地方不止一处)
let id = $.getUrlParam("id");//获取路径中的id参数 全局变量
基于以上这些我们的购物车添加操作便大致完成了。

=======================================================================
购物车的展示及其附属功能:

我们再次浏览文章开始的两张淘宝购物图购物车中不仅有商品的描述信息也有相关图片但是t_cart表中没有保存这么多的数据,所以聪明的我们便想到了多表联查操作。我们只需要将t_cart表和t_product表连接起来条件是对应的商品id要一致然后在外层再加上一个当前用户限定即可然后按照商品的添加时间排序起来便OK了。
在这里插入图片描述
但是又产生了一个问题我们没有相关的类来封装查询出来的数据,所以我们需要封装Vo类将查询字段映射为实体类型。
查询操作较为简单这里就不详细说明了.
前端购物车数据渲染和之前的商品展示是同样的操作这里就不展开详细说明了,只说一下几个细节。
在这里插入图片描述
再次浏览我文章开始的图片我们会发现当前商品价格和你购物车中的价格不同这是为什么呐,我们想一下其实很好理解,比如说我们在淘宝的鞋店看到了一双很好看的鞋子然后就将它加入到购物车了,但是过了几天之后商店搞促销活动,鞋子的价格降价了,但是数据库中保存的该商品记录并不会随着商品的修改而变化(因为是两个表)所以展示的时候应该展示的是当前的商品实际价格而不是数据库中的保存价格。
所以在前端我们会这样显示数据:
在这里插入图片描述
但是当我们打开购物车时看到降价的鞋子又忍不住想给女朋友也买一双所以我们将鞋子的数量点击按钮加一。但是我们是不是也应该将+1的操作持久化到数据库中操作。
这次我们从前端开始往后端推导

增加商品操作:

我们只需要在增加按钮上绑定一个单击事件将改购物车的id传到后端,但后将该购物车查询出来将其数量加一即可。在这里插入图片描述
我们在controller层的对应方法中只需要写两个参数即可,cid(对应的购物车id)和session然后调用service层进行搜索,异常处理将原来的数据+1之后返回给controller层并且调用修改接口持久化到数据库中即可。
在这里插入图片描述
增加商品的处理结束…

=======================================================================
选中商品并结算:

大家设想一下假设我们最近手头不宽裕买不了购物车中的全部产品只能选一两件自己喜欢的商品来支付,剩下的等以后手头宽裕了再买。在这里插入图片描述
所以说我们向后端传递的应该是一个包含着商品cartid的数组
在这里插入图片描述
在这里插入图片描述
我们发现购物车界面和结算界面跳转的时候会自动将参数添加在url地址部分所以我们得想一个办法将数据url地址中取出来
在这里插入图片描述
我们来看一下这个substr()方法的源码
在这里插入图片描述
这个方法说的也就是获取从指定索引位置之后的参数但是索引从0开始,上面之所以从一开始是为了将 “?” 去除。所以我们来规划一下后端接口怎么去实现。
在结算界面我们需要的是选定商品的详细信息 这句话暗示的含义很多我们来一一分析,详细信息,所以我们需要进行联表查询,指定的商品所以我们的遍历数组,条件是cart的id得包含在这个数组中。
所以我们的mybatis的xml语句应该这么写:
在这里插入图片描述
那么service层和controller层便好写多了.
最后我们来测试访问网页
在这里插入图片描述

至此购物车案例完结

🎉欢迎关注🔍点赞👍收藏🎇留言📙

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值