Vue+Element UI+Lumen实现通用表格分页功能

前言

最近在做一个前后端分离的项目，前端使用 Vue+ Element UI，而后端则使用 Lumen 做接口开发，其中分页是必不可少的一部分，本文就介绍如何基于以上环境做一个简单、可复用的分页功能。

先说后端

后端做的事情不多，只需要接受几个参数，根据参数来获取数据即可。

需要获取的参数如下：

pageSize（一页数据的数量）
pageIndex（第几页的数据）

然后就可以根据这两个参数计算出偏移量，再从数据库中取出相应的数据。

假如现在给出的参数为：

pageSize=10

pageIndex = 2

计算偏移量的公式为：

pageSize * (pageIndex - 1)

基本代码如下：

public function getUser(Request $request){
 $pageSize = $request->input('pageSize');
 $pageIndex = $request->input('pageIndex');
 $offset = $pageSize * ($pageIndex - 1);
 return User::offset($offset)
    ->limit($pageSize)
    ->get();
}

后端基本上只需要做这么多，就可以完成一个分页的功能了，但还是有几处地方需要改进一下：

给参数一个默认值
前端还需要知道整个表的数据的总数
把分页做成一个公用的函数

改进后的代码如下：

private $default_page_size = 30;
private $default_page_index = 1;
// 公用分页
public function pagination($request, $list) {
 $pageSize = $request->input('pageSize', $this->default_page_size);
 $pageIndex = $request->input('pageIndex', $this->default_page_index);
 $offset = $pageSize * ($pageIndex - 1);
 $total = $list->count();
 $list = $list
   ->offset($offset)
   ->limit($pageSize);
 return [
 'list' => $list->get(),
 'total' => $total,
 ];
}
// 获取用户列表
public function getUser(Request $request) {
 $list = User::query();
 /*
  这里可以做一些查询之类的操作
 */
 return $this->pagination($request, $list);
}

再说前端

前端相对于需要做的事情就比较多了，需要考虑几点：

获取数据时需要带上分页的参数
分页参数需要进行本地持久化，以免刷新页面回到第一页（后端设置的默认值）
同样要抽象出一个通用的分页组件

获取数据

这里我们用 vuex来管理状态，然后在请求时带上分页数据：

store.js：

注意：

这里为了方便展示代码，并没有使用模块化，项目中，最好将使用模块化方便管理。