前端与后端分页技术解析

前端分页

前端分页一般用于数据量较小的情况，一次请求把数据全部从后端请求回来。下面是vue-element-ui的分页组件写法：

需要注意的是：

当前页展示的数据与总数据的关系

let show = this.contactsInfo.slice(this.sizePerPage * (this.activePage - 1), this.sizePerPage * (this.activePage));

当每页条数改变时，当前页设置为首页。防止每页条数变大时，当前页时不存在的页数。

后端分页

后端分页适用于数据量偏大时的情况，减小请求传输压力。前端需要将每页条数和当前页传给后端，后端根据条件查询出数据再传给前端，包括总条数、当前页、每页多少条数据等。

前端显示的当前页和每页多少条数据由后端传回的数据决定，否则出现改变前端参数，还未发请求时，页码的错乱。

当改变每页多少条时，当前页参数置为首页。

vue-element-ui分页组件

react-bootstrap分页组件