瑞吉外卖04-分页查询
瑞吉外卖04-分页查询
员工分页查询
需求分析
系统中的员工很多的时候，如果在一个页面中全部展示出来会显得比较乱，不便于查看，所以一般的系统中都会以分页的方式来展示列表数据。而在我们的分页查询页面中, 除了分页条件以外，还有一个查询条件 "员工姓名"。
程序执行流程
1. 页面流程分析
在开发代码之前，需要梳理一下整个程序的执行过程。
A. 点击菜单，打开员工管理页面时，执行查询
B. 搜索栏输入员工姓名，回车，执行查询
（1）页面发送ajax请求，将分页查询参数(page、pageSize、name)提交到服务端
（2）服务端Controller接收页面提交的数据, 并组装条件调用Service查询数据
（3）Service调用Mapper操作数据库，查询分页数据
（4）Controller将查询到的分页数据, 响应给前端页面
（5）页面接收到分页数据, 并通过ElementUI的Table组件展示到页面上
2. 前端代码介绍
访问员工列表页面 /member/list.html 时, 会触发Vue.js中的钩子方法，在页面初始化时调用created方法
从上述的前端代码中我们可以看到, 执行完分页查询, 我们需要给前端返回的信息中需要包含两项 : records 中封装结果列表, total中封装总记录数 。
而在组装请求参数时 , page、pageSize 都是前端分页插件渲染时的参数；
在getMemberList方法中, 通过axios发起异步请求
axios发起的异步请求会被声明在 request.js 中的request拦截器拦截, 在其中对get请求进行进一步的封装处理
最终发送给服务端的请求为 :
GET请求 , 请求链接 /employee/page?page=1&pageSize=10&name=xxx
代码实现
分页插件配置
com.harmony.reggie.config.MybatisPlusConfig 类
/**
* 配置MP的分页插件
*/
@Configuration
public class MybatisPlusConfig {
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());
return mybatisPlusInterceptor;
}
}分页查询实现
| 请求 | 说明 |
|---|---|
| 请求方式 | GET |
| 请求路径 | /employee/page |
| 请求参数 | page , pageSize , name |
那么查询完毕后我们需要给前端返回什么样的结果呢?
在上述我们也分析了, 查询返回的结果数据data中应该封装两项信息, 分别为:
- records 封装分页列表数据
- total 中封装符合条件的总记录数
A. 构造分页条件
B. 构建搜索条件 - name进行模糊匹配
C. 构建排序条件 - 更新时间倒序排序
D. 执行查询
E. 组装结果并返回
com.harmony.reggie.controller.EmployeeController 类
/**
* 员工信息分页查询
* @param page
* @param pageSize
* @param name
* @return
*/
@GetMapping("/page")
public R<Page> page(int page, int pageSize, String name) {
log.info("page = {},pageSize = {},name = {}", page, pageSize, name);
return employeeService.page(page, pageSize, name);
}com.harmony.reggie.service.impl.EmployeeServiceImpl 类
@Override
public R<Page> page(int page, int pageSize, String name) {
// 构造分页构造器
Page pageInfo = new Page(page, pageSize);
// 构造条件构造器
LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper();
// 添加过滤条件(不为空就添加)
queryWrapper.like(StringUtils.isNotEmpty(name), Employee::getName, name);
// 添加排序
queryWrapper.orderByDesc(Employee::getUpdateTime);
// 执行查询
employeeMapper.selectPage(pageInfo, queryWrapper);
return R.success(pageInfo);
}
https://gitee.com/Harmony_TL/reggie_take_out/tree/reggie_v4_pagination/
