显示勾选的购物车数据

用户在购物车页面勾选指定商品，然后点击结算按钮，跳转到订单结算页面，展示用户勾选的数据。订单结算页面数据的展示内容还是来自于购物车数据表

image-20230814091515399

image-20230814091541864

持久层

规划需要执行的SQL语句

两个页面跳转，传递用户勾选商品的cid列表，然后根据cid查询对应的数据，本质是一条查询语句

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 cid in ?
ORDER BY
        t_cart.modified_time DESC;

接口和抽象方法

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

1
2
3
4
5
6
/**
     * 根据cid列表查询对应的购物车数据
     * @param cids 购物车数据id列表
     * @return 购物车数据列表
     */
List<CartProductVO> findByCids(Integer[] cids);

SQL映射文件配置

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<select id="findByCids" resultType="com.bang.store.vo.CartProductVO" parameterType="java.util.List">
    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 cid in
    <foreach collection="array" index="index" item="item" open="(" close=")" separator=",">
        #{item}
    </foreach>
    ORDER BY
    t_cart.modified_time DESC;
</select>

单元测试

1
2
3
4
5
6
7
8
@Test
public void findByCids(){
    Integer[] cids = {2,4,6};
    List<CartProductVO> cartProductVOList = cartMapper.findByCids(cids);
    for (CartProductVO cartProductVO : cartProductVOList) {
        System.out.println(cartProductVO);
    }
}

业务层

规划异常

没有需要定义的新异常

接口和抽象方法

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

1
2
3
4
5
6
7
/**
     * 根据cid列表查询购物车数据
     * @param uid 用户id
     * @param cids 购物车id列表
     * @return 购物车数据列表
     */
List<CartProductVO> getVOByCids(Integer uid,Integer[] cids);

抽象方法实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@Override
public List<CartProductVO> getVOByCids(Integer uid, Integer[] cids) {
    //查询购物车数据列表
    List<CartProductVO> cartProductVOList = cartMapper.findByCids(cids);
    //删除不匹配的数据
    Iterator<CartProductVO> iterator = cartProductVOList.listIterator();
    while (iterator.hasNext()){
        CartProductVO cartProductVO = iterator.next();
        if(!cartProductVO.getUid().equals(uid)){
            iterator.remove();
        }
    }
    return cartProductVOList;
}

List列表循环删除不符合条件元素的参考做法:参考资料

单元测试

1
2
3
4
5
6
7
8
9
@Test
public void getVOByCids(){
    Integer uid=1;
    Integer[] cids = {3,5,2};
    List<CartProductVO> cartProductVOList = cartService.getVOByCids(uid, cids);
    for (CartProductVO cartProductVO : cartProductVOList) {
        System.out.println(cartProductVO);
    }
}

控制层

异常处理

业务层无新增异常，无需进行异常处理

设计请求

1
2
3
4
request url: /cart/list
request method: POST
request params: List<Integer> cids,HttpSession session
response data: new JsonResult<List<CartProductVO>>

处理请求

1
2
3
4
5
@RequestMapping("/list")
public JsonResult<List<CartProductVO>> getVOByCids(Integer[] cids,HttpSession session){
    List<CartProductVO> cartProductVOList = cartService.getVOByCids(getUidFromSession(session), cids);
    return new JsonResult<>(OK,"数据获取成功",cartProductVOList);
}

单元测试

先登录，再访问http://localhost:8080/cart/list?cids=2&cids=3，会进行参数自动映射成整数数组(这里参数cids定义用数组不用列表的原因：url中参数可以自动映射成数组，而无法映射成list)

前端页面

1.cart.html页面点击结算按钮，跳转到orderConfirm.html订单确认界面

2.在orderConfirm.html界面，根据上个界面传过来的cid列表，向后端页面发送请求，获取对应购物车数据列表并展示在页面

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
<script type="text/javascript">

    //页面一加载就向后端发送请求
    $(document).ready(function (){
    showCartList();
})
function showCartList(){
    $.ajax({
        url: "/cart/list"
        ,type: "GET"
        ,data: location.search.substr(1) //获取表单参数列表
        ,dataType: "JSON"
        ,success: function (data){
            if(data.state == 200){
                alert("购物车数据获取成功");
                $("#cart-list").empty();
                let cartList = data.data;
                let totalCount=0;
                let totalMoney=0;
                for(let i=0;i<cartList.length;i++){
                    let htmlContent='<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>'
                    htmlContent = htmlContent.replace("#{image}",cartList[i].productImage);
                    htmlContent = htmlContent.replace("#{title}",cartList[i].productTitle);
                    htmlContent = htmlContent.replace("#{price}",cartList[i].cartPrice);
                    htmlContent = htmlContent.replace("#{num}",cartList[i].cartNum);
                    htmlContent = htmlContent.replace("#{totalprice}",cartList[i].cartPrice*cartList[i].cartNum);
                    $("#cart-list").append(htmlContent);
                    totalCount+=cartList[i].cartNum;
                    totalMoney+=cartList[i].cartNum*cartList[i].cartPrice;
                }
                $("#all-count").html(totalCount);
                $("#all-price").html(totalMoney);

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

订单确认页面用户收货地址列表—前端页面

image-20230814111207840

根据用户uid查询用户列表，展示在orderConfirm.html的下拉列表中，根据用户uid查询对应的地址列表在后端已有对应的请求接口/address/get_by_uid

1
2
3
4
5
//页面一加载就向后端发送请求
$(document).ready(function (){
    showCartList();
    showAddressList();
})
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
function showAddressList() {
    $.ajax({
        url: "/address/get_by_uid"
        ,type: "GET"
        ,dataType: "JSON"
        ,success: function (data){
            if(data.state == 200){
                alert("收获地址数据获取成功");
                $("#address-list").empty();
                let addressList = data.data;
                for(let i=0;i<addressList.length;i++){
                    let htmlContent='<option>#{name}&nbsp;&nbsp;&nbsp;#{tag}&nbsp;&nbsp;&nbsp;#{address}&nbsp;&nbsp;&nbsp;#{phone}</option>';
                    htmlContent = htmlContent.replace("#{name}",addressList[i].name);
                    htmlContent = htmlContent.replace("#{tag}",addressList[i].tag);
                    htmlContent = htmlContent.replace("#{address}",addressList[i].address);
                    htmlContent = htmlContent.replace("#{phone}",addressList[i].phone);
                    $("#address-list").append(htmlContent);
                }
            }else{
                alert("收货地址数据获取失败" +data.message);
            }
        }
        ,error:function (xmh){
            alert("收货地址数据获取发生未知异常"+xmh.status);
        }
    });
}