海上捞火锅

海上捞火锅


修改购物车中菜品数量

<p>[TOC]</p> <h5>简要描述</h5> <ul> <li>购物车中修改菜品数量</li> </ul> <h5>触发事件</h5> <pre><code>&lt;img src="./images/subtract.png" @click="cartNumberSubtract(item)" /&gt;</code></pre> <h5>接口调用</h5> <pre><code>async cartNumberSubtract(item){ let params = { dishId:item.dishId, setmealId:item.setmealId, } const res = await updateCartApi(params) if(res.code === 1){ this.dishList.forEach(dish=&gt;{ if(dish.id === (item.dishId || item.setmealId)){ dish.number = (res.data.number === 0 ? undefined : res.data.number) } }) this.getCartData() }else{ this.$notify({ type:'warning', message:res.msg}); } },</code></pre> <h5>请求URL</h5> <ul> <li><code>[context-path]/shoppingCart/sub</code></li> </ul> <h5>请求方式</h5> <ul> <li>POST </li> </ul> <h5>请求参数</h5> <ul> <li>携带参数可能是dish_id 也可能是 setmealId,所以我们需要实体类shoppingCart来接收;</li> </ul> <table> <thead> <tr> <th style="text-align: left;">参数名</th> <th style="text-align: left;">类型</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td style="text-align: left;">dishid</td> <td style="text-align: left;">bigint</td> <td>菜品编号</td> </tr> <tr> <td style="text-align: left;">setmealid</td> <td style="text-align: left;">bigint</td> <td>套餐编号</td> </tr> </tbody> </table> <h5>接口API</h5> <pre><code>function updateCartApi(data){ return $axios({ 'url': '/shoppingCart/sub', 'method': 'post', data }) }</code></pre> <h5>返回示例</h5> <pre><code>code: 1 data: {id: "1609088693839339522", name: "猪脑", userId: "1605795539925098497", dishId: "1605796042641793026",…} map: {} msg: null</code></pre> <h5>返回参数说明</h5> <table> <thead> <tr> <th style="text-align: left;">参数名</th> <th style="text-align: left;">类型</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td style="text-align: left;">code</td> <td style="text-align: left;">int</td> <td>返回码,1:成功;0或其他:失败</td> </tr> <tr> <td style="text-align: left;">data</td> <td style="text-align: left;">object</td> <td>返回数据</td> </tr> <tr> <td style="text-align: left;">map</td> <td style="text-align: left;">map</td> <td>动态数据</td> </tr> <tr> <td style="text-align: left;">msg</td> <td style="text-align: left;">string</td> <td>错误信息</td> </tr> </tbody> </table> <h5>备注</h5> <p>data有两种返回值</p> <pre><code>public static &lt;T&gt; R&lt;T&gt; success(T object) { R&lt;T&gt; r = new R&lt;T&gt;(); r.data = object; r.code = 1; return r; } public static &lt;T&gt; R&lt;T&gt; error(String msg) { R r = new R(); r.msg = msg; r.code = 0; return r; }</code></pre> <h5>后端接口请求参数</h5> <ul> <li>@RequestBody 接收前端传递给后端的json字符串中的数据(请求体ShoppingCart中的数据)</li> </ul> <h5>后端代码</h5> <pre><code>@PostMapping("/sub") @Transactional public R&lt;ShoppingCart&gt; sub(@RequestBody ShoppingCart shoppingCart){ Long dishId = shoppingCart.getDishId(); LambdaQueryWrapper&lt;ShoppingCart&gt; queryWrapper = new LambdaQueryWrapper&lt;&gt;(); //代表数量减少的是菜品数量 if (dishId != null){ //通过dishId查出购物车对象 queryWrapper.eq(ShoppingCart::getDishId,dishId); //这里必须要加两个条件,否则会出现用户互相修改对方与自己购物车中相同套餐或者是菜品的数量 queryWrapper.eq(ShoppingCart::getUserId,BaseContext.getCurrentId()); ShoppingCart cart1 = shoppingCartService.getOne(queryWrapper); cart1.setNumber(cart1.getNumber()-1); Integer LatestNumber = cart1.getNumber(); if (LatestNumber &gt; 0){ //对数据进行更新操作 shoppingCartService.updateById(cart1); }else if(LatestNumber == 0){ //如果购物车的菜品数量减为0,那么就把菜品从购物车删除 shoppingCartService.removeById(cart1.getId()); }else if (LatestNumber &lt; 0){ return R.error("操作异常"); } return R.success(cart1); } Long setmealId = shoppingCart.getSetmealId(); if (setmealId != null){ //代表是套餐数量减少 queryWrapper.eq(ShoppingCart::getSetmealId,setmealId).eq(ShoppingCart::getUserId,BaseContext.getCurrentId()); ShoppingCart cart2 = shoppingCartService.getOne(queryWrapper); cart2.setNumber(cart2.getNumber()-1); Integer LatestNumber = cart2.getNumber(); if (LatestNumber &gt; 0){ //对数据进行更新操作 shoppingCartService.updateById(cart2); }else if(LatestNumber == 0){ //如果购物车的套餐数量减为0,那么就把套餐从购物车删除 shoppingCartService.removeById(cart2.getId()); }else if (LatestNumber &lt; 0){ return R.error("操作异常"); } return R.success(cart2); } //如果两个大if判断都进不去 return R.error("操作异常"); }</code></pre>

页面列表

ITEM_HTML