基于vue的分页插件

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

这里的环境用的是springboot

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

核心代码：

DAO层

接口：

1 List<Article> selectAll();

mapper文件：

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

1 <select >
2     select <include ref> from article
3   </select>

Service层：

接口：

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

实现：

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

Controller层：

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

前台代码：

引入所需的js和css文件：

1 <link rel="stylesheet" th:href="@{/css/zpageNav.css}"/>
2 <script th:src="@{/js/vue.js}"></script>
3 <script th:src="@{/js/zpageNav.js}"></script>
4 <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：

 1 <script>
 2     var vm=new Vue({
 3         el:"#container",
 4         data:{
 5             articleList:[],
 6             page:1,   //显示的是哪一页
 7             pageSize:5,  //页面显示的数据条数
 8             total:100,  //总记录数
 9             maxPage:9,  //总页数
10         },
11         methods:{
12             //跳转到page页
13             pageHandler:function (page) {
14                 this.page=page; //修改显示的页数page
15                 var params={"pageNum":page,"pageSize":this.pageSize};
16                 this.$http.post("/article/selectAll",params,{emulateJSON:true}).then(
17                     function (res) {
18                         this.articleList=res.data.list;
19                         this.total=res.data.total;
20                         this.maxPage=res.data.pages;
21                     },
22                     function (res) {
23                         console.log(res);
24                     }
25                 )
26             }
27         },
28         created:function () {
29             this.pageHandler(1);
30         }
31     });
32 </script>

基于vue的分页插件

基于vue的分页插件

相关推荐