基于vue的分页插件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

相信大家用过很多jquery的分页插件，那这次就用一用基于vue的分页插件。

这里的环境用的是springboot

首先要引入pagehelper的jar文件，版本是1.2.3，配置文件也需要配置一下

核心代码：

DAO层

接口：

List<Article> selectAll();

mapper文件：

只需要写一个简单的查询即可。

<select id="selectAll" resultMap="ResultMapWithBLOBs">
select <include refid="Base_Column_List"/> from article
</select>

Service层：

接口：

PageInfo<Article> selectAll(int pageNum,int pageSize);

实现：

@Override
public PageInfo<Article> selectAll(int pageNum,int pageSize) {
Page<Article> page = PageHelper.startPage(pageNum, pageSize);
articleMapper.selectAll();
return page.toPageInfo();
}

Controller层：

@RequestMapping("/selectAll")
@ResponseBody
public Object selectArticleAll(@RequestParam(required = true,defaultValue = "0")int pageNum,
@RequestParam(required = true,defaultValue = "3")int pageSize){
PageInfo<Article> articlePageInfo = articleService.selectAll(pageNum, pageSize);
return articlePageInfo;
}

前台代码：

引入所需的js和css文件：

点这里下载

html：

<div id="container"> <article class="article" v-for="item in articleList">
<time>{{item.time}}</time>
<h2 class="title"><a href="article?id=${article.id}">{{item.title}}</a></h2>
<span><i>{{item.keywords}}</i></span>
<section class="article-content markdown-body">
<blockquote>
<p>{{item.desci}}</p>
</blockquote>
......
</section>
<footer>
<a href="article?id=${article.id}">阅读全文</a>
</footer>
</article> 
<zpagenav v-bind:page="page" v-bind:page-size="pageSize" v-bind:total="total" v-bind:max-page="maxPage" v-on:pagehandler="pageHandler"></zpagenav>
</div>

vue：