java后端信息的分页查询
需求分析
- 在一个页面展示大量的用户信息不便于观看,因此采用分页展示的方法。
- 用户可以通过分页条自己选择查看的数量。
- 可以用条件过滤一些信息,在查询的同时还需要分页展示
代码开发
-
流程:
- 页面发送ajax请求,将分页查询参数(page,pageSize,name)提交到服务端
- 服务端Controller接收到页面提交的数据并调用Service查询数据
- Service调用Mapper操作数据库,查询分页展示
- Controller将查询到的分页数据响应给页面
- 页面接收到分页数据并通过ElementUI的Table组件展示到页面上
-
要点说明:
-
全局请求拦截器,发送get方式ajax请求,json格式的参数会统一进行处理,重新组装。
最终格式:http://localhost:8080/employee/page?page=1\&pageSize=10js// request拦截器 service.interceptors.request.use(config => { // 是否需要设置 token // const isToken = (config.headers || {}).isToken === false // if (getToken() && !isToken) { // config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改 // } // get请求映射params参数 if (config.method === 'get' && config.params) { let url = config.url + '?'; for (const propName of Object.keys(config.params)) { const value = config.params[propName]; var part = encodeURIComponent(propName) + "="; if (value !== null && typeof(value) !== "undefined") { if (typeof value === 'object') { for (const key of Object.keys(value)) { let params = propName + '[' + key + ']'; var subPart = encodeURIComponent(params) + "="; url += subPart + encodeURIComponent(value[key]) + "&"; } } else { url += part + encodeURIComponent(value) + "&"; } } } url = url.slice(0, -1); config.params = {}; config.url = url; } return config }, error => { console.log(error) Promise.reject(error) })
-
前端响应拦截器
js// 响应拦截器 service.interceptors.response.use(res => { if (res.data.code === 0 && res.data.msg === 'NOTLOGIN') {// 返回登录页面 console.log('---/backend/page/login/login.html---') localStorage.removeItem('userInfo') window.top.location.href = '/backend/page/login/login.html' } else { return res.data } }, error => { console.log('err' + error) let { message } = error; if (message == "Network Error") { message = "后端接口连接异常"; } else if (message.includes("timeout")) { message = "系统接口请求超时"; } else if (message.includes("Request failed with status code")) { message = "系统接口" + message.substr(message.length - 3) + "异常"; } window.ELEMENT.Message({ message: message, type: 'error', duration: 5 * 1000 }) return Promise.reject(error) } )
-
前后端对接的数据需要统一
-
-
后端代码开发
-
配置Mybatis-plus的分页插件
java/** * 配置MP的分页插件 */ @Configuration //配置类注解 public class MybatisPlusConfig { //通过拦截器的方式将插件加载到项目 @Bean public MybatisPlusInterceptor mybatisPlusInterceptor(){ //创建拦截器对象 MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor(); //通过对象加载拦截器 mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor()); return mybatisPlusInterceptor; } }
-
创建controller类接收前端页面发送请求的参数
java/** * 员工信息的分页查询 * @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); //1.构造分页构造器 Page pageInfo = new Page<>(page, pageSize); //2.构造条件构造器 LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper(); // 2.1添加一个过滤条件 queryWrapper.like(StringUtils.isNotEmpty(name), Employee::getName, name); // 2.2添加一个排序条件 queryWrapper.orderByDesc(Employee::getUpdateTime); //3.执行查询 employeeService.page(pageInfo, queryWrapper); return R.success(pageInfo); }
-
测试
使用断点调试,跟踪代码逻辑,验证是否符合预期