海上捞火锅

海上捞火锅


加入购物车

<p>[TOC]</p> <h5>简要描述</h5> <ul> <li>向购物车中加入菜品</li> </ul> <h5>前端页面和服务端交互过程</h5> <ul> <li>点击 [加入购物车] 或者 [+] 按钮,页面发送ajax请求,请求服务端,将菜品或者套餐添加到购物车</li> </ul> <h5>触发事件</h5> <pre><code>&lt;div class="addCart" @click="addCart(setMealDialog.item)" v-if="!setMealDialog.item.number"&gt;加入购物车&lt;/div&gt;</code></pre> <h5>接口调用</h5> <pre><code>const res = await addCartApi(params) if(res.code === 1){ this.dishList.forEach(dish=&gt;{ if(dish.id === item.id){ dish.number = res.data.number } }) if(this.setMealDialog.show){ item.number = res.data.number } this.getCartData() }else{ this.$notify({ type:'warning', message:res.msg}); }</code></pre> <h5>请求URL</h5> <ul> <li><code>[context-path]/shoppingCart/add</code></li> </ul> <h5>请求方式</h5> <ul> <li>POST </li> </ul> <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;">amount</td> <td style="text-align: left;">decimal(10,2)</td> <td>金额</td> </tr> <tr> <td style="text-align: left;">image</td> <td style="text-align: left;">varchar(200)</td> <td>图片</td> </tr> <tr> <td style="text-align: left;">name</td> <td style="text-align: left;">varchar(64)</td> <td>名称</td> </tr> <tr> <td style="text-align: left;">id</td> <td style="text-align: left;">bigint</td> <td>编号</td> </tr> </tbody> </table> <h5>接口API</h5> <pre><code>function addCartApi(data){ return $axios({ 'url': '/shoppingCart/add', 'method': 'post', data }) }</code></pre> <h5>返回示例</h5> <pre><code>code: 1 data: {id: "1609085965423616002", name: "畅享2人套餐", userId: "1605795539925098497", dishId: null,…} 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("/add") public R&lt;ShoppingCart&gt; add(@RequestBody ShoppingCart shoppingCart){ log.info(shoppingCart.toString()); Long dishId = shoppingCart.getDishId(); LambdaQueryWrapper&lt;ShoppingCart&gt; queryWrapper = new LambdaQueryWrapper&lt;&gt;(); queryWrapper.eq(ShoppingCart::getUserId,BaseContext.getCurrentId()); shoppingCart.setUserId(BaseContext.getCurrentId()); if (dishId != null){ queryWrapper.eq(ShoppingCart::getDishId,shoppingCart.getDishId()); }else { queryWrapper.eq(ShoppingCart::getSetmealId,shoppingCart.getSetmealId()); } ShoppingCart one = shoppingCartService.getOne(queryWrapper); if (one == null){ shoppingCart.setCreateTime(LocalDateTime.now()); shoppingCart.setNumber(1); shoppingCartService.save(shoppingCart); one = shoppingCart; }else { one.setNumber(one.getNumber() + 1); shoppingCartService.updateById(one); } return R.success(one); }</code></pre>

页面列表

ITEM_HTML