海上捞火锅

海上捞火锅


菜品分页查询

<p>[TOC]</p> <h5>简要描述</h5> <ul> <li>菜品分页查询</li> </ul> <h5>前端页面和服务端交互过程</h5> <ul> <li>页面(backend/page/food/list.html)发送ajax请求,将分页查询参数(page、pageSize、name)提交到服务端,获取分页数据</li> <li>页面发送请求,请求服务端进行图片下载,用于页面图片展示</li> <li>服务端Controller接收页面提交的数据并调用Service查询数据</li> <li>Service调用Mapper操作数据库,查询分页数据</li> <li>Controller将查询到的分页数据响应给页面</li> <li>页面接收到分页数据并通过ElementUI的Table组件展示到页面上</li> </ul> <h5>接口调用</h5> <pre><code>async init () { const params = { page: this.page, pageSize: this.pageSize, name: this.input ? this.input : undefined } await getDishPage(params).then(res =&gt; { if (String(res.code) === '1') { this.tableData = res.data.records || [] this.counts = res.data.total } }).catch(err =&gt; { this.$message.error('请求出错了:' + err) }) }, getImage (image) { return `/common/download?name=${image}` }, handleQuery() { this.page = 1; this.init(); },</code></pre> <h5>请求URL</h5> <ul> <li><code>[context-path]/dish/page</code></li> </ul> <h5>请求方式</h5> <ul> <li>get </li> </ul> <h5>API接口</h5> <pre><code>const getDishPage = (params) =&gt; { return $axios({ url: '/dish/page', method: 'get', params }) } </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;">page</td> <td style="text-align: left;">是</td> <td style="text-align: left;">int</td> <td>页数</td> </tr> <tr> <td style="text-align: left;">pageSize</td> <td style="text-align: left;">是</td> <td style="text-align: left;">int</td> <td>页面大小</td> </tr> <tr> <td style="text-align: left;">name</td> <td style="text-align: left;">否</td> <td style="text-align: left;">varchar(64)</td> <td>菜品名称模糊查询</td> </tr> </tbody> </table> <h5>返回示例</h5> <pre><code>code: 1 data: {records: [,…], total: 46, size: 10, current: 1, orders: [], optimizeCountSql: true, searchCount: true,…} 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>Spring Boot整合MyBatis实现分页</li> </ul> <h5>后端代码</h5> <pre><code>@GetMapping("/page") public R&lt;Page&gt; page(int page,int pageSize,String name){ Page&lt;Dish&gt; page1 = new Page&lt;&gt;(page,pageSize); Page&lt;DishDto&gt; page2 = new Page&lt;&gt;(); LambdaQueryWrapper&lt;Dish&gt; queryWrapper = new LambdaQueryWrapper&lt;&gt;(); queryWrapper.like(name!=null,Dish::getName,name); queryWrapper.orderByAsc(Dish::getUpdateTime); dishService.page(page1,queryWrapper); BeanUtils.copyProperties(page1,page2,"records"); List&lt;Dish&gt; records = page1.getRecords(); List&lt;DishDto&gt; list = records.stream().map(item -&gt; { DishDto dishDto = new DishDto(); BeanUtils.copyProperties(item,dishDto); Long categoryId = item.getCategoryId(); Category category = categoryService.getById(categoryId); if (category != null) { String categoryName = category.getName(); dishDto.setCategoryName(categoryName); } return dishDto; }).collect(Collectors.toList()); page2.setRecords(list); return R.success(page2); }</code></pre>

页面列表

ITEM_HTML