Vue+Element UI+Lumen实现通用表格分页功能
前言
最近在做一个前后端分离的项目,前端使用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 })] })
公用分页组件
使用分页组件
后记
将一些常用的功能抽象出来,打造一个自己的工具库,从而使开发效率更高。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。