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

测试

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

相关推荐
Winston Wood2 分钟前
Java线程池详解
java·线程池·多线程·性能
Alive~o.04 分钟前
Go语言进阶&依赖管理
开发语言·后端·golang
花海少爷6 分钟前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
手握风云-7 分钟前
数据结构(Java版)第二期:包装类和泛型
java·开发语言·数据结构
喵叔哟26 分钟前
重构代码中引入外部方法和引入本地扩展的区别
java·开发语言·重构
尘浮生32 分钟前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
hopetomorrow1 小时前
学习路之PHP--使用GROUP BY 发生错误 SELECT list is not in GROUP BY clause .......... 解决
开发语言·学习·php
不是二师兄的八戒1 小时前
本地 PHP 和 Java 开发环境 Docker 化与配置开机自启
java·docker·php
小牛itbull1 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript