海上捞火锅

海上捞火锅


员工分页查询

<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>&lt;el-input v-model="input" placeholder="请输入员工姓名" style="width: 250px" clearable @keyup.enter.native="handleQuery" &gt;</code></pre> <h5>接口调用</h5> <pre><code>async init () { const params = { page: this.page, pageSize: this.pageSize, name: this.input ? this.input : undefined } await getMemberList(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) }) }, handleQuery() { this.page = 1; this.init(); },</code></pre> <h5>请求URL</h5> <ul> <li><code>[context-path]/employee/page</code></li> </ul> <h5>请求方式</h5> <ul> <li>get </li> </ul> <h5>API接口</h5> <pre><code> function getMemberList (params) { return $axios({ url: '/employee/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;">string</td> <td>员工姓名</td> </tr> </tbody> </table> <h5>返回示例</h5> <pre><code>code: 1 data: {records: [,…], total: 1, size: 5, 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;Employee&gt; page1 = new Page(page,pageSize); LambdaQueryWrapper&lt;Employee&gt; queryWrapper = new LambdaQueryWrapper(); queryWrapper.like(StringUtils.isNotEmpty(name),Employee::getName,name); queryWrapper.orderByDesc(Employee::getUpdateTime); employeeService.page(page1,queryWrapper); return R.success(page1); }</code></pre>

页面列表

ITEM_HTML