博客系统-文章分页pagehelper的使用

首先添加pom依赖
可以基于前端ui框架先设计出分页效果比如zui前端框架
例如设计效果为其中的四个框就是对页数的获取，第一页的页数pageNo=1，以此类推，尾页页数就是文章总条数
接着是文章service层，方法queryPageList就是查询全部文章，先在mapper中写好查询全部文章的mapper方法，待会ArticleService实现类需要调用文章mapper中的查询全部文章方法，并封装进PageInfo

接着就是impl实现类。
其中有两个参数（Integer pageNum,Integer pageSize）第一个参数代表当前页数，第二个参数代表一页限制文章条数，我们在controller中调用时，第一个参数由前端传入，第二个每页限制条数由controller中调用方法自定义传入，例如，一页五条数据那么pageSize就赋值为5。
Impl代码

@Autowired
    private ArticleMapper articleMapper;

    @Override
    public PageInfo<Article> queryPageList(Integer pageNum, Integer pageSize) {
        PageHelper.startPage(pageNum, pageSize);
        List<Article> articleList = articleMapper.queryAllArticles();
        PageInfo<Article> pageInfo = new PageInfo<>(articleList);
        return pageInfo;
    }

我们查看PageInfo源码得知，其封装类如下，并把全部文章封装进pageInfo

之后，当调用时，此插件会自动生成limit查询sql，实现分页查询功能

接着就是controller调用并传参数，pageNo为前端传如参数，request就行

Integer pageNo = request.getParameter("pageNo") == null ? 1 : Integer.parseInt(request.getParameter("pageNo"));
        System.out.println("pageNo = " + pageNo);
        PageInfo<Article> pageInfo = articleService.queryPageList(pageNo, 5);//自定义每页文章条数
        model.addAttribute("articleList", pageInfo.getList());
        model.addAttribute("pages", pageInfo.getPages());//总页数
        model.addAttribute("pageNo", pageInfo.getPageNum());//当前页
        model.addAttribute("pageSize", pageInfo.getPageSize());//每页限制的的数据条数

model传入前端数据，model中的articleList就是limit查询语句限定查询的结果

然后就是下图的实现
我这里用了开通说的zui前端框架，用了比较笨的前端判断的方法来实现隐藏，active，

<div align="center">
    <ul class="pager">

        <li class="previous" th:if="${pageNo}!=1"><a th:href="@{/article/allarticle(pageNo=1)}">首页a>li>
        <li class="previous disabled" th:if="${pageNo}==1"><a th:href="@{/article/allarticle(pageNo=1)}">首页a>li>
        <li th:if="${pageNo}!=1"><a th:href="@{/article/allarticle(pageNo= ${pageNo}-1)}"><i class="icon icon-chevron-left">i>a>li>
        <li class="previous disabled" th:if="${pageNo}==1"><a th:href="@{/article/allarticle(pageNo= ${pageNo}-1)}"><i class="icon icon-chevron-left">i>a>li>

        <li th:if="${pageNo}!=${pages}"><a th:href="@{/article/allarticle(pageNo= ${pageNo}+1)}"><i class="icon icon-chevron-right">i>a>li>
        <li class="next disabled" th:if="${pageNo}==${pages}"><a th:href="@{/article/allarticle(pageNo= ${pageNo}+1)}"><i class="icon icon-chevron-right">i>a>
        li>
        <li class="next" th:if="${pageNo}!=${pages}"><a th:href="@{/article/allarticle(pageNo=${pages})}">尾页a>li>
        <li class="next disabled" th:if="${pageNo}==${pages}"><a th:href="@{/article/allarticle(pageNo=${pages})}">尾页a>li>

    ul>
div>
<div align="center"><span id="pageNo" th:text="'第'+${pageNo}">span>
    <span id="pages" th:text="'/'+${pages}+'页'">span>

div>

最后实现效果

项目地址myvlog