前言

最近在做一個前后端分離的項目，前端使用 Vue+ Element UI，而后端則使用 Lumen 做接口開發，其中分頁是必不可少的一部分，本文就介紹如何基于以上環境做一個簡單、可復用的分頁功能。

先說后端

后端做的事情不多，只需要接受幾個參數，根據參數來獲取數據即可。

需要獲取的參數如下：

然后就可以根據這兩個參數計算出偏移量，再從數據庫中取出相應的數據。

假如現在給出的參數為：pageSize=10，pageIndex = 2，也就是說每一頁要10條記錄，要第二頁。

計算偏移量的公式為：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：

注意：

export default new vuex.Store({ state : {  user : {   list: [],   total: 0,   pageIndex: 1,   pageSize: 10,  } }, mutations: { updateUser(state, data) { state.user = { ...state.user, ...data, } },  }, actions: {  async getUser({commit,state,getters}) {   // $axios 只是我自己封裝的一個函數 這里并不重要   const res = await $axios.get('/user',getters.requestData(state.user))   commit('updateUser',res);  }, }, getters:{  requestData(state) {   return (origin) => {    const {     pageIndex,     pageSize,    } = origin;    const data = {     pageIndex,     pageSize,    };    return data;   }  }, }})