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