java+springBoot+Thymeleaf+vue分页组件的定义

导读

本篇着重介绍java开发环境下，如何写一个vue分页组件，使用到的技术点有java、springBoot、Thymeleaf等；

分页效果图

名称为vuepagerbasic的分页组件，只包含上一页、下一页，本篇着重介绍vuepager分页组件

前台html，使用到Thymeleaf模板

在layout.html文件里定义与注册分页组件

<div th:fragment="vuepagerbasic">
    <template id="vuePagerBasic">
        <div>
            <a href="javascript:;" class="bd0" v-on:click="go(1)" v-if="pages.pageIndex>1">&lt;&lt;</a>
            <a href="javascript:;" v-on:click="go(pages.pageIndex-1)" v-if="pages.pageIndex>1">&lt;</a>
            <span v-if="pages.previousSpot" v-on:click="go(pages.firstNum-1)">...</span>
            <a href="javascript:;" v-for="item in pages.pageList" v-bind:class="{cur:pages.pageIndex==item}"
               v-on:click="go(item)">{{item}}</a>
            <span v-if="pages.nextSpot" v-on:click="go(pages.lastNum+1)">...</span>
            <a href="javascript:;" v-if="pages.pageIndex < pages.totalPages" v-on:click="go(pages.pageIndex+1)">&gt;</a>
            <a href="javascript:;" class="bd0" v-if="pages.pageIndex < pages.totalPages"
               v-on:click="go(pages.totalPages)">&gt;&gt;</a>
        </div>
    </template>
    <script type="text/javascript">
        Vue.component('vuepagerbasic', {
            template: '#vuePagerBasic',
            props: ['url', 'prop'],
            data: function () {
                return {
                    pages: [],
                }
            },
            mounted: function () {
                this.go(1);
            },
            methods: {
                go: function (n) {
                    this.getData(n);
                },
                getData: function (n) {
                    this.prop = this.prop || {};
                    this.prop.pageIndex = n;
                    var me = this;
                    axios.post(this.url, this.prop).then(function (res) {
                        me.pages = res.data.pages;
                        console.log("me.pages:" + me.pages);
                        me.$emit("getdata", res.data.rows);
                    });
                }
            }
        });
    </script>
</div>

<div th:fragment="vuepager">
    <template id="vuePager">
        <div class="page tc">
            <a href="javascript:;" v-on:click="go(1)" v-if="pages.pageIndex>1">首页</a>
            <a href="javascript:;" v-on:click="go(pages.pageIndex-1)" v-if="pages.pageIndex>1">上一页</a>
            <span v-if="pages.previousSpot" v-on:click="go(pages.firstNum-1)">...</span>
            <span href="javascript:;" v-for="item in pages.pageList" v-bind:class="{current:pages.pageIndex==item}"
                  v-on:click="go(item)">{{item}}</span>
            <span v-if="pages.nextSpot" v-on:click="go(pages.lastNum+1)">...</span>
            <a href="javascript:;" v-if="pages.pageIndex < pages.totalPages" v-on:click="go(pages.pageIndex+1)">下一页</a>
            <a href="javascript:;" v-if="pages.pageIndex < pages.totalPages" v-on:click="go(pages.totalPages)">尾页</a>
        </div>
    </template>
    <script>
        Vue.component('vuepager', {
            template: '#vuePager',
            props: ['url', 'prop'],
            data: function () {
                return {
                    pages: [],
                }
            },
            mounted: function () {
                this.go(1);
            },
            methods: {
                go: function (n) {
                    this.getData(n);
                },
                getData: function (n) {
                    this.prop = this.prop || {};
                    this.prop.pageIndex = n;
                    var me = this;
                    axios.post(this.url, this.prop).then(function (res) {
                        me.pages = res.data.pages;
                        me.$emit("getdata", res.data.rows);
                    });
                }
            }
        });
    </script>

</div> 

后台PagedHelper.java

用于计算分页等,暂未优化；

