栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

springboot+vue(ele ui)实现分页功能

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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中写具体的业务方法

@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官网找到分页代码 复制 然后就弄一下 发送一下页码信息,接受一下后端信息



效果展示:

 

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/1006163.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号