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

测试

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

相关推荐
Fireworkitte4 小时前
Apache POI 详解 - Java 操作 Excel/Word/PPT
java·apache·excel
weixin-a153003083164 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
DCTANT4 小时前
【原创】国产化适配-全量迁移MySQL数据到OpenGauss数据库
java·数据库·spring boot·mysql·opengauss
Touper.4 小时前
SpringBoot -- 自动配置原理
java·spring boot·后端
黄雪超4 小时前
JVM——函数式语法糖:如何使用Function、Stream来编写函数式程序?
java·开发语言·jvm
ThetaarSofVenice5 小时前
对象的finalization机制Test
java·开发语言·jvm
思则变5 小时前
[Pytest] [Part 2]增加 log功能
开发语言·python·pytest
lijingguang5 小时前
在C#中根据URL下载文件并保存到本地,可以使用以下方法(推荐使用现代异步方式)
开发语言·c#
¥-oriented5 小时前
【C#中路径相关的概念】
开发语言·c#
CoderCodingNo6 小时前
【GESP】C++四级考试大纲知识点梳理, (7) 排序算法基本概念
开发语言·c++·排序算法