import java.io.Serializable;
import java.util.ArrayList;
import java.util.Comparator;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;

public class PagedHelper extends LinkedHashMap<String, Object> implements Serializable  {
    /**
     *
     */
    private static final long serialVersionUID = 1L;

    public boolean isPreviousSpot() {
        return previousSpot;
    }

    public void setPreviousSpot(boolean previousSpot) {
        this.previousSpot = previousSpot;
    }

    public boolean isNextSpot() {
        return nextSpot;
    }

    public void setNextSpot(boolean nextSpot) {
        this.nextSpot = nextSpot;
    }

    public int getFirstNum() {
        return firstNum;
    }

    public void setFirstNum(int firstNum) {
        this.firstNum = firstNum;
    }

    public int getLastNum() {
        return lastNum;
    }

    public void setLastNum(int lastNum) {
        this.lastNum = lastNum;
    }

    public int getShowPageNum() {
        return showPageNum;
    }

    public void setShowPageNum(int showPageNum) {
        this.showPageNum = showPageNum;
    }

    public long getTotal() {
        return total;
    }

    public void setTotal(long total) {
        this.total = total;
    }

    public int getTotalPages() {
        this.totalPages=(int)Math.ceil((double)total / pageSize);
        return totalPages;
    }

    public int getPageIndex() {
        return pageIndex;
    }

