04.SpringBoot商城项目之购物车完善

我要三个炸鸡

已于 2024-02-28 14:27:28 修改

阅读量405

点赞数 13

于 2024-02-28 14:26:52 首次发布

本文链接：https://blog.csdn.net/2201_75687374/article/details/136345362

版权

本文详细描述了如何在后端通过IRedisService接口类扩展购物车功能，包括增加更新商品数量和删除商品的方法，以及在控制层和前端JavaScript中处理这些操作的具体实现。前端提供了数量递增递减功能和删除商品的选择性操作，包括单个商品和多选商品的删除逻辑。

摘要由CSDN通过智能技术生成

1.购物车

修改IRedisService接口类，添加以下两个方法：

根据指定的商品ID更新购物车中的商品数量；
根据指定的商品ID删除购物车中的商品；

1.1.更新购物车商品数量

   public void editCart(Long userId, Long goodsId, Integer quantity) {
        //根据用户ID和商品ID判断对应购物车商品是否存在
        Boolean hasKey = hashOperations.hasKey(REDIS_CART_KEY + userId, goodsId.toString());
        if(hasKey){
            //根据用户ID和商品ID从Redis中获取指定的商品
            ...
            //更新商品数量
            ...
            //将更新的商品存入Redis中
            ...  
        }
    }

1.2.删除购物车商品

public void removeCart(Long userId, String goodsId) {
         //获取商品集合
         String[] gids = goodsId.split(",");
         //循环遍历商品ID
         for (String gid : gids) {
             //根据用户ID和商品ID判断对应购物车商品是否存在
             ...
             //判断是否存在
             ...
             //删除Redis中的对应的商品
             ...
         }
     }

2.控制层处理

在ShopCarController中添加更新购物车、删除购物车方法：

@RequestMapping("/delete")
    @ResponseBody
    public JsonResponseBody<?> delete(User user,String gids){
        ...                
    }
    
    @RequestMapping("/update")
    @ResponseBody
    public JsonResponseBody<?> update(User user,
                             ShopCarItem item){
        ...                     
    }

2.前端实现

找到templates/js目录下的cart.js，在其中加入更新购物车和删除购物车商品的方法：

/**
     * 删除购物车中的商品
     * @param gids
     */
    function delGoods(gids){
        console.log(gids);
        ...
    }
    
    /**
     * 更新购物车中指定商品的数量
     * @param gid
     * @param num
     */
    function update(gid,num){
        console.log("gid=%i,num=%i",gid,num);
        ...
    }

商量数量递增递减功能：

 /**************数量加减***************/
    $(".num .sub").click(function(){
        var num = parseInt($(this).siblings("span").text());
        if(num<=1){
            $(this).attr("disabled","disabled");
        }else{
            ...
            //获取当前行的索引
            let index = $(this).parents(".th").index()-1;
            //获取当前行的gid
            let gid=$('.th').eq(index).find("div:eq(0) input[type='hidden']").val();
            update(gid,num);
        }
    });

$(".num .add").click(function(){
        var num = parseInt($(this).siblings("span").text());
        if(num>=5){
            confirm("限购5件");
        }else{
            ...
            //获取当前行的索引
            let index = $(this).parents(".th").index()-1;
            //获取当前行的gid
            let gid=$('.th').eq(index).find("div:eq(0) input[type='hidden']").val();
            update(gid,num);
        }
    });

删除购物车中的商品：

单个商品删除，获取商品的商品ID：

 //在这里需要获取当前行商品的商品ID
    gids=$(".th").eq(index).find("div:eq(0) input[type='hidden']").val();
    //删除当前行的商品
    $(".th").eq(index).remove();
    ...
    //根据当前行的商品ID删除购物车中的商品
    delGoods(gids);

选中多个一起删除，拼接多个选中的商品ID：

 //在这里需要获取当前行商品的商品ID
    gids+=$(".th").eq(index).find("div:eq(0) input[type='hidden']").val()+",";
    //删除当前行的商品
    $(".th").eq(index).remove();
    ...
    //从购物车中删除选中的商品
    delGoods(gids.substr(0,gids.length-1));