瑞吉外卖购物车减一操作

首先看下对应的前端代码(index.html)

 //菜单中减少选中的商品
            async subtractCart(item){
                let params = {
                  dishId:item.id,
                }
                if(!Array.isArray(item.flavors)){
                  params = {
                    setmealId:item.id,
                  }
                }
                const res = await updateCartApi(params)
                if(res.code === 1){
                this.dishList.forEach(dish=>{
                  if(dish.id === item.id){
                    dish.number = (res.data.number === 0 ? undefined : res.data.number)
                  }
                })
                if(this.setMealDialog.show){
                  item.number = (res.data.number === 0 ? undefined : res.data.number)
                }
                this.getCartData()
                }else{
                  this.$notify({ type:'warning', message:res.msg});
                }
            },

对应的ajax请求为

//购物车中修改商品
function  updateCartApi(data){
    return $axios({
        'url': '/shoppingCart/sub',
        'method': 'post',
        data
      })
}

通过前端可以看到在前端提交数据后,发送的资源路径为"/sub",同时要减一的为菜品时,套餐的setmealId为null,反之dishId为null。而前端发送ajax请求后,通过this.getCartData()会自动显示更新后的购物车数据,因此后端只需要返回修改成功的标识字符串即可。

当该菜品(套餐)的数目(number)大于1时,通过将number属性减一后对表进行更新即可,否则说明数目为1,直接将该菜品(套餐)从表中删除,对应的后端代码为

@PostMapping("/sub")
    public R<String> sub(@RequestBody ShoppingCart shoppingCart){
        //设置用户id
        shoppingCart.setUserId(BaseContext.getCurrentId());
        Long dishId = shoppingCart.getDishId();
        LambdaQueryWrapper<ShoppingCart> queryWrapper =  new LambdaQueryWrapper<>();
        queryWrapper.eq(ShoppingCart::getUserId,shoppingCart.getUserId());

        if(dishId != null ){ //删除的是菜品
            queryWrapper.eq(ShoppingCart::getDishId,dishId);
             ShoppingCart cartOne = shoppingCartService.getOne(queryWrapper);
             int number = cartOne.getNumber();
             if(number > 1){
                 cartOne.setNumber(number-1);
                 shoppingCartService.updateById(cartOne);
             }else{
                 //只有一份,直接删除
                 shoppingCartService.removeById(cartOne.getId());
             }
             return R.success("删除菜品成功");
        }else{ //删除的是套餐
            queryWrapper.eq(ShoppingCart::getSetmealId,shoppingCart.getSetmealId());
            ShoppingCart cartOne = shoppingCartService.getOne(queryWrapper);
            int number = cartOne.getNumber();
            if(number > 1){
                cartOne.setNumber(number-1);
                shoppingCartService.updateById(cartOne);
            }else{
                //只有一份,直接删除
                shoppingCartService.removeById(cartOne.getId());
            }
            return R.success("删除套餐成功");

        }

    }

### 外卖购物车功能实现方案 外卖购物车功能通过前后端协作完成,主要涉及以下几个核心部分: #### 1. **加入购物车** 当用户点击“加入购物车”或“+”按钮时,前端会发起个 `POST` 请求至服务器接口 `/shoppingCart/add`,用于将菜品或套餐添加到用户的购物车中[^3]。 ```javascript function addToCartApi(data) { return $axios({ 'url': '/shoppingCart/add', 'method': 'post', 'data': data }); } ``` 此操作会在数据库中记录该菜品或套餐的信息,并更新其数量。如果该菜品已存在,则仅增加数量;否则新增条记录。 --- #### 2. **查询购物车内容** 为了展示当前用户的购物车列表,前端会调用服务端的 `/shoppingCart/list` 接口获取数据[^2]。以下是后端处理逻辑的核心代码片段: ```java @GetMapping("/list") public R<List<ShoppingCart>> list() { log.info("查询购物车:{}"); // 构造查询条件 LambdaQueryWrapper<ShoppingCart> queryWrapper = new LambdaQueryWrapper<>(); queryWrapper.eq(ShoppingCart::getUserId, BaseContext.getCurrentId()); queryWrapper.orderByDesc(ShoppingCart::getCreateTime); // 执行查询并返回结果 List<ShoppingCart> list = shoppingCartService.list(queryWrapper); return R.success(list); } ``` 上述方法基于当前登录用户的 ID (`BaseContent.getCurrentId`) 进行筛选,并按创建时间降序排列显示最近的操作优先。 --- #### 3. **减少购物车内物品** 对于减少购物车内的菜品或套餐数量,前端同样通过 AJAX 发起请求至 `/shoppingCart/sub` 接口[^1]。具体实例如下: ```javascript function updateCartApi(data) { return $axios({ 'url': '/shoppingCart/sub', 'method': 'post', 'data': data }); } ``` 需要注意的是,在减少数量的过程中可能存在两个问题: - 如果未对数量进行校验,可能会导致菜品数量变为负数。 - 当数量减少至零时,应将其从购物车中移除而不是保留为无效条目[^4]。 因此,解决方案是在每次减少前验证 `number > 0` 的前提条件下执行法运算,并在数量达到零时自动清理对应的数据项。 --- #### 4. **清空购物车** 用户可以选择键清空整个购物车的内容。此时,前端向后台发送清除请求,通常采用如下形式: ```javascript function clearCartApi() { return $axios({ 'url': '/shoppingCart/clear', 'method': 'delete' }); } ``` 而后台则负责删除与当前用户关联的所有购物车记录。 --- #### 5. **总结流程** 综上所述,外卖购物车的主要交互过程可概括为以下几点: - 用户触发加购行为,前端提交 POST 请求给后端保存数据; - 页面加载时主动拉取最新购物车状态供渲染; - 支持动态调整商品数量(增/),并通过合理校验防止异常情况发生; - 提供便捷的键清空功能简化用户体验。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值