基于vue的分页插件

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

这里的环境用的是springboot

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

---

 

核心代码：

 DAO层

接口：

1 List
 selectAll();

mapper文件：

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

1 
2     select  from article
3   

Service层：

接口：

1 PageInfo
 selectAll(int pageNum,int pageSize);

实现：

1    @Override
2     public PageInfo
 selectAll(int pageNum,int pageSize) {
3         Page
 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
 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 

 

 

转载于:https://www.cnblogs.com/liutao1122/p/11263292.html