相信大家用过很多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文件：
<link rel="stylesheet" th:href="@{/css/zpageNav.css}"/>
<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/js/zpageNav.js}"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
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：
<script>
var vm=new Vue({
el:"#container",
data:{
articleList:[],
page:1, //显示的是哪一页
pageSize:5, //页面显示的数据条数
total:100, //总记录数
maxPage:9, //总页数
},
methods:{
//跳转到page页
pageHandler:function (page) {
this.page=page; //修改显示的页数page
var params={"pageNum":page,"pageSize":this.pageSize};
this.$http.post("/article/selectAll",params,{emulateJSON:true}).then(
function (res) {
this.articleList=res.data.list;
this.total=res.data.total;
this.maxPage=res.data.pages;
},
function (res) {
console.log(res);
}
)
}
},
created:function () {
this.pageHandler(1);
}
});
</script>