ssm+vue+element-ui 数据表格分页，后端实现分页

背景

表格数据分页时，前端分页要做的就是尽快接受数据并最快地展示给用户，对于数据不多的场景用前端实现也无妨。但是当数据多的时候，前端进行分页操作，就得先把成千上万的数据全部先扒拉下来，才能进行操作展示数据。该操作不仅拉低性能，而且扒拉数据也很费时间（等待数据加载时间长）。故一般对于数据量大的操作采用后端分页

原理

每次点击下一页，前端只需发送分页数信息（当前页、页数据条数）请求后端数据。后端根据前端发送的信息使用pagehelper插件配合分页。

代码

1、导入依赖

<!--分页插件-->
<dependency>
   <groupId>com.github.pagehelper</groupId>
   <artifactId>pagehelper</artifactId>
   <version>5.1.2</version>
</dependency>

2、spring配置分页插件

<!--		配置分页插件-->
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <props>
                            <prop key="helperDialect">mysql</prop>
<!--                            到达第一页或最后一页不会溢出-->
                            <prop key="reasonable">true</prop>
                        </props>
                    </property>
                </bean>
            </array>
        </property>

3、添加分页接口方法

dao层无需修改，在service层添加分页方法getByPage，参数为pageNum（当前页数）和pageSize（每页数据条数），后面map是我的模糊查询条件，可忽略。

/**
*使用分页
**/

PageInfo<Goods> getByPage(Integer pageNum, Integer pageSize, Map map);

service层对应的接口实现类，与之前未使用分页的调用的dao层方法一致，将pagehelper插入查询方法前，插件自动实现分页效果，返回结果封装在PageInfo里面。

@Override
public PageInfo<Goods> getByPage(Integer pageNum, Integer pageSize,Map map) {

    PageHelper.startPage(pageNum,pageSize);
    List<Goods> list=goodsDao.selectByConditions(map);
    PageInfo<Goods> pageInfo=new PageInfo<>(list);

    return pageInfo;
}

4、控制层方法

调用前面service层的方法getByPage，从map中获取分页当前页数和每页数据条数入参，

 //分页查询
@PostMapping("/getGoodsByPage")
public Result getByPage(@RequestBody Map<String ,Object> map){
//  System.out.println("selectGoods\n"+map);
    Integer pageNum= (Integer) map.get("pageNum");
    Integer pageSize= (Integer) map.get("pageSize");
    Map<String,Object> search= (Map<String, Object>) map.get("search");
    System.out.println(search);
    PageInfo<Goods> list= goodsService.getByPage(pageNum,pageSize,search );
    boolean success=list!=null;
    Integer code=success ? Code.GET_OK : Code.GET_ERR;
    String msg=success ? "查询成功！":"查询失败";
    return new Result(list,code,msg,success);
}

 5、分页数据格式

6、前端

table里面data绑定表格数据goodsTableData，在axios访问ssm控制层时，为表格数据赋值。

 监听分页

采用属性监视方法，一旦pageNum或pageSize改变，重新查询数据

 前端完整代码

<template>
  <div>
    
    <!-- table 数据 -->
    <el-row>
      <el-col :span="24">
        <el-table
          :data="goodsTableDate"
          :header-cell-style="{ background: '#D9ECFF', color: 'black' }"
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column prop="id" label="id" sortable width="60">
          </el-table-column>
          //表格其他列，略。。。
          <el-table-column prop="supplier" label="供货商"></el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>
    
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      goodsTableDate: [],//表格数据
      search: {//搜索数据
        name: "",
        type: "",
        batch: "",
        state: "",
      },
      pageNum:1,
      pageSize:5,
      total:100,
    };
  },
  mounted() {
    this.selectByConditions();
  },
//采用属性监视，当点击上一页下一页或切换页数据条时，重新查询数据
  watch:{
    pageNum:{
      immediate:false,//初始化时让handle不调用
      handler(newValue,oldValue){
        this.selectByConditions();
      }
    },
    pageSize:{
      immediate:false,//初始化时让handle不调用
      handler(newValue,oldValue){
        this.selectByConditions();
      }
    }

  },
  methods: {
    //显示表格内容
    selectByConditions() {
      
      let getSearch={
        //第几页
        pageNum:this.pageNum,
        //每页数据条数
        pageSize:this.pageSize,
        //我的查询条件，可忽略
        search:this.search
      }
      axios
        .post("/getGoodsByPage", getSearch)
        .then((res) => {
          console.log(res.data.data)
            //总数据条数
          this.total=res.data.data.total
            //表格数据赋值，
          this.goodsTableDate = res.data.data.list;
        })
        .catch((error) => {
          this.$message.error("错误");
        });
    },
    //该方法监视当前页数
    handleSizeChange(val) {
      this.pageSize=val
      console.log(`每页 ${val} 条`);
      
    },
    //该方法监视每页数据条数
    handleCurrentChange(val) {
      this.pageNum=val
      console.log(`当前页: ${val}`);
      
    },
  },
  
};
</script>

<style scoped>

7、结果