本文共 1706 字，大约阅读时间需要 5 分钟。

这段时间写项目用到了mybaitsplus感觉自带的分页真的很好用，配合上elementUI的组件简直方便

所用技术

1. Vue


2. elementUI


3. Mybatis-Plus

config

 @Bean    public PaginationInterceptor paginationInterceptor() {
           PaginationInterceptor paginationInterceptor = new PaginationInterceptor();        return paginationInterceptor;    }

首先现在server实现类写上统计数据总数的方法

 @Override    public long countPage() {
           QueryWrapper<Blog> queryWrapper=new QueryWrapper<>();        queryWrapper.orderByDesc("blogupdate").ne("top","yes");        IPage<Blog> blogpage=new Page<>(0,6);        blogpage= blogDao.selectPage(blogpage,queryWrapper);        long pagecount=blogpage.getTotal();         System.out.println(pagecount);        return pagecount;    }

我们会在controller层调用server对应的方法来取到数据总数

分页

 @Override    public List<Blog> findBlogByUpDate(int page) {
           QueryWrapper<Blog> queryWrapper=new QueryWrapper<>();        queryWrapper.orderByDesc("blogupdate").ne("top","yes");        IPage<Blog> blogpage=new Page<>(page,6);        blogpage= blogDao.selectPage(blogpage,queryWrapper);        List<Blog> blogList=new ArrayList<>();        blogpage.getRecords().forEach(blog->blogList.add(blog));        return blogList;    }

这里的page是页数，如果需要查询的总数据是一百个，我们设定每页的数据是十个，那么总页数就是十，我们通过前端传来的数据，可以查询到对应页数的数据。

前端使用elementUI的分页组件

  <div class="block" style="margin-top: 10px">            <el-pagination layout="prev, pager, next,jumper"  :total="countpage" :page-size="6" :page-sizes="[2,4,6,8,10]"  @current-change="chanegPage" :current-page="currentpage">            </el-pagination>          </div>

这里写上:total=“countpage” countpage是查询的总数据量，:page-size=“6”，6是每页所有的数据，@current-change=“xxx”，每当点击这个组件里面的一个元素时候，就会获取到那个对应的页数，然后在xxx方法写上自己分页的方法，把page传到controller层，就可以获取对应分页的数据了。