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

      js 复制代码
      	// 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)
      }
      )
    • 前后端对接的数据需要统一

  3. 后端代码开发

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

      java 复制代码
      /**
       * 配置MP的分页插件
       */
      @Configuration //配置类注解
      public class MybatisPlusConfig {
      
          //通过拦截器的方式将插件加载到项目
          @Bean
          public MybatisPlusInterceptor mybatisPlusInterceptor(){
              //创建拦截器对象
              MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
              //通过对象加载拦截器
              mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());
              return mybatisPlusInterceptor;
          }
      }
    2. 创建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);
      }

测试

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

相关推荐
徐*红几秒前
java 线程池
java·开发语言
尚学教辅学习资料几秒前
基于SSM的养老院管理系统+LW示例参考
java·开发语言·java毕设·养老院
2401_85763639几秒前
计算机课程管理平台:Spring Boot与工程认证的结合
java·spring boot·后端
1 9 J3 分钟前
Java 上机实践4(类与对象)
java·开发语言·算法
Code apprenticeship3 分钟前
Java面试题(2)
java·开发语言
J不A秃V头A6 分钟前
Python爬虫:获取国家货币编码、货币名称
开发语言·爬虫·python
憨子周1 小时前
2M的带宽怎么怎么设置tcp滑动窗口以及连接池
java·网络·网络协议·tcp/ip
霖雨3 小时前
使用Visual Studio Code 快速新建Net项目
java·ide·windows·vscode·编辑器
SRY122404193 小时前
javaSE面试题
java·开发语言·面试
Fiercezm3 小时前
JUC学习
java