(十四）搭建springboot商城--显示勾选的购物车数据

似忆

已于 2022-09-05 10:46:04 修改

阅读量249

点赞数

文章标签： java 数据库开发语言

于 2022-09-02 10:47:11 首次发布

本文链接：https://blog.csdn.net/qq_59159431/article/details/126655814

版权

1 持久层

1.1 规划SQL语句

用户在购物车列表页通过随机勾选相关的商品，在点击结算按钮后，跳转到结算页面，在这个页面中需要展示用户在上个页面所勾选的购物车对应的数据。列表的展示，而展示的内容来自于购物车的表。两个页面需要将用户勾选的多个cid传递给下个页面。

select

        cid,

        uid,

        pid,

       t_cart.price,

        t_cart.num,

        t_product.image,

        t_product.title

        t_product.price as realprice

from

        t_cart left join t_product on t_cart.pid=t_product.id

where

cid in (?,?,?)

order by

t_cart.created_time DESC

1.2 接口和抽象方法

List<CartVo> findVoByCid(Integer uid);

1.3配置SQL映射

<select id="findVoByCid" resultType="com.cy.store.vo.CartVo">
        select

            cid,

            uid,

            pid,

            t_cart.price,

            t_cart.num,

            t_product.image,

            t_product.title,

            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>

进行单元测试。

 @Test
    public void findVoByCid(){
        Integer[] cids={2,4,5,8,9};
        System.out.println(cartMapper.findVoByCid(cids));
    }

2 业务层

2.1 规划异常

没有需要进行异常的规划

2.2 设计业务层接口中抽象方法

  List<CartVo> getVoByCid(Integer[] cids,Integer uid);

2.3 完成抽象方法的设计

@Override
    public List<CartVo> getVoByCid(Integer[] cids, Integer uid) {
        List<CartVo> list = cartMapper.findVoByCid(cids);
        Iterator<CartVo> it = list.iterator();
        while (it.hasNext()){
            CartVo cartVo = it.next();
            if(!cartVo.getUid().equals(uid)){
                list.remove(cartVo);
            }
        }
        return list;
    }

3 控制层

3.1 请求设计

/carts/list

Integer cids,httpSession session

POST

JsonResult<List<CartVo>>

3.2 完成请求处理方法的定义和声明。

@RequestMapping("list")
    public JsonResult<List<CartVo>> getVoByCid(HttpSession session,Integer[] cids){
        List<CartVo> data = cartService.getVoByCid(cids,getUidFromSession(session);
        return new JsonResult<>(OK,data);
    }

登陆测试

4 前端页面

4.1 增加购物车商品数量

1.将cart.html页面中button改为submit

2.orderConfirm.html页面中添加自动加载从上个页面中传递过来的cids数据，再去请求ajax，在其中进行填充当前页面的某个区域中。

<script type="text/javascript">
			$(document).ready(function () {
				showCartList();
			});
			function showCartList(){
				//清空tbody标签中数据
				$("#cart-list").empty();
				console.log(location.search.substring(1));
				$.ajax(
						{
							url:"/carts/list",
							type:"GET",
							data:location.search.substring(1),
							dataType:"JSON",
							success:function (json) {
								if(json.state==200){
									let list=json.data;
									let allCount=0;
									let allPrice=0;
									for (let i = 0; i < list.length; i++) {
										let 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}/g,list[i].image);
										tr=tr.replace(/#{title}/g,list[i].title);
										tr=tr.replace(/#{price}/g,list[i].price);
										tr=tr.replace(/#{num}/g,list[i].num);
										tr=tr.replace(/#{totalPrice}/g,list[i].price*list[i].num);
										$("#cart-list").append(tr);
										allCount +=list[i].num;
										allPrice +=list[i].price*list[i].num;
									}
									$("#all-count").html(allCount);
									$("#all-price").html(allPrice);
								}
							},
							error:function (xhr) {
								alert("购物车列表产生未知异常"+xhr.status)
							}
						}
				);
			}


		</script>

4.2 购物车页面显示收货地址列表

1.收货地址存放在一个select下拉列表中，将查询到的当前登陆用户的收货地址动态的加载到这个下拉列表中。从数据库的角度，是一个select查询语句。已经编写了根据用户的uid来查询当前用户的收货地址数据。

2.OrderConfirm.html页面中，收货地址数据的展示需要自动进行加载，需要将方法的逻辑放在ready函数中。

		<script type="text/javascript">
			$(document).ready(function () {
				showCartList();
				showAddressList()
			});

3.声明和定义showAddressList（）方法，方法中发送ajax请求即可。

function showAddressList2(){
				//清空select标签中数据
				$("#address-list").empty();
				$.ajax(
						{
							url:"/addresses",
							type:"GET",
							dataType:"JSON",
							success:function (json) {
								if(json.state==200){
									let list=json.data;
									for (let i = 0; i < list.length; i++) {
									let opt="<option value='#{aid}'>#{name}&nbsp;&nbsp;&nbsp;#{tag}&nbsp;&nbsp;&nbsp;#{provinceName}#{cityName}#{areaName}#{address}&nbsp;&nbsp;&nbsp;#{phone}</option>\n"
									opt=opt.replace(/#{aid}/g,list[i].aid)
									opt=opt.replace(/#{name}/g,list[i].name)
									opt=opt.replace(/#{tag}/g,list[i].tag)
									opt=opt.replace(/#{provinceName}/g,list[i].provinceName)
									opt=opt.replace(/#{cityName}/g,list[i].cityName)
									opt=opt.replace(/#{areaName}/g,list[i].areaName)
									opt=opt.replace(/#{address}/g,list[i].address)
									opt=opt.replace(/#{phone}/g,list[i].phone)
										$("#address-list").append(opt)
									}
								}
							},
							error:function (xhr) {
								alert("购物车收货地址列表产生未知异常"+xhr.status)
							}
						}
				);
			}

3 先登陆，再访问项目的结算页面，测试收货地址的列表加载。