java后端實現信息分頁查詢的示例代碼

更新時間：2023年11月30日 11:01:42 作者：D. D

在一個頁面展示大量的用戶信息不便于觀看,因此就需要采用分頁展示的方法,本文就來為大家介紹一下java后端如何實現信息分頁查詢,需要的小伙伴可以參考下

需求分析

在一個頁面展示大量的用戶信息不便于觀看，因此采用分頁展示的方法。

用戶可以通過分頁條自己選擇查看的數量。

可以用條件過濾一些信息，在查詢的同時還需要分頁展示

代碼開發(fā)

1.流程

頁面發(fā)送ajax請求，將分頁查詢參數（page,pageSize,name)提交到服務端

服務端Controller接收到頁面提交的數據并調用Service查詢數據

Service調用Mapper操作數據庫，查詢分頁展示

Controller將查詢到的分頁數據響應給頁面

頁面接收到分頁數據并通過ElementUI的Table組件展示到頁面上

2.要點說明

全局請求攔截器，發(fā)送get方式ajax請求，json格式的參數會統(tǒng)一進行處理，重新組裝。

最終格式：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 = "系統(tǒng)接口請求超時";
  }
  else if (message.includes("Request failed with status code")) {
    message = "系統(tǒng)接口" + message.substr(message.length - 3) + "異常";
  }
  window.ELEMENT.Message({
    message: message,
    type: 'error',
    duration: 5 * 1000
  })
  return Promise.reject(error)
}
)

前后端對接的數據需要統(tǒng)一

3.后端代碼開發(fā)

配置Mybatis-plus的分頁插件

/**
 * 配置MP的分頁插件
 */
@Configuration //配置類注解
public class MybatisPlusConfig {

    //通過攔截器的方式將插件加載到項目
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor(){
        //創(chuàng)建攔截器對象
        MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
        //通過對象加載攔截器
        mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());
        return mybatisPlusInterceptor;
    }
}

創(chuàng)建controller類接收前端頁面發(fā)送請求的參數

/**
 * 員工信息的分頁查詢
 * @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.執(zhí)行查詢
    employeeService.page(pageInfo, queryWrapper);
    return R.success(pageInfo);
}