    public void setPageIndex(int pageIndex) {
        this.pageIndex = pageIndex;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    /*
     * public List<Integer> getPageList() { return pageList; }
     */

    public void setPageList(List<Integer> pageList) {
        this.pageList = pageList;
    }

    // 前面的点，前面省略的页数用.来代表，
    private boolean previousSpot;
    // 后面的点，后面省略的页数用.来代表，
    private boolean nextSpot;
    // 第一个页数，一般都是1
    private int firstNum;
    // 最后一个页数,也就是最大页数
    private int lastNum;
    // 默认页面显示最多页号数目
    private int showPageNum;
    // 总记录数
    private long total;
    // 总页数
    public int totalPages;

    // 当前页
    private int pageIndex;
    // 每页大小
    private int pageSize;

    // 页数列表，此列表中包含第一页和最后一页
    private List<Integer> pageList ;

    //返回的数据记录
    private List<?> rows;

    public List<Integer> getPagelist()
    {
        List<Integer> p = new ArrayList<Integer>();
        if (totalPages <= showPageNum)//全部显示
        {
            for (int i = 1; i <= totalPages; i++)
            {
                p.add(i);
            }
        }
        else
        {
            int halfOfPageNum = ((int)((showPageNum + 1) / 2)) - 1;//前后保留页数大小
            if (pageIndex - halfOfPageNum > 1 && pageIndex + halfOfPageNum < totalPages)
            {
                //两头都可取值
                this.previousSpot = this.nextSpot = true;
                for (int i = pageIndex - halfOfPageNum; i <= pageIndex + halfOfPageNum; i++)
                {
                    p.add(i);
                }
            }
            else if (pageIndex - halfOfPageNum > 1)
            {
                //右头值少
                this.previousSpot = true;
                for (int i = totalPages ; i >= totalPages - showPageNum + 1; i--)
                {
                    p.add(i);
                }
            }
            else if (pageIndex - halfOfPageNum <= 1)
            {
                //左头值少
                this.nextSpot = true;
                for (int i = 1; i <= showPageNum; i++)
                {
                    p.add(i);
                }
            }
            this.firstNum = pageIndex - halfOfPageNum <= 0 ? 1 : pageIndex - halfOfPageNum ;
            this.lastNum = firstNum + showPageNum - 1;
        }
         p.sort(Comparator.naturalOrder());
         this.pageList=p;
         return this.pageList;
    }

    public List<?> getRows() {
        return rows;
    }

    public void setRows(List<?> rows) {
        this.rows = rows;
    }

    public PagedHelper(Map<String, Object> params )
    {
        this.putAll(params);
        // 分页参数
        if(params.get("pageIndex") != null && params.get("pageSize") != null ){
            this.pageIndex=Integer.parseInt(params.get("pageIndex").toString());
            this.pageSize=Integer.parseInt(params.get("pageSize").toString());
            if(this.pageIndex<=0) {
                this.pageIndex=1;
                this.put("pageIndex",1);
            }
            if(this.pageSize<=0) {
                this.pageSize=10;
                this.put("pageSize",10);
            }
            this.put("offset",(this.pageIndex-1)*this.pageSize);
            this.put("limit",this.pageSize);
        }
        else {

            this.put("offset", params.get("offset") != null ? Integer.parseInt(params.get("offset").toString()) : 0);
            this.put("limit", params.get("limit") != null ? Integer.parseInt(params.get("limit").toString()) : 10);
            this.pageIndex=(Integer.parseInt(this.get("offset").toString())-1)/Integer.parseInt(this.get("limit").toString())+1;
            this.pageSize=Integer.parseInt(this.get("limit").toString());
            this.put("pageIndex", this.pageIndex);
            this.put("pageSize", this.pageSize);
        }

        this.firstNum=1;
        if(params.get("showPageNum")==null)
        {
            this.showPageNum=8;
        }
        else {
            this.showPageNum=Integer.parseInt(params.get("showPageNum").toString());
        }
        if(params.get("total")!=null)
        {
            this.total=Integer.parseInt(params.get("total").toString());
        }
        this.totalPages=this.getTotalPages();
        this.lastNum = this.totalPages;
        this.pageList = this.getPagelist();

        this.put("firstNum", this.firstNum);
        this.put("lastNum", this.lastNum);
        this.put("pageList", this.pageList);
        this.put("showPageNum", this.showPageNum);
        this.put("previousSpot", this.previousSpot);
        this.put("nextSpot", this.nextSpot);
        this.put("totalPages",this.totalPages);

    }

    public PagedHelper(Map<String, Object> params,int total )
    {
        this.putAll(params);
        this.put("total", total);
        // 分页参数
        if(params.get("pageIndex") != null && params.get("pageSize") != null ){
            this.pageIndex=Integer.parseInt(params.get("pageIndex").toString());
            this.pageSize=Integer.parseInt(params.get("pageSize").toString());
            if(this.pageIndex<=0) {
                this.pageIndex=1;
            }
            if(this.pageSize<=0) {
                this.pageSize=10;
            }
            this.put("offset",(this.pageIndex-1)*this.pageSize);
            this.put("limit",this.pageSize);
        }
        else {

            this.put("offset", params.get("offset") != null ? Integer.parseInt(params.get("offset").toString()) : 0);
            this.put("limit", params.get("limit") != null ? Integer.parseInt(params.get("limit").toString()) : 10);
            this.pageIndex=Integer.parseInt(this.get("offset").toString())/Integer.parseInt(this.get("limit").toString())+1;
            this.pageSize=Integer.parseInt(this.get("limit").toString());
        }
        this.put("pageIndex", this.pageIndex);
        this.put("pageSize", this.pageSize);
        this.firstNum=1;
        if(params.get("showPageNum")==null)
        {
            this.showPageNum=8;
        }
        if(params.get("total")!=null)
        {
            this.total=Integer.parseInt(params.get("total").toString());
        }
        if(total>=0)
        {
            this.total=total;
        }
        this.totalPages=this.getTotalPages();
        this.lastNum = this.totalPages;
        this.pageList = this.getPagelist();

        this.put("firstNum", this.firstNum);
        this.put("lastNum", this.lastNum);
        this.put("pageList", this.pageList);
        this.put("showPageNum", this.showPageNum);
    }
}

后台查询分页数据的方法

　　 @ResponseBody
    @PostMapping("/getListVue")
    public PageUtils getListVue(@RequestBody Map<String, Object> params) {
        // @RequestBody接收axios传来的参数

        ……
        int total = orgCollectionService.getListCount(params);
        List<TOrgCollectionDO> tOrgList = orgCollectionService.getList(params);

        params.put("total", total);
        PagedHelper pagedHelper = new PagedHelper(params);
        PageUtils pageUtils = new PageUtils(tOrgList, total, pagedHelper);//关于total处理暂时未优化
        return pageUtils;

    }

import java.io.Serializable;
import java.util.List;

public class  PageUtils implements Serializable {
    private static final long serialVersionUID = 1L;
    private int total;
    private List<?> rows;
    private PagedHelper pages;
    public PageUtils(List<?> list, int total) {
        this.rows = list;
        this.total = total;
    }
    public  PageUtils(List<?> list, int total,PagedHelper pages) {
        this.rows = list;
        this.total = total;
        this.pages=pages;
    }
    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public List<?> getRows() {
        return rows;
    }

