springboot＋vue（ele ui）实现分页功能

后端： 

第一步 新建pageVo 存放当前页和每页多少数据

@Data
public class PageVo {
    private Integer currentPage;
    private Integer pageSize;
}

第二步  添加一个mybatisplus的分页配置类

@Configuration
public class MybatisPlusConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.H2));
        return interceptor;
    }
}

第三步 在controller中写一个post请求 

@PostMapping ("/ScoreByPage")
public ResultVo allScorePage(@RequestBody PageVo pageVo){
    return subjectScoreService.studentScorePage(pageVo);
}

 第四步 在service中写具体的业务方法

/**
 * 学生成绩的分页实现
 * @param pageVo 分页
 * @return
 */
@Override
public ResultVo studentScorePage(PageVo pageVo) {
    //1.将pageVo类赋值给page
    Page page = new Page<>(pageVo.getCurrentPage(), pageVo.getPageSize());
    //2.按学号排序
    LambdaQueryWrapper queryWrapper = new LambdaQueryWrapper<>();
    queryWrapper.orderByAsc(SubjectScoreDO::getUsernumber);
    //3.将条件给mybatisPlus中的分页方法
    Page scorePage = subjectScoreMapper.selectPage(page,queryWrapper);
    //4.将查询出的结果赋值给list数组
    List scoreListPage = scorePage.getRecords();

    if(scoreListPage == null){
        return CommonResult.fail();
    }else{
        return CommonResult.success(scoreListPage);
    }
}

 前端：

第一步 在element官网找到分页代码 复制 然后就弄一下 发送一下页码信息，接受一下后端信息

效果展示：