1.持久层
1.1规划需要执行的SQL语句
这里需要将商品表和购物车表进行连表查询
显示某用户的购物车列表数据的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
uid = #{uid}
order by
t_cart.created_time desc #进行排序使最新加入购物车的在最上面
1.2 VO对象：显示给前端页面的数据【多表操作】
VO全称Value Object,值对象。当进行select查询时,查询的结果属于多张表中的内容,此时发现结果集不能直接使用某个POJO实体类来接收,因为POJO实体类不能包含多表查询出来的信息,解决方式是:重新去构建一个新的对象,这个对象用于存储所查询出来的结果集对应的映射,所以把这个对象称之为值对象.
在store包下创建一个vo包,在该包下面创建CartVO类,不需要继承BaseController类,那相应的就需要单独实现Serializable接口
/**
* 不需要继承BaseController类,那相应的就需要单独实现Serializable接口
* 购物车数据的VO类（Value Object）
*/
@Data
@NoArgsConstructor
@AllArgsConstructor
public class CartVO implements Serializable {
private Integer cid;
private Integer uid;
private Integer pid;
private Long price;
private Integer num;
private String title;
private String image;
private Long realPrice;
}
2.在CartMapper接口中添加抽象方法
/**
* 查询某用户的购物车数据
* @param uid 用户id
* @return 该用户的购物车数据的列表
*/
List<CartVO> findVOByUid(Integer uid);
1.3 编写映射
<select id="findVOByUid" resultType="com.example.mycomputerstore.VO.CartVO" >
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 uid = #{uid}
ORDER BY t_cart.created_time DESC
</select>1.4 单元测试
在CartMapperTests测试类中添加findVOByUid()方法的测试
@Test
public void findVOByUid(){
System.out.println(cartMapper.findVOByUid(2));
}2.业务层
2.1 规划异常
查询不到就返回空,不需要规划异常【查询没有异常】
2.2设计接口和抽象方法及实现
1.在ICartService接口中添加findVOByUid()抽象方法
/**
* 查询某用户的购物车数据
* @param uid 用户id
* @return 该用户的购物车数据的列表
*/
List<CartVO> getVOByUid(Integer uid);
2.在CartServiceImpl类中重写业务接口中的抽象方法
@Override
public List<CartVO> getVOByUid(Integer uid) {
return cartMapper.findVOByUid(uid);
}
2.3单元测试
该业务层只是调用了持久层的方法并返回,可以不再测试
3.控制层
3.1 处理异常
业务层没有抛出异常,所以这里不需要处理异常
3.2 设计请求
- /carts/
- GET
- HttpSession session
- JsonResult<List<CartVO>>
3.3 处理请求
在CartController类中编写处理请求的代码。
/**
* 根据用户id查询购物车
* @param session: 为了获取用户的uid
* @return
*/
@GetMapping({"/",""})//表示直接输入/cart就可以访问
public JsonResult<List<CartVO>> getVOByUid(HttpSession session){
List<CartVO> data = cartService.getVOByUid(getuidFromSession(session));
return new JsonResult<>(OK,data);
}4. 前端页面
1.将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"然后给该按钮绑定一个点击事件实现页面跳转和数据传递,但是这样太麻烦了
submit和button的区别
submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是type属性和处发响应的事件上，submit会提交表单，button不会提交表单. submit默认为form提交，可以提交表单（form）. button则响应用户自定义的事件,如果不指定onclick等事件处理函数，它是不做任何事情.
2.注意点：form表单结构。
-
action="orderConfirm.html"
-
id="cart-list"
-
type="button" value=" 结 算 "
3.使用ajax发起请求用户购物车的数据
<script type="text/javascript">
/*
* 读取当前页面的加载
* */
$(document).ready(function (){
//展示购物车列表
showCartList()
})
//展示购物车列表
function showCartList(){
//清空tbody
$("#cart-list").empty()
$.ajax({
url:"/cart",
type:"GET",
dataType:"JSON",
success: function (e) {
console.log(e.data)
//获取数据
let list = e.data;
for (let i=0;i<list.length;i++) {
/*
* name="cids" value="#{cid}":为了传到“确认支付”页面做准备
* ..#{image}collect.png==数据库中的样式【/images/portal/00GuangBo1040A5GBR0731/】
* 实际上需要的是【../images/portal/00GuangBo1040A5GBR0731/collect.png】
* msg:表示真实价格
* */
let 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 id="price-#{cid}" type="button" value="-" class="num-btn" onclick="reduceNum(2)" />\n' +
'<input id="goodsCount#{cid}" type="text" size="2" readonly="readonly" class="num-text" value="#{num}">\n' +
'<input id="price+#{cid}" class="num-btn" type="button" value="+" onclick="addNum(2)" />\n' +
'</td>\n' +
'<td><span id="goodsCast#{cid}">#{totalPrice}</span></td>\n' +
'<td>\n' +
'<input type="button" onclick="delCartItem(this)" class="cart-del btn btn-default btn-xs" value="删除" />\n' +
'</td>\n' +
'</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(/#{msg}/g,list[i].realPrice)
tr=tr.replace("#{num}",list[i].num)
//单价
tr=tr.replace("#{singlePrice}",list[i].price)
//总价
tr=tr.replace(/#{totalPrice}/g,list[i].price*list[i].num)
//将数据加入表中
$("#cart-list").append(tr);
}
},
error(xhr){
alert("购物车列表数据加载产生未知的异常"+xhr.status)
}
})
}
</script>
这tr变量是怎么声明的呢:
先敲下var=‘’;然后在上面的html里面找到tbody下的任意一个tr标签复制在单引号里面,然后删掉制表符.最后对该字符串稍加改动:
1.第18行name=“cids” value="#{cid}"是为"点击结算按钮跳转到确认订单页面"模块做准备。这两个属性都是自己添加的,在tbody复制的tr标签里面没有,这两个属性是为了跳转到"确认订单页"时能够携带该参数(比如传递cids=1)
2.第26οnclick="addNum(#{cid})“是为"在购物车列表增加商品数量"模块做准备。是为了点击”+"后能调用addNum函数并传入对应的cid
3.第22行id="goodsPrice#{cid}"和第25行id="goodsCount#{cid}"和第28行id="goodsCast#{cid}"都是为"在购物车列表增加商品数量"模块做准备。在后端更新完商品数量相应的前端页面也要更新:
根据id="goodsCount#{cid}"获取数量相关的控件后更新其value属性的值(value属性用.val()赋值)
根据id="goodsPrice#{cid}"获取价格相关的控件后拿到其单价
将单价和数量相乘后,根据id="goodsCast#{cid}"获取总价相关的控件并更新其文本值(文本用.html()更新)
4.上面这三条都是和本模块无关的,其余的修改都是和本模块相关的,在tbody复制的tr标签里面都有,比葫芦画瓢就可以了
点击"结算"按钮页面跳转的实现:在cart.html页面点击"结算"后会跳转到"确认订单页"并将表单中的数据作为参数传递给"确认订单页"
