SpringBoot电脑商城项目--显示勾选+确认订单页收货地址
显示勾选
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层接口和抽象方法
/*** 批量删除购物车数据* @param cids 需要删除的购物车数据的id* @return 删除的行数*/List<CartVO> findVoByCid(Integer[] cids);
1.3 sql映射
<foreach>标签:用于动态生成一组 cid 值，以支持 SQL 查询中对多个 uid 的筛选。
适用场景：当传入参数是一个包含多个 cid 的数组时，此标签会将每个元素展开，并用逗号 , 分隔。
- collection="array"：指定要遍历的集合类型，这里表示传入的是一个数组。
- item="cid"：定义迭代变量名称，在每次循环中代表数组的一个元素。
- separator=","：设置每次迭代之间插入的分隔符，这里是逗号。
<!-- collection cid的类型是数组类型item 字段是cidseparator 每一个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 realPricefrom t_cartLEFT JOIN t_product ON t_cart.pid = t_product.idwhere cid in (<foreach collection="array" item="cid" separator=",">#{cid}</foreach>)order byt_cart.created_time desc</select>1.4 测试
@Testpublic void findVoByCid() {Integer[] cids = new Integer[]{1,2};List<CartVO> list = cartMapper.findVoByCid(cids);System.out.println(list);}2. 业务层
2.1 编写接口和抽象方法
这里参数需要用户id来判断数据库中购物车的信息是否是用户，不是的话需要忽略非用户的商品
/*** 查询某用户的购物车数据* @param uid 用户id* @return 购物车数据列表*/List<CartVO> findVOByUid(Integer uid,Integer[] cids);2.2 实现类实现接口重写抽象方法
/*** 展示勾选中的商品信息* @param uid 用户id* @param cids* @return*/@Overridepublic 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类
/*** 显示购物车中勾选的信息* @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. 前端页面
代码：
<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()函数
代码如下：
<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>