zoukankan      html  css  js  c++  java
  • 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分页组件的定义及与后台分页数据的交互,涉及下拉列表框、文本框等搜索功能将单独介绍。

  • 相关阅读:
    第十四周 Leetcode 315. Count of Smaller Numbers After Self(HARD) 主席树
    POJ1050 To the Max 最大子矩阵
    POJ1259 The Picnic 最大空凸包问题 DP
    POJ 3734 Blocks 矩阵递推
    POJ2686 Traveling by Stagecoach 状态压缩DP
    iOS上架ipa上传问题那些事
    深入浅出iOS事件机制
    iOS如何跳到系统设置里的各种设置界面
    坑爹的私有API
    业务层网络请求封装
  • 原文地址:https://www.cnblogs.com/EvanFan/p/11265289.html
Copyright © 2011-2022 走看看