显示勾选
1. 持久层
1.1 规划sql语句
用户在购物车列表页中通过随即勾选相关的商品，在点击"结算按钮后，跳转到"结算"页面，在这个页面中需要展示用户在上个页面所勾选的购物车对应的数据，列表的展示，展示的内容还是在于购物车的表。两个页面需要用户勾选的多个cid传递给下一个页面
select cid,
uid,
pid,
t_cart.num,
t_product.title,
t_product.price,
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 (
<foreach collection="array" item="cid" separator=",">
#{cid}
</foreach>
)
order by
t_cart.created_time desc
1.2 mapper层接口和抽象方法
java
/**
* 批量删除购物车数据
* @param cids 需要删除的购物车数据的id
* @return 删除的行数
*/
List<CartVO> findVoByCid(Integer[] cids);1.3 sql映射
<foreach>标签: 用于动态生成一组 cid 值，以支持 SQL 查询中对多个 uid 的筛选。
适用场景：当传入参数是一个包含多个 cid 的数组时，此标签会将每个元素展开，并用逗号 , 分隔。
- collection="array"：指定要遍历的集合类型，这里表示传入的是一个数组。
- item="cid"：定义迭代变量名称，在每次循环中代表数组的一个元素。
- separator=","：设置每次迭代之间插入的分隔符，这里是逗号。
XML
<!-- collection cid的类型是数组类型
item 字段是cid
separator 每一个cid由, 分隔 -->
<select id="findVoByCid" resultType="com.cy.store.vo.CartVO">
select cid,
uid,
pid,
t_cart.num,
t_product.title,
t_product.price,
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 (
<foreach collection="array" item="cid" separator=",">
#{cid}
</foreach>
)
order by
t_cart.created_time desc
</select>1.4 测试
java
@Test
public void findVoByCid() {
Integer[] cids = new Integer[]{1,2};
List<CartVO> list = cartMapper.findVoByCid(cids);
System.out.println(list);
}2. 业务层
2.1 编写接口和抽象方法
这里参数需要用户id来判断数据库中购物车的信息是否是用户，不是的话需要忽略非用户的商品
java
/**
* 查询某用户的购物车数据
* @param uid 用户id
* @return 购物车数据列表
*/
List<CartVO> findVOByUid(Integer uid,Integer[] cids);2.2 实现类实现接口重写抽象方法
java
/**
* 展示勾选中的商品信息
* @param uid 用户id
* @param cids
* @return
*/
@Override
public List<CartVO> findVOByUid(Integer uid, Integer[] cids) {
// 查询购物车数据
List<CartVO> list = cartMapper.findVoByCid(cids);
// 通过迭代器迭代遍历，判断购物车数据是否是用户的
Iterator<CartVO> iterator = list.iterator();
while (iterator.hasNext()){
CartVO cartVO = iterator.next();
if (!cartVO.getUid().equals(uid)){
// 从集合中溢出这个元素
iterator.remove();
}
}
return list;
}3. 控制层
根据请求信息编写controller类
java
/**
* 显示购物车中勾选的信息
* @param cids
* @param session
* @return
*/
@RequestMapping("/list")
public JsonResult<List<CartVO>> list(Integer[] cids,HttpSession session) {
List<CartVO> list = cartService.findVOByCid(getUidFromSession(session), cids);
return new JsonResult<>(OK, list);
}重启项目进行测试
4. 前端页面
代码：
javascript
<script type="text/javascript">
$(document).ready(function() {
showCartList();
// showAddressList();
});
function showCartList() {
$("#cart-list").empty();
$.ajax({
url: "/carts/list",
type: "GET",
// 截取请求参数
data: location.search.substr(1),
dataType: "JSON",
success: function(json) {
if (json.state == 200) {
var list = json.data;
console.log(location.search.substr(1));
var allCount = 0;
var allPrice = 0;
for (var i = 0; i < list.length; i++) {
var tr = '<tr>\n' +
'<td><img src="..#{image}collect.png" class="img-responsive" /></td>\n' +
'<td>#{title}</td>\n' +
'<td>¥<span>#{price}</span></td>\n' +
'<td>#{num}</td>\n' +
'<td><span>#{totalPrice}</span></td>\n' +
'</tr>';
tr = tr.replace("#{image}",list[i].image);
tr = tr.replace("#{title}",list[i].title);
tr = tr.replace("#{price}",list[i].realPrice);
tr = tr.replace("#{num}",list[i].num);
tr = tr.replace("#{totalPrice}",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 (xhr) {
alert("在确认订单页加载勾选的购物车数据时发生未知的异常"+xhr.status);
}
});
}
</script>确认订单页收货地址
- 收货地址存放在一个select下拉列表中，将查询到的当前登录用户的收货地址动态的加载到这个下拉列表中
- OrderConfirm.html页面中，收获地址数据的展示需要自动进行加载，需要用到ready()函数
代码如下：
javascript
<script type="text/javascript">
$(document).ready(function() {
showCartList();
showAddressList();
});
function showAddressList() {
$("#address-list").empty();
$.ajax({
url: "/addresses",
type: "GET",
dataType: "JSON",
success: function(json) {
if (json.state == 200) {
var list = json.data;
for (var i = 0; i < list.length; i++) {
/*
value="#{aid}"在该模块没有用,但是扔写上,只要是从数据库查到到的数据,都要让前端页
面的该条数据和id绑定(因为可能干别的什么时需要用到,就比如说下一个"创建订单"模块
就需要根据前端传给后端的aid查询用户选中的是哪一个地址然后将其加入订单表)
* */
var opt = '<option value="#{aid}">#{name} #{tag} #{provinceName}#{cityName}#{areaName}#{address} #{tel}</option>';
opt = opt.replace("#{aid}",list[i].aid);
opt = opt.replace("#{name}",list[i].name);
opt = opt.replace("#{tag}",list[i].tag);
opt = opt.replace("#{provinceName}",list[i].provinceName);
opt = opt.replace("#{cityName}",list[i].cityName);
opt = opt.replace("#{areaName}",list[i].areaName);
opt = opt.replace("#{address}",list[i].address);
opt = opt.replace("#{tel}",list[i].tel);
$("#address-list").append(opt);
}
}
},
error: function (xhr) {
alert("在确认订单页加载用户地址时发生未知的异常"+xhr.status);
}
});
}
</script>