java后端信息的分页查询

java后端信息的分页查询

需求分析

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

代码开发

1. 流程：

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

2. 要点说明：

   • 全局请求拦截器，发送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)
     }
     )
     

   • 前后端对接的数据需要统一

3. 后端代码开发

   1. 配置Mybatis-plus的分页插件

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

   2. 创建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);
      }
      

测试

使用断点调试，跟踪代码逻辑，验证是否符合预期