海上捞火锅

海上捞火锅


显示购物车信息

<p>[TOC]</p> <h5>简要描述</h5> <ul> <li>显示购物车信息</li> </ul> <h5>前端页面和服务端交互过程</h5> <ul> <li>点击购物车图标,页面发送ajax请求,请求服务端查询购物车中的菜品和套餐</li> </ul> <h5>触发事件</h5> <pre><code>&lt;div :class="{imgCartActive: cartData &amp;&amp; cartData.length &gt; 0, imgCart:!cartData || cartData.length&lt;1}" @click="openCart"&gt;&lt;/div&gt;</code></pre> <h5>接口调用</h5> <pre><code>async getCartData(){ const res = await cartListApi({}) if(res.code === 1){ this.cartData = res.data }else{ this.$notify({ type:'warning', message:res.msg}); } },</code></pre> <h5>请求URL</h5> <ul> <li><code>[context-path]/shoppingCart/list</code></li> </ul> <h5>请求方式</h5> <ul> <li>GET </li> </ul> <h5>接口API</h5> <pre><code>function cartListApi(data) { return $axios({ 'url': '/shoppingCart/list', // 'url': '/front/cartData.json', 'method': 'get', params:{...data} }) }</code></pre> <h5>返回示例</h5> <pre><code>code: 1 data: [{id: "1397844263642378242", type: 1, name: "锅底", sort: 1, createTime: "2021-05-27 09:16:58",…},…] 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;">msg</td> <td style="text-align: left;">string</td> <td>错误信息</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> </tbody> </table> <h5>备注</h5> <ul> <li>data有两种返回值</li> </ul> <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> <pre><code>@GetMapping("/list") public R&lt;List&lt;ShoppingCart&gt;&gt; list(){ LambdaQueryWrapper&lt;ShoppingCart&gt; queryWrapper = new LambdaQueryWrapper&lt;&gt;(); queryWrapper.eq(ShoppingCart::getUserId,BaseContext.getCurrentId()); queryWrapper.orderByDesc(ShoppingCart::getCreateTime); List&lt;ShoppingCart&gt; list = shoppingCartService.list(queryWrapper); return R.success(list); }</code></pre>

页面列表

ITEM_HTML