🎁🎁静态资源及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
public class CartVo 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);
return new 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
/** 购物车数据不存在的异常 */
public class CartNotFoundException 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){
throw new CartNotFoundException("数据不存在");
}
Integer pid = result.getPid();
Cart cart = cartMapper.findByUidAndPid(uid, pid);
if (!cart.getUid().equals(uid)){
throw new AccessDeniedException("数据访问异常");
}
Integer integer = cartMapper.updateNumByCid(cid, result.getNum()+1, username, new Date());
if (integer!=1){
throw new UpdateException("修改时产生异常");
}
return result.getNum()+1;
}
（三）增加商品数量（控制层）
1.处理异常
在BaseController类中添加CartNotFoundException异常类的统一管理
else if (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);
return new 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){
throw new CartNotFoundException("数据不存在");
}
Integer pid = result.getPid();
Cart cart = cartMapper.findByUidAndPid(uid, pid);
if (!cart.getUid().equals(uid)){
throw new AccessDeniedException("数据访问异常");
}
Integer num=result.getNum()-1;
if (num==0){
Integer integer = cartMapper.deleteByCid(cid);
if (integer!=1){
throw new DeleteException("删除时异常");
}
}else {
Integer integer = cartMapper.updateNumByCid(cid, num, username, new Date());
if (integer!=1){
throw new UpdateException("修改时产生异常");
}
}
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);
return new JsonResult<>(ok,integer);
}
（四）减少商品数量（前端页面）
1.首先确定在showCartList()函数中动态拼接的减少购物车按钮是绑定reduceNum()事件，如果已经添加无需重复添加
<input class="num-btn" type="button" value="-" onclick="reduceNum(#{cid})" />
2.在script标签中定义reduceNum()函数并编写减少购物车数量的逻辑代码文章来源：https://www.toymoban.com/news/detail-454011.html
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);
}
});
}
后记
👉👉💕💕美好的一天，到此结束，下次继续努力！欲知后续，请看下回分解，写作不易，感谢大家的支持！！ 🌹🌹🌹文章来源地址https://www.toymoban.com/news/detail-454011.html
到了这里，关于基于springboot框架的电脑商城项目（八）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
