vue+element：后端分页基本逻辑

1、前端添加【表格】【页码框】视图组件

    <!-- :data	双向绑定，指向 pageData -->
    <el-table
      stripe
      border
      style="width: 100%;margin: 0;padding: 0;"
      :data="pageDataList"
    >
      <!-- label    视图表格的字段    -->
      <!-- prop     数据模型的字段    -->
      <el-table-column label="No" type="index"> </el-table-column>
      <el-table-column label="用户名称" prop="name"> </el-table-column>
      <el-table-column label="用户电话" prop="tel"></el-table-column>
      <el-table-column label="用户邮箱" prop="email"></el-table-column>
      <el-table-column label="用户状态" prop="status"></el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button type="primary" size="small" @click="test1(scope.$index, scope.row)" >查看</el-button>
          <el-button type="danger" size="small" @click="test2(scope.$index, scope.row)">进入</el-button>
        </template>
      </el-table-column>
    </el-table>

          <!-- background 页码框背景样式 -->
          <!-- layout 页码框布局样式 -->
          <!-- page-size 表格每页包含的行数 -->
          <!-- @current-change 页码切换事件，需要编写方法切换当前页码 -->
          <!-- current-page	当前页码 -->
          <!-- total	总行数 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            @current-change="currentChangeHandle"
            :current-page="currentPageIndex"
            :total="rowAmount">
          </el-pagination>

2、前端绑定【分页功能数据】

  data(){
    return{
      //分页功能数据
      pageSize: 5,			//每页行数
      pageDataList: [],			//当前页的数据
      pageAmount: 1,	    //总页数
      rowAmount: 1,			//总行数
      currentPageIndex: 1,	//当前页码
    }
  },

3、前端编写【分页方法】

    //根据当前页码，加载分页数据
    currentPageChangeHandle(currentPageIndex) {
      let that = this;
      //    发送请求
      this.$axios({
        method: 'get',
        url: global.baseUrl+"/admin/getUserListPageQuery",
        params: {
          pageIndex: currentPageIndex,
          pageSize: this.pageSize,
        },
      }).then(function (response) {
        // 获取页面数据信息
        that.pageData = response.data.data.dataList;
        // 获取页码信息
        that.total = response.data.data.total;
        if (null === that.pageData || that.pageData.length === 0) {
          alert("查询结果为空......")
        }
      }).catch(function (error) {
        console.log(error);
      });
    },

4、后端编写【分页工具类】：用于切割查询结果，找到对应页码的信息列表

public class PageUtil {
    //List<?> objectList 泛型类List，自动适配任何类型
    public  static GlobalControllerResponse getPageList(List<?> objectList, Integer pageIndex, Integer pageSize){
        //  查询成功，进行分页处理
        if( null != objectList && objectList.size() > 0){
            // 获取数据总量
            int total = objectList.size();
            // 当前页面第一条数据的编号:   startIndex = pageIndex * pageSize
            int startIndex = (pageIndex - 1) * pageSize;
            // 当前页面（除尾页外）最后一条数据的理论编号:    tempIndex = startIndex + pageSize
            int tempIndex = startIndex + pageSize;
            // 尾页最后一条数据的实际编号（防止编号下标越界）
            int endIndex  = tempIndex < objectList.size() ? tempIndex : objectList.size();
            // 截取当前页面数据
            objectList = objectList.subList(startIndex,endIndex);
            // 包装当前页面的数据信息和页码信息
            PageInfo<?> pageInfo = new PageInfo<>(total, objectList);
            // 包装成统一应答类型
            return new GlobalControllerResponse(pageInfo , CrudEnum.SELECT_SUCCESS);
        }
        //  查询失败，直接返回空内容
        else{
            return new GlobalControllerResponse(null , CrudEnum.SELECT_FAILED);
        }
    }
}

5、后端编写【分页信息实体类】，用于包装查询结果和页面信息，发送给前端

@Data
public class PageInfo<T> {
    //    页面信息：总数量，页码，页容量
    private Integer total;
    private Integer pageIndex;
    private Integer pageSize;
    //    信息列表：分页查询的结果
    private List<T> dataList;
    //    无参构造
    public PageInfo(){

    }
    //    有参构造
    public PageInfo(Integer total, List<T> dataList){
        this.total = total;
        this.dataList = dataList;
    }
}