基于Vue与Element的千万级大数据分页

                                                                                  预计阅读时间：5分钟

目录直通车：

目录

前言

算法

具体实现

完整代码

---

前言

1700万数据的单张数据表，1.54s查询每页。工作室的项目是前后端分离的设计模式，使用的是PostgreSQL数据库，接口采用的是PostGRest。测试接口使用的是PostMan。前端需给1700万的大数据分页网页不崩。后端采用的是”LUA脚本转发“。目前实现的效果：每次点击页码后等待的时间是1.54s。下面讲一下算法，希望能够帮到你。单页面的全部代码在博文最后。

算法

先看一下下图的传统页面的分页。此图作为参考。

 不卖关子。我先说，后面看代码。

select * from Table_Name limit start,end

（这里的 start等于图上的 (currentPage-1) * pagesize，end等于 currentPag * pagesize）

在element的官网提供的分页处理方式：将全部的数据拿出来之后再进行分页。像这样处理的话数据少，用户体验非常好。但是千万级的数据量页面是直接会崩的。

解决方案：每点击页码一次查询一次。

具体实现

先看一下前后端约定的api的json数据格式实例，再做相应解释。

{
    "list":
    [
        {"name":"My Book","id":1},
        {"name":"My Book","id":2}
    ],
    "Page":
    [
	{"pagecount":50}
    ]
}

list的数据： 数据表的数据。

page的数据： pagecount（总页数） = total （数据表的总数据量） / pagesize（每一页显示的数据数），后端处理后再把总数返回到前端。

这里只写上pagecount这个数据就可以了（具体可以看下element官网文档），我的分页代码如下：

处理函数如下，如果你是刚学习Vue朋友，可以先了解一下vue axios。

 handleCurrentChange(val) {
    this.cur_page = (val - 1) * this.pagesize;
    this.goal_page = this.cur_page + this.pagesize;
    this.getData();
    }
getData() {
    this.$axios.get(this.url, {
    params: {
       start: this.cur_page,
       end: this.goal_page
    }
        }).then((res) => {
             this.tableData = res.data.list;
             this.pageData = res.data.page;
             this.pagecount = parseInt(this.pageData.pagecount);
      })
}

完整代码

整个页面的完整代码如下，如果你需要看到效果，先要创建一个如上的json文件后，把下面代码中的url改成你的json文件地址。

后台的数据优化方案，我们团队的一位伙伴的处理方案：https://www.cnblogs.com/XiaoGuanYu/p/9799125.html

到这儿本文就结束了，如果您遇到了问题，欢迎评论留言告诉我~

感谢您的阅读！