当前位置：首页 > news >正文

SpringBoot电脑商城项目--显示购物车列表

news 来源：原创 2025/6/22 7:01:18

1. 显示购物车列表-持久层

1.1 规划sql语句

在购物车表中查询用户id，商品id，购物车商品的数量，在商品表中从查询商品的价格，图片

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.pid
where uid=#{uid}
order by
t_cart.created_time desc

1.2 CartMapper编写接口和抽象方法

前端展示购物车列表时，需要展示商品的图片信息和购物车的价格数量等信息，根据用户id查询购物车信息和商品信息后，不管是返回cart对象还是product对象都不合适，pojo实体类不能包含多表查询出来的结果

创建一个vo对象。当进行select查询时，直接使用一个pojo类来接收

CartVo实体类

package com.cy.store.vo;import lombok.Data;import java.io.Serializable;/** 购物车数据的Value Object类 */
@Data
public class CartVO implements Serializable {private Integer cid;private Integer uid;private Integer pid;private Long price;private Integer num;private String title;private Long realPrice;private String image;
}

CartMapper类

    /*** 查询某用户的购物车数据* @param uid 用户id* @return 匹配的购物车数据*/List<CartVO> findVOByUid(Integer uid);

1.3 xml文件中编写sql映射

    <select id="findVOByUid" 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 uid=#{uid}order byt_cart.created_time desc</select>

1.4 进行对持久层的测试

@Testpublic void findVOByUid() {Integer uid = 1;List<CartVO> list = cartMapper.findVOByUid(uid);System.out.println(list);}

2. 显示购物车列表-业务层

2.1 编写接口和抽象方法

    /*** 根据aid查询收货地址数据* @param uid 用户id* @return 匹配的收货地址数据，如果没有匹配的数据则返回null*/List<CartVO> findVOByAid(Integer uid);

2.2 实现类实现接口，重写抽象方法

/*** 查询某用户的购物车数据* @param uid* @return*/@Overridepublic List<CartVO> findVOByAid(Integer uid) {List<CartVO> list = cartMapper.findVOByUid(uid);return list;}

3. 显示购物车列表-控制层

3.1 规划请求

请求路径：/carts/

请求方式：GET

请求参数：HttpSession session

响应结果：JsonResult<List<CartVo>>

3.2 实现请求

    /*** 获取购物车数据* @param session* @return*/@RequestMappingpublic JsonResult<List<CartVO>> getVOByAid(HttpSession session) {Integer uid = getUidFromSession(session);List<CartVO> data = cartService.findVOByAid(uid);return new JsonResult<>(OK, data);}

3.3 启动项目进行测试

4. 前端页面

4.1 注释掉cart.js文件


<!--		<script src="../js/cart.js" type="text/javascript" charset="utf-8"></script>-->

4.2 js业务代码

<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" onclick="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="+" onclick="addNum(#{cid})" />\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.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);}});}// $(function() {// 	//返回链接// 	$(".link-account").click(function() {// 		location.href = "orderConfirm.html";// 	})// })</script>