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