Springboot结合Vue实现分页功能

javascript 复制代码

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

javascript 复制代码

data(){
   return{
	total: 0,
	pageNum: 1, //初始页
	pageSize: 50, //    每页的数据
	}
}

javascript 复制代码

methods:{
    handleSizeChange: function (size) {
      this.pageSize= size;
      this.init();
    },
    handleCurrentChange: function (currentPage) {
      this.pageNum= currentPage;
      this.init();
    },
   init() {
  var params = new URLSearchParams();
      params.append("pageNum",this.currentPage);
      params.append("pageSize",this.pagesize);
      ...
      this.$axios
        .post(this.$api.getDataList, params)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.list;
            this.total=res.data.total;
          } else if (res.code == 400) {
            this.$notify({
              title: "警告",
              message: res.msg,
              type: "warning",
            });
          } else {
            this.tableData = [];
          }
        })
        .catch((err) => {
          this.$notify.error({
            title: "错误",
            message: "出现系统错误，请联系管理员",
          });
          console.log(err);
        });
    },
}

java 复制代码

<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.4.7</version>
 </dependency>

java 复制代码

public Result getDataList(DataDto dataDto,Integer pageNum,Integer pageSize) {
        Result r = new Result();
        try {

            PageHelper.startPage(pageNum, pageSize);
            List<DataDto> dataList= dataDao.getDataList(dataDto);
            PageInfo<DataDto> pageInfo = new PageInfo<>(dataList);
            Integer total= Math.toIntExact(pageInfo.getTotal());
            List<DataDto> list=pageInfo.getList();
            if (list.size()> 0) {
                r.setCode(200);
                r.setMsg("查询成功");
                Map<String,Object> map=new HashMap<>();
                map.put("list",list);
                map.put("total",total);
                r.setData(map);
            } else {
                r.setCode(300);
                r.setMsg("暂无数据");
            }
        } catch (Exception e) {
            e.printStackTrace();
            r.setCode(400);
            r.setMsg("查询数据出现异常，请联系管理员");
        }
        return r;
}