海上捞火锅

海上捞火锅


菜品批量删除

<p>[TOC]</p> <h5>简要描述</h5> <ul> <li>菜品批量删除</li> </ul> <h5>前端页面和服务端交互过程</h5> <ul> <li>页面发送ajax请求,将参数(id)提交到服务端</li> <li>服务端Controller接收页面提交的数据并调用Service删除数据</li> <li>Service调用Mapper操作数据库</li> </ul> <h5>触发事件</h5> <pre><code>&lt;span class="span-btn delBut non" @click="deleteHandle('批量', null)"&gt;批量删除&lt;/span&gt;</code></pre> <h5>接口调用</h5> <pre><code>deleteHandle (type, id) { if (type === '批量' &amp;&amp; id === null) { if (this.checkList.length === 0) { return this.$message.error('请选择删除对象') } } this.$confirm('确认删除该菜品, 是否继续?', '确定删除', { 'confirmButtonText': '确定', 'cancelButtonText': '取消', }).then(() =&gt; { deleteDish(type === '批量' ? this.checkList.join(',') : id).then(res =&gt; { if (res.code === 1) { this.$message.success('删除成功!') this.handleQuery() } else { this.$message.error(res.msg || '操作失败') } }).catch(err =&gt; { this.$message.error('请求出错了:' + err) }) }) },</code></pre> <h5>请求URL</h5> <ul> <li><code>[context-path]/dish</code></li> </ul> <h5>请求方式</h5> <ul> <li>DELETE </li> </ul> <h5>API接口</h5> <pre><code> const deleteDish = (ids) =&gt; { return $axios({ url: '/dish', method: 'delete', params: { ids } }) }</code></pre> <h5>请求参数</h5> <table> <thead> <tr> <th style="text-align: left;">参数名</th> <th style="text-align: left;">必选</th> <th style="text-align: left;">类型</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td style="text-align: left;">id</td> <td style="text-align: left;">是</td> <td style="text-align: left;">bigint</td> <td>菜品编号</td> </tr> </tbody> </table> <h5>返回示例</h5> <pre><code>code: 1 data: "删除菜品成功!" 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> <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> <ul> <li>在Controller接口方法中声明数组类型参数ids</li> </ul> <h5>后端代码</h5> <pre><code>@DeleteMapping public R&lt;String&gt; deleteDish(String[] ids){ log.info(ids.toString()); for (String id : ids) { dishService.removeById(id); } return R.success("删除菜品成功!"); }</code></pre>

页面列表

ITEM_HTML