购物车列表展示

用户登录之后，进入购物车页面，即将当前用户购物车列表展示在该页面对应位置

image-20230813150844386

持久层

规划执行的SQL语句

购物车列表展示页面数据来源于t_product和t_cart两张数据库表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 SELECT
 	cid,
 	uid,
 	pid,
 	t_cart.price AS cartPrice,
 	t_cart.num AS cartNum, 
 	t_product.title AS productTitle,
 	t_product.image AS productImage,
 	t_product.price AS productPrice
FROM 
	t_cart LEFT JOIN t_product ON t_cart.pid=t_product.id 
WHERE uid=? 
ORDER BY 
	t_cart.modified_time DESC;

VO: Value Object，值对象，当进行select查询时，查询的结果数据来自于多张表，发现无法使用某个POJO实体类来接收，POJO实体类不能包含多表查询出来的结果，解决方法是：重新构建一个新的对象存储查询结果对应的映射，这种对象称之为值对象

值对象创建

在包com.bang.store.vo中创建值对象类CartProductVO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package com.bang.store.vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * 购物车商品两张表对应的值对象类
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class CartProductVO {
    Integer cid;
    Integer uid;
    Integer pid;
    Long cartPrice;
    Integer cartNum;
    String productTitle;
    String productImage;
    Long productPrice;
}

接口和抽象方法

在CartMapper接口中编写对应的抽象方法

1
2
3
4
5
6
/**
     * 查询当前用户的购物车数据列表
     * @param uid 用户id
     * @return 购物车数据列表
     */
List<CartProductVO> findVOByUid(Integer uid);

SQL映射文件配置

在CartMapper.xml中编写对应的SQL映射语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<select id="findVOByUid" resultType="com.bang.store.vo.CartProductVO">
    SELECT
    cid,
    uid,
    pid,
    t_cart.price AS cartPrice,
    t_cart.num AS cartNum,
    t_product.title AS productTitle,
    t_product.image AS productImage,
    t_product.price AS productPrice
    FROM
    t_cart LEFT JOIN t_product ON t_cart.pid=t_product.id
    WHERE uid=#{uid}
    ORDER BY
    t_cart.modified_time DESC;
</select>

单元测试

1
2
3
4
5
6
7
@Test
public void findVOByUid(){
    List<CartProductVO> cartProductVOList = cartMapper.findVOByUid(1);
    for (CartProductVO cartProductVO : cartProductVOList) {
        System.out.println(cartProductVO);
    }
}

业务层

规划异常

无新增异常

接口和抽象方法

在ICartService接口中编写对应的抽象方法

1
2
3
4
5
6
/**
     * 查询用户购物车列表数据
     * @param uid 用户id
     * @return 用户购物车列表数据
     */
List<CartProductVO> getVOByUid(Integer uid);

抽象方法实现

1
2
3
4
@Override
public List<CartProductVO> getVOByUid(Integer uid) {
    return cartMapper.findVOByUid(uid);
}

单元测试

1
2
3
4
5
6
7
@Test
public void getVOByUid(){
    List<CartProductVO> cartProductVOList = cartService.getVOByUid(1);
    for (CartProductVO cartProductVO : cartProductVOList) {
        System.out.println(cartProductVO);
    }
}

控制层

异常处理

业务层无新增异常

设计请求

1
2
3
4
request url: /cart/
request method: GET
request params: HttpSession session
response data: new JsonResult<List<CartProductVO>>

处理请求

1
2
3
4
5
6
@RequestMapping({"","/"})
public JsonResult<List<CartProductVO>> getVOByUid(HttpSession session){
    Integer uid = getUidFromSession(session);
    List<CartProductVO> cartProductVOList = cartService.getVOByUid(uid);
    return new JsonResult<>(OK,"购物车获取数据成功",cartProductVOList);
}

前端页面

购物车页面一加载，就向后端发送请求，获取当前用户购物车列表数据，并展示在购物车页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<script type="text/javascript">
    //购物车页面一加载就向后端发送请求
    $(document).ready(function (){
    showCartList();
})
function showCartList(){
    $.ajax({
        url: "/cart/"
        ,type: "GET"
        ,success: function (data){
            if(data.state == 200){
                alert("购物车数据获取成功");
                $("#cart-list").empty();
                cartList = data.data;
                for(let i=0;i<cartList.length;i++){
                    htmlContent = "<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}</td>\n" +
                        "<td>¥<span id=\"goodsPrice#{cid}\">#{price}</span></td>\n" +
                        "<td>\n" +
                        "<input id=\"price-#{cid}\" 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 id=\"price+#{cid}\" class=\"num-btn\" type=\"button\" value=\"+\" onclick=\"addNum(1)\" />\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>";
                    htmlContent = htmlContent.replace("#{cid}",cartList[i].cid);
                    htmlContent = htmlContent.replace("#{image}",cartList[i].productImage);
                    htmlContent = htmlContent.replace("#{title}",cartList[i].productTitle+(cartList[i].cartPrice-cartList[i].productPrice));
                    htmlContent = htmlContent.replace("#{num}",cartList[i].cartNum);
                    htmlContent = htmlContent.replace("#{price}",cartList[i].cartPrice);
                    htmlContent = htmlContent.replace("#{totalPrice}",cartList[i].cartNum*cartList[i].cartPrice);
                    $("#cart-list").append(htmlContent);
                }

            }else{
                alert("购物车获取数据失败 "+data.message);
            }
        }
        ,error:function (xmh){
            alert("购物车获取数据发生未知异常"+xmh.status);
        }
    });
}
</script>