🎁🎁静态资源及sql文件分享
链接：https://pan.baidu.com/s/1X-yjmQcPD3PqS21x0HplNA?pwd=23gr
提取码：23gr
显示购物车列表功能及增加和减少商品数量功能的实现
显示购物车列表
（一）显示购物车列表（持久层）
1.规划sql
这里需要将商品表和购物车表进行连表查询
select uid,pid,cid,image,t_cart.price,t_cart.num,title,t_product.price as realprice, from t_cart left join t_product on t_cart.pid=t_product.id
where uid=?
order by t_cart.created+time desc
2.设计接口和抽象方法
在store包下创建一个vo包,在该包下面创建CartVO类,不需要继承BaseController类,那相应的就需要单独实现Serializable接口
VO全称Value Object,值对象。当进行select查询时,查询的结果属于多张表中的内容,此时发现结果集不能直接使用某个POJO实体类来接收,因为POJO实体类不能包含多表查询出来的信息,解决方式是:重新去构建一个新的对象,这个对象用于存储所查询出来的结果集对应的映射,所以把这个对象称之为值对象.
@Data
@AllArgsConstructor
@NoArgsConstructor
publicclassCartVo implements Serializable {private Integer cid;private Integer pid;private Integer uid;private Long price;private Integer num;private String title;private String image;private Long realPrice;}
在CartMapper接口中添加抽象方法
List<CartVo>findByUid(Integer uid);
在CartMapper.xml文件中添加findVOByUid()方法的映射
<select id="findByUid" resultType="com.cy.store.vo.CartVo">
select cid,uid,pid,t_cart.price,t_cart.num,t_product.image,
t_product.title,t_product.price as realPrice
from t_cart left join t_product on t_product.id=t_cart.pid
where uid=#{uid}
order by t_cart.created_time desc
</select>
（二）显示购物车列表（业务层）
1.规划异常
查询不到就返回空,不需要规划异常
2.设计接口和抽象方法及实现
在ICartService接口中添加findVOByUid()抽象方法
//显示购物车列表
List<CartVo>getByUid(Integer uid);
在CartServiceImpl类中重写业务接口中的抽象方法
@Override
public List<CartVo>getByUid(Integer uid){
List<CartVo> cartVoList = cartMapper.findByUid(uid);return cartVoList;}
（三）显示购物车列表（控制层）
1.处理异常
业务层没有抛出异常,所以这里不需要处理异常
2.设计请求
请求路径：/carts/
请求方式：GET
请求参数：HttpSession session
响应结果：JsonResult<List< CartVO>>
3.处理请求
在CartController类中编写处理请求的代码。
@GetMapping
public JsonResult<List<CartVo>>getCartList(HttpSession session){
Integer getuidfromsession =getuidfromsession(session);
List<CartVo> cartVoList = cartService.getByUid(getuidfromsession);returnnew JsonResult<>(ok,cartVoList);}
（四）显示购物车列表（前端页面）
将cart.html页面的head头标签内引入的cart.js文件注释掉(这个就是文件的功能:点击"+“,”-",“删除”,"全选"等按钮时执行相应的操作)
<!--<script src="../js/cart.js" type="text/javascript" charset="utf-8"></script>-->
form标签的action="orderConfirm.html"属性(规定表单数据提交到哪里)和结算按钮的类型"type=submit"是必不可少的,这样点击"结算"时才能将数据传给"确认订单页"并在"确认订单页"展示选中的商品数据
当然也可以把这两个删掉,然后给结算按钮添加"type=button"然后给该按钮绑定一个点击事件实现页面跳转和数据传递,但是这样太麻烦了
在cart.html页面body标签内的script标签中编写展示购物车列表的代码
<script type="text/javascript">
$(document).ready(function(){showCartList();});//展示购物车列表数据
function showCartList(){
$("#cart-list").empty();
$.ajax({
url:"/carts",
type:"GET",
dataType:"JSON",
success:function(json){
var list = json.data;for(var i =0; i < list.length; i++){
var tr ='<tr>\n'+'<td>\n'+'<input name="cids" value="#{cid}" type="checkbox" class="ckitem" />\n'+'</td>\n'+'<td><img src="..#{image}collect.png" class="img-responsive" /></td>\n'+'<td>#{title}#{msg}</td>\n'+'<td>¥<span id="goodsPrice#{cid}">#{singlePrice}</span></td>\n'+'<td>\n'+'<input type="button" value="-" class="num-btn" οnclick="reduceNum(1)" />\n'+'<input id="goodsCount#{cid}" type="text" size="2" readonly="readonly" class="num-text" value="#{num}">\n'+'<input class="num-btn" type="button" value="+" οnclick="addNum(#{cid})" />\n'+'</td>\n'+'<td><span id="goodsCast#{cid}">#{totalPrice}</span></td>\n'+'<td>\n'+'<input type="button" οnclick="delCartItem(this)" class="cart-del btn btn-default btn-xs" value="删除" />\n'+'</td>\n'+'</tr>';
tr = tr.replaceAll(/#{cid}/g, list[i].cid);
tr = tr.replaceAll(/#{image}/g, list[i].image);
tr = tr.replaceAll(/#{title}/g, list[i].title);
tr = tr.replaceAll(/#{singlePrice}/g, list[i].realPrice);
tr = tr.replaceAll(/#{num}/g, list[i].num);
tr = tr.replaceAll(/#{totalPrice}/g, list[i].realPrice * list[i].num);if(list[i].realPrice < list[i].price){
tr = tr.replace(/#{msg}/g,"比加入时降价"+(list[i].price - list[i].realPrice)+"元");}else{
tr = tr.replace(/#{msg}/g,"");}
$("#cart-list").append(tr);}},
error:function(xhr){alert("加载购物车列表数据时产生未知的异常"+xhr.status);}});}</script>
增加商品数量
（一）增加商品数量（持久层）
1.规划sql
查询需要操作的购物车数据信息
SELECT * FROM t_cart WHERE cid=?
2.设计接口和抽象方法
在CartMapper接口中添加抽象方法
Cart findByCid(Integer cid);
在CartMapper文件中添加findByCid(Integer cid)方法的映射
<select id="findByCid" resultMap="CartEntityMap">
select * from t_cart where cid=#{cid}</select>
（二）增加商品数量（业务层）
1.规划异常
在更新时产生UpdateException未知异常,此异常类无需再次创建
可能该购物车列表数据归属不是登录的用户,抛AccessDeniedException异常,此异常类无需再次创建
要查询的数据不存在.抛出CartNotFoundException异常,创建该异常类并使其继承ServiceException
/** 购物车数据不存在的异常 */publicclassCartNotFoundException extends ServiceException {/**重写ServiceException的所有构造方法*/}
2.设计接口和抽象方法及实现
在业务层ICartService接口中添加addNum()抽象方法
updateNumByCid方法.参数是cid,num,String modifiedUser,Date modifiedTime
findByCid方法.参数是cid在业务层中从购物车表查询到该商品的数量,然后再和前端传过来的增加的数量进行求和得到num所以该方法的参数是cid,uid,username
//查询购物车里的信息
Integer addNum(Integer cid,Integer uid ,String username);
该方法返回值void.这样的话就需要在前端页面加location.href使该页面自己跳转到自己,实现刷新页面(不建议,每次都加载整个页面,数据量太大了)
返回值是Integer类型.这样的话就把数据库中更新后的数量层层传给前端,前端接收后填充到控件中就可以了
在CartServiceImpl类中实现接口中的抽象方法
@Override
public Integer addNum(Integer cid,Integer uid,String username){
Cart result = cartMapper.findByCid(cid);if(result==null){thrownewCartNotFoundException("数据不存在");}
Integer pid = result.getPid();
Cart cart = cartMapper.findByUidAndPid(uid, pid);if(!cart.getUid().equals(uid)){thrownewAccessDeniedException("数据访问异常");}
Integer integer = cartMapper.updateNumByCid(cid, result.getNum()+1, username,newDate());if(integer!=1){thrownewUpdateException("修改时产生异常");}return result.getNum()+1;}
（三）增加商品数量（控制层）
1.处理异常
在BaseController类中添加CartNotFoundException异常类的统一管理
elseif(e instanceof CartNotFoundException){
result.setState(4007);
result.setMessage("购物车表不存在该商品的异常");}
2.设计请求
请求路径：/carts/{cid}/num/add
请求方式：post
请求参数：@PathVariable(“cid”) Integer cid, HttpSession session
响应结果JsonResult< Integer>
3.处理请求
在CartController类中添加处理请求的addNum()方法
@PostMapping("/{cid}/num/add")public JsonResult<Integer>addNum(@PathVariable("cid") Integer cid,HttpSession session){
Integer getuidfromsession =getuidfromsession(session);
String getusernamesession =getusernamesession(session);
Integer integer = cartService.addNum(cid, getuidfromsession, getusernamesession);returnnew JsonResult<>(ok,integer);}
（四）增加商品数量（前端页面）
1.首先确定在showCartList()函数中动态拼接的增加购物车按钮是绑定了addNum()事件，如果已经添加无需重复添加
<input class="num-btn" type="button" value="+" onclick="addNum(#{cid})"/>
2.在script标签中定义addNum()函数并编写增加购物车数量的逻辑代码
function addNum(cid){
$.ajax({
url:"/carts/"+cid+"/num/add",
type:"POST",
dataType:"JSON",
success:function(json){if(json.state ==200){
$("#goodsCount"+cid).val(json.data);//字符串+整数cid后结果为字符串//更新该商品总价/*
html()方法:
不传参:是获取某个标签内部的内容(文本或标签)
传参:将参数放到标签里面替换掉该标签原有内容
* */
var price = $("#goodsPrice"+cid).html();
var totalPrice = price * json.data;//将商品总价更新到控件中
$("#goodsCast"+cid).html(totalPrice);}else{alert("增加购物车商品数量失败"+json.message);}},
error:function(xhr){alert("增加购物车商品数量时产生未知的异常!"+xhr.message);}});}
减少商品数量
（一）减少商品数量（持久层）
1.规划sql
delete from t_cart where cid=?
2.设计接口和抽象方法
在CartMapper接口中添加抽象方法
Cart deleteByCid(Integer cid);
在CartMapper文件中添加findByCid(Integer cid)方法的映射
<delete id="deleteByCid">delete from t_cart where cid=#{cid}</delete>
（二）减少商品数量（业务层）
1.规划异常
删除时产生的异常，前面已经开发过，无需重复开发
2.设计接口和抽象方法及实现
在业务层ICartService接口中添加reduceNum()抽象方法
updateNumByCid方法.参数是cid,num,String modifiedUser,Date modifiedTime
findByCid方法.参数是cid在业务层中从购物车表查询到该商品的数量,然后再和前端传过来的减少的数量进行相减得到num所以该方法的参数是cid,uid,username
//查询购物车里的信息
Integer reduceNum(Integer cid,Integer uid ,String username);
该方法返回值void.这样的话就需要在前端页面加location.href使该页面自己跳转到自己,实现刷新页面(不建议,每次都加载整个页面,数据量太大了)
返回值是Integer类型.这样的话就把数据库中更新后的数量层层传给前端,前端接收后填充到控件中就可以了
在CartServiceImpl类中实现接口中的抽象方法
@Override
public Integer reduceNum(Integer cid, Integer uid, String username){
Cart result = cartMapper.findByCid(cid);if(result==null){thrownewCartNotFoundException("数据不存在");}
Integer pid = result.getPid();
Cart cart = cartMapper.findByUidAndPid(uid, pid);if(!cart.getUid().equals(uid)){thrownewAccessDeniedException("数据访问异常");}
Integer num=result.getNum()-1;if(num==0){
Integer integer = cartMapper.deleteByCid(cid);if(integer!=1){thrownewDeleteException("删除时异常");}}else{
Integer integer = cartMapper.updateNumByCid(cid, num, username,newDate());if(integer!=1){thrownewUpdateException("修改时产生异常");}}return result.getNum()-1;}
（三）减少商品数量（控制层）
1.处理异常
异常已经处理过，无需重复处理
2.设计请求
请求路径：/carts/{cid}/num/reduce
请求方式：post
请求参数：@PathVariable(“cid”) Integer cid, HttpSession session
响应结果JsonResult< Integer>
3.处理请求
在CartController类中添加处理请求的reduceNum()方法
@PostMapping("/{cid}/num/reduce")public JsonResult<Integer>reduceNum(@PathVariable("cid") Integer cid,HttpSession session){
Integer getuidfromsession =getuidfromsession(session);
String getusernamesession =getusernamesession(session);
Integer integer = cartService.reduceNum(cid, getuidfromsession, getusernamesession);returnnew JsonResult<>(ok,integer);}
（四）减少商品数量（前端页面）
1.首先确定在showCartList()函数中动态拼接的减少购物车按钮是绑定reduceNum()事件，如果已经添加无需重复添加
<input class="num-btn" type="button" value="-" onclick="reduceNum(#{cid})"/>
2.在script标签中定义reduceNum()函数并编写减少购物车数量的逻辑代码
function reduceNum(cid){
$.ajax({
url:"/carts/"+cid+"/num/reduce",
type:"POST",
dataType:"JSON",
success:function(json){if(json.state ==200){
$("#goodsCount"+cid).val(json.data);//字符串+整数cid后结果为字符串showCartList();//更新该商品总价/*
html()方法:
不传参:是获取某个标签内部的内容(文本或标签)
传参:将参数放到标签里面替换掉该标签原有内容
* */
var price = $("#goodsPrice"+cid).html();
var totalPrice = price * json.data;//将商品总价更新到控件中
$("#goodsCast"+cid).html(totalPrice);}else{alert("减少购物车商品数量失败"+json.message);}},
error:function(xhr){alert("减少购物车商品数量时产生未知的异常!"+xhr.message);}});}
后记
👉👉💕💕美好的一天，到此结束，下次继续努力！欲知后续，请看下回分解，写作不易，感谢大家的支持！！ 🌹🌹🌹
版权归原作者 添砖&JAVA 所有， 如有侵权，请联系我们删除。