在Web應用開發中，前端常常要展示數據列表，數據較多時就要對查詢結果進行分頁，只顯示當前頁的數據，一方面不會造成數據列表過長，另一方面減少每次查詢和返回的數據量。Laravel 中實現數據分頁非常簡單，使用 Element-UI 完成分頁數據的前端展示同樣非常簡單。
一、Laravel 分頁
1、在其他框架中，分頁操作可能比較複雜。Laravel 不管使用資料庫查詢構造器 或者 Eloquent ORM ，都可以非常方便、易用的完成資料庫查詢結果集分頁操作。
數據分頁至少需要兩個參數：一是每頁多少條數據，二是當前顯示第幾頁。Laravel 數據分頁有多種方法，最簡單的是使用 paginate 方法。默認情況下，HTTP 請求中的 page 查詢參數值被當作當前頁的頁碼。 Laravel 會自動檢測該值，並自動將其插入到分頁器生成的連結中。
2、以查詢 User 模型數據為例，先創建路由。
Route::middleware('auth:api')->prefix('v1')->group(function() { Route::apiResource('users', 'UserController');｝
這樣定義之後在以 get 方法請求 api/v1/users 路徑時，默認情況下是控制器 UserController 的 index 方法。
3、在 UserController.php 文件中定義 index 方法：
public function index(Request $request)
{
//分頁， 參數size是每頁查詢多少條數據，另一個參數 page 會自動檢測
$pageSize = $request->query('size');
$result = User::paginate($pageSize);
return $this->success($result);
}
page 是默認參數，會自動檢測，所以這裡只出現了一個自定義參數 size，表示每頁查詢的數據條數。在 Laravel 中 get 請求參數可以用 query 方法接收。success 是自定義的一個方法，用於定義並轉化要返回的 json 格式數據。
4、返回結果示例，其中 size 為 3，page 為 2。返回數據除了 data ，還有兩個重要參數：一是當前頁 current_page，也就是 URL 參數中的 page，另一個是 total，表示 User 表中所有數據的總數。有了 total 、size、current_page 三個參數，就可以推斷出其它參數，所以返回數據中給出的上一頁、下一頁、最後一頁的值及 URL 在後續的程序中並不會使用。
請求地址： http://zhangschool.test/api/v1/users?size=3&page=2
二、vue-element-admin 前端框架
1、Element-UI 是基於 Vue 2.0 的桌面端組件庫，內置有 Pagination 分頁組件。vue-element-admin 是一個後臺前端解決方案，它基於 vue 和 element-ui 實現，vue-admin-template 是其簡化版。本示例使用 vue-admin-template ，完成基礎框架的構建。
2、在 router/index.js 文件中先添加路徑。
{
path: 'user',
name: 'User',
component: () => import('@/views/user/index'),
meta: { title: '用戶管理', icon: 'table' }
},
3、在 views/user 目錄下創建文件 index.vue，用 el-table 組件顯示數據。示例代碼：
4、接著，採用 el-pagination 分頁組件，繼續編輯 index.vue 文件，其中屬性 page-size 是每頁請求多少條數據，total 是指一共有多少數據。另外還有四個事件分別綁定了四個函數，分別在切換當前頁、改變請求條數（即 page-size 值）、點擊上一頁、點擊下一頁時觸發。
5、在 api 目錄下，新建 user.js 文件並編輯，示例代碼：
import request from '@/utils/request'
export function userIndex(pageSize, currentPage) {
return request({
url: '/users?size=' + pageSize + '&page=' + currentPage,
method: 'get'
})
}
其中 request 是 vue-admin-template 框架中向後端發起請求的文件，封裝的發起請求的 http 客戶端是 axios 。最終請求的 url 示例：
http://zhangschool.test/api/v1/users?size=3&page=2
6、user/index.vue 文件中 script 部分代碼如下：
引入request.js 中定義的方法 userIndex()
data 數據的5個屬性， loading 表示數據加載中、tableData 是表格數據， total 是所有數據總條數，total 要給定個默認值，不能為空。currentPage 是當前頁碼，默認值就是第1頁，即在 URL 中 page=1。pageSize 是每頁獲取多少條數據，默認值和 el-pagination 組件 page-sizes 數組第一個元素的值相同。
在 mounted 中調用 getUserIndex() 函數，即在 vue 完成頁面模版渲染後即向後臺請求數據。
定義 getUserIndex() 函數，向後端發起請求，請求成功之後，按前述返回結果中的 json 數據結構，給 data 中定義的屬性賦值，表格中數據就正常顯示了。
切換當前頁等四個事件所綁定的函數都會接收一個參數 $var，這個參數就是當前事件的值。 這就好辦了，用這個新的 $var 的值改變 data 中相應的屬性值，再調用 getUserIndex() 函數重新向後臺請求數據。
三、最終完成結果
本案例採用 Laravel 6.X ，vue-admin-template 4.1.0，element-ui 2.7.2，很容易就完成了後端數據分頁和前端的數據列表分頁展示。
---end---