SpringBoot+oracle/mysql+Vue分页实现

1.首先elementUI分页插件代码

分页插件

涉及方法

// 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },

2.传参到后台

params: this.$http.adornParams({
          // 当前页
          page: this.pageIndex,
          // 每页的页数
          limit: this.pageSize,
          // 输入框中模糊查询
          key: this.dataForm.key
        })

3.后台的写法

 // 进行分页操作，当前页，每页条数
 PageHelper.startPage(currentsize,pagesize);
 // 查询所有的实体数据
 List list = doCodeBranchDao.selectList(new EntityWrapper()
                .eq("vaild_flag", '1')
    );
  // 获取数据并分页
  PageInfo page = new PageInfo<>(list);
  // 返回数据
 return R.ok().put("page", page);
 

4.前台接收返回数据

 if (data && data.code === 0) {
    // 主要数据
    this.dataList = data.page.list;
    // 分页的总条数
    this.totalPage = parseInt(data.page.total);
    } else {
     this.dataList = [];
     this.totalPage = 0;
        }

几个注意的地方

1.pagehelper的jar包容易导错，正确的依赖以及导包

		
			com.github.pagehelper
			pagehelper-spring-boot-starter
			1.2.5
		

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;

2.page中总页数是total，前台可能需要转换为int 即[ parseInt(data.page.total); ]

博主qq:915423200，欢迎与我讨论！