    public void setRows(List<?> rows) {
        this.rows = rows;
    }

    public PagedHelper getPages() {
        return pages;
    }

    public void setPages(PagedHelper pages) {
        this.pages = pages;
    }

}

PageUtils 用于返回数据给前台；

demo.html使用vue分页组件vuepager

<table border="0" cellspacing="0" cellpadding="0" id="app">
                            <tr>
                                <th>序号</th>
                                <th><div>名称</div></th>
                                <th width="92">类型</th>
                                <th width="92">分类</th>
                                <th>状态</th>
                                <th>显示</th>
                                <th>更新时间</th>
                                <th class="last">操作</th>

                            </tr>
                            <tr v-for="(row,index) in list" :data-id="row.id">
                                <td>{{index+1}}</td>
                                <!-- 其他列表项略 -->
                            </tr>
                            <tr v-if="list.length<=0">
                                <td colspan="8">暂无数据
                                <td>
                            </tr>
</table>

<div class="page">
<vuepager v-on:getdata="getData" url="/works/getListVue" v-bind:prop="prop" ref="myref"></vuepager>
</div>

<div th:include="layout :: vuepager"></div> <!-- 引入vuepager的themeleaf模板 -->

注：url属性为请求分页数据的地址，查询参数在prop里，通过axios发出请求，axios.post(this.url, this.prop)。

<script>
        Vue.component('vuepager', {
            template: '#vuePager',
            props: ['url', 'prop'],
            data: function () {
                return {
                    pages: [],
                }
            },
            mounted: function () {
                this.go(1);
            },
            methods: {
                go: function (n) {
                    this.getData(n);
                },
                getData: function (n) {
                    this.prop = this.prop || {};
                    this.prop.pageIndex = n;
                    var me = this;
                    axios.post(this.url, this.prop).then(function (res) {
                        me.pages = res.data.pages;
                        me.$emit("getdata", res.data.rows);
                    });
                }
            }
        });
    </script>

　　

demo.html文件里javascript代码请求分页数据

<script>
        var app = new Vue({
            el : '#app',
            data : {
                list : [],
                orgcateid : -1,
                mediatype : '',
                checkstatus : -1,
                publishstatus : -1,
                statuscode : -1,
                title : '',
                pageIndex : 1
            },
            filters : {
                cutStr : function(str, maxLength) {
                    if (str == undefined || str == "") {
                        return "";
                    }
                    if (str.length > maxLength) {
                        return str.substr(0, maxLength - 1) + "...";
                    } else {
                        return str;
                    }
                }
            },
            methods : {
                getData : function(data) {
                    this.list = data;
                }
            },
            computed : {
                prop : function() {
                    return {
                        mediatype : this.mediatype,
                        orgcateid : this.orgcateid,
                        checkstatus : this.checkstatus,
                        publishstatus : this.publishstatus,
                        title : this.title,
                        sort : 'updatetime',
                        order : 'desc',
                        pageSize : 15,
                        showPageNum : 4
                    }
                }
            }
        });
    </script>

总结

本篇主要介绍了vue分页组件的定义及与后台分页数据的交互，涉及下拉列表框、文本框等搜索功能将单独介绍。