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

2023-08-29 07:27:05 366

前言

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

先说后端

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

需要获取的参数如下：

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

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

假如现在给出的参数为：pageSize=10，pageIndex=2，也就是说每一页要10条记录，要第二页。

计算偏移量的公式为：pageSize*(pageIndex-1)。

基本代码如下：

publicfunctiongetUser(Request$request){
$pageSize=$request->input('pageSize');
$pageIndex=$request->input('pageIndex');
$offset=$pageSize*($pageIndex-1);
returnUser::offset($offset)
->limit($pageSize)
->get();
}

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

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

改进后的代码如下：

private$default_page_size=30;
private$default_page_index=1;

//公用分页
publicfunctionpagination($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,
];
}

//获取用户列表
publicfunctiongetUser(Request$request){
$list=User::query();
/*
这里可以做一些查询之类的操作
*/
return$this->pagination($request,$list);
}

再说前端

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

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

获取数据

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

store.js：

注意：

这里为了方便展示代码，并没有使用模块化，项目中，最好将使用模块化方便管理。
这里默认读者清楚ES6的语法

exportdefaultnewvuex.Store({
state:{
user:{
list:[],
total:0,
pageIndex:1,
pageSize:10,
}
},
mutations:{
updateUser(state,data){
state.user={
...state.user,
...data,
}
},
},
actions:{
asyncgetUser({commit,state,getters}){
//$axios只是我自己封装的一个函数这里并不重要
constres=await$axios.get('/user',getters.requestData(state.user))
commit('updateUser',res);
},
},
getters:{
requestData(state){
return(origin)=>{
const{
pageIndex,
pageSize,
}=origin;
constdata={
pageIndex,
pageSize,
};
returndata;
}
},
}
})

数据持久化

现在如何获取数据已经搞定了，数据持久化我使用vuex-localstorage，安装后，只需要在上面代码的基础上添加：

importcreatePersistfrom'vuex-localstorage'
exportdefaultnewvuex.Store({
//接着上面的
plugins:[createPersist({
namespace:'studio-user',
initialState:{},
//ONE_WEEK
expires:7*24*60*60*1e3
})]
})

公用分页组件

使用分页组件

后记

将一些常用的功能抽象出来，打造一个自己的工具库，从而使开发效率更高。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

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

热门推荐

随机推荐