基于springboot框架的电脑商城项目（九）

🎁🎁静态资源及sql文件分享
链接：https://pan.baidu.com/s/1X-yjmQcPD3PqS21x0HplNA?pwd=23gr
提取码：23gr

确认订单、显示收货地址功能的实现

显示勾选的购物车信息

（一）显示勾选的购物车信息（持久层）

1.规划sql

用户在购物车列表页中通过随机勾选相关的商品,在点击"结算"按钮后跳转到"确认订单页",在这个页面中需要展示用户在上个页面所勾选的"购物车列表页"中对应的数据.且展示的内容还是来自于购物车表,所以"购物车列表页"需要将用户勾选的商品id传递给"确认订单页"

select
    cid,
    uid,
    pid,
    t_cart.price,
    t_cart.num,
    title,
    t_product.price as realPrice,
    image
from t_cart
left join t_product on t_cart.pid = t_product.id
where
    cid in(?,?,?)
order by
    t_cart.created_time desc

2.设计接口和抽象方法

在CartMapper接口中添加findByCid2抽象方法

    List<CartVo>findByCid2(Integer[] cids);

在CartMapper.xml文件中添加SQL语句的映射配置

<select id="findByCid2" 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_product.id=t_cart.pid
        where cid in(<foreach collection="array" item="cid" separator=",">
            #{cid}</foreach>)
        order by t_cart.created_time desc

    </select>

foreach循环就是一个for循环
collection标识循环的是list集合还是数组,如果是list集合就用collection=“list”
item用来接收每次循环获取的值
separator标识循环出来的值中间用什么隔开,且最后循环出来的值后面不加

（二）显示勾选的购物车信息（业务层）

1.规划异常

查询语句,没有需要规划的异常,在业务层判断这几条购物车商品的数据归属是否正确,如果不正确也不需要抛出异常,直接从查询到的数据中移除该商品就行了

2.设计接口和抽象方法及实现

在ICartService接口中添加getByCids()抽象方法

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

在CartServiceImpl类中重写业务接口中的抽象方法

  @Override
    public List<CartVo>getByCids(Integer uid, Integer[] cids){
        List<CartVo> result = cartMapper.findByCid2(cids);if(result==null){thrownewCartNotFoundException("商品不存在");}
        Iterator<CartVo> iterator = result.iterator();while(iterator.hasNext()){
            CartVo cartVo = iterator.next();
            Integer uid1 = cartVo.getUid();if(!uid1.equals(uid)){
                result.remove(cartVo);thrownewAccessDeniedException("数据访问异常");}}return result;}

（三）显示勾选的购物车信息（控制层）

1.处理异常

没有异常需要处理

2.设计请求

请求路径：/carts/list
请求方式：GET
请求参数：Integer[] cids, HttpSession session
响应结果：JsonResult<List< CartVO>>

3.处理请求

在CartController类中添加处理请求的findVOByCids()方法。

@GetMapping("/list")public JsonResult<List<CartVo>>findVOByCids(Integer[] cids,HttpSession session){
    List<CartVo> cartVoList = cartService.getByCids(getuidfromsession(session), cids);returnnew JsonResult<>(ok,cartVoList);}

（四）显示勾选的购物车信息（前端页面）

orderConfirm.js文件在orderConfirm.html页面中无用,所有在orderConfirm.html中注释掉

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

在orderConfirm.html页面编写js代码

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

            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>

订单显示收货地址

1.在orderConfirm.html页面中的ready函数中添加showAddressList方法的调用,使确认订单页加载时能够自动从后端获取该用户地址填充到select控件中并将第一个地址显示出来

$(document).ready(function(){showCartList();showAddressList();});

2.在orderConfirm.html页面中编写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}&nbsp;&nbsp;&nbsp;#{tag}&nbsp;&nbsp;&nbsp;#{provinceName}#{cityName}#{areaName}#{address}&nbsp;&nbsp;&nbsp;#{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);}});}

后记
👉👉💕💕美好的一天，到此结束，下次继续努力！欲知后续，请看下回分解，写作不易，感谢大家的支持！！ 🌹🌹🌹