java后端实现信息分页查询

需求分析

在一个页面展示大量的用户信息不便于观看，因此采用分页展示的方法。
用户可以通过分页条自己选择查看的数量。
可以用条件过滤一些信息，在查询的同时还需要分页展示

代码开发

流程：
1. 页面发送ajax请求，将分页查询参数（page,pageSize,name)提交到服务端
2. 服务端Controller接收到页面提交的数据并调用Service查询数据
3. Service调用Mapper操作数据库，查询分页展示
4. Controller将查询到的分页数据响应给页面
5. 页面接收到分页数据并通过ElementUI的Table组件展示到页面上

要点说明：

全局请求拦截器，发送get方式ajax请求，json格式的参数会统一进行处理，重新组装。
最终格式：http://localhost:8080/employee/page?page=1&pageSize=10

	// 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)})

前端响应拦截器

	// 响应拦截器
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的分页插件

/*** 配置MP的分页插件*/
@Configuration //配置类注解
public class MybatisPlusConfig {//通过拦截器的方式将插件加载到项目@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor(){//创建拦截器对象MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();//通过对象加载拦截器mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());return mybatisPlusInterceptor;}
}

创建controller类接收前端页面发送请求的参数

/*** 员工信息的分页查询* @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);
}