element admin 动态路由_Laravel + Element 超简单实现分页效果案例教程

在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

{    "status": "success",    "code": 200,    "data": {        "current_page": 2,        "data": [            {                "id": 5,                "name": "bbb",                "email": "bbb@qq.com",                "email_verified_at": null,                "created_at": "2019-03-24 15:39:52",                "updated_at": "2019-03-24 15:39:52",                "avatar": null,                "introduction": null            },            {                "id": 6,                "name": "dfee",                "email": "433dd@qq.com",                "email_verified_at": null,                "created_at": "2019-03-25 22:10:17",                "updated_at": "2019-04-09 21:14:52",                "avatar": null,                "introduction": null            },            {                "id": 7,                "name": "中&国",                "email": "4d@qq.com",                "email_verified_at": null,                "created_at": "2019-03-25 22:10:33",                "updated_at": "2019-03-25 22:10:33",                "avatar": null,                "introduction": null            }        ],        "first_page_url": "http://zhangschool.test/api/v1/users?page=1",        "from": 4,        "last_page": 4,        "last_page_url": "http://zhangschool.test/api/v1/users?page=4",        "next_page_url": "http://zhangschool.test/api/v1/users?page=3",        "path": "http://zhangschool.test/api/v1/users",        "per_page": "3",        "prev_page_url": "http://zhangschool.test/api/v1/users?page=1",        "to": 6,        "total": 12    }}

二、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() 函数重新向后台请求数据。

三、最终完成结果

共12条数据，每页2条，当前显示第二页数据

(切换到 5条/页并且切换到第2页)

本案例采用 Laravel 6.X ，vue-admin-template 4.1.0，element-ui 2.7.2，很容易就完成了后端数据分页和前端的数据列表分页展示。

---END---

敬请关注『飞飞编程』，为技术披上艺术的嫁衣，融在教育的生命中！