门户网站开发公司,wordpress 动态特效,wordpress 存档,网站建设的创意java后端实现信息分页查询
需求分析
在一个页面展示大量的用户信息不便于观看#xff0c;因此采用分页展示的方法。用户可以通过分页条自己选择查看的数量。可以用条件过滤一些信息#xff0c;在查询的同时还需要分页展示
代码开发 流程#xff1a; 页面发送ajax请求因此采用分页展示的方法。用户可以通过分页条自己选择查看的数量。可以用条件过滤一些信息在查询的同时还需要分页展示
代码开发 流程 页面发送ajax请求将分页查询参数page,pageSize,name)提交到服务端服务端Controller接收到页面提交的数据并调用Service查询数据Service调用Mapper操作数据库查询分页展示Controller将查询到的分页数据响应给页面页面接收到分页数据并通过ElementUI的Table组件展示到页面上 要点说明 全局请求拦截器发送get方式ajax请求json格式的参数会统一进行处理重新组装。 最终格式http://localhost:8080/employee/page?page1pageSize10 // 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 RPage page(int page,int pageSize,String name) {log.info(page{},pageSize{},name{}, page, pageSize, name);//1.构造分页构造器Page pageInfo new Page(page, pageSize);//2.构造条件构造器LambdaQueryWrapperEmployee 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);
}测试
使用断点调试跟踪代码逻辑验证是否符合预期
