基于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文件：

 <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>