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


Posted in Javascript onFebruary 02, 2019

前言

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

先说后端

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

需要获取的参数如下:

  • pageSize(一页数据的数量)
  • pageIndex(第几页的数据)

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

假如现在给出的参数为:pageSize=10pageIndex = 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:

注意:

  • 这里为了方便展示代码,并没有使用模块化,项目中,最好将使用模块化方便管理。
  • 这里默认读者清楚 ES6 的语法
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;
   }
  },
 }
})

数据持久化

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

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

公用分页组件

<template>
 <el-Pagination
 background
 layout="total, sizes, prev, pager, next, jumper"
 :total="module.total"
 :current-page.sync="module.pageIndex"
 :page-sizes="module.pageSizes"
 :page-size.sync="module.pageSize"
 @current-change="handleCurrentChange"
 @size-change="handleSizeChange"
 >
 </el-Pagination>
</template>
<script>
export default {
 props: {
 module: Object
 },
 methods: {
 getData() {
  this.$emit("get-data");
 },
 handleCurrentChange() {
  this.getData();
 },
 handleSizeChange(val) {
  this.getData();
 }
 }
};
</script>

使用分页组件

<template>
 <div class="container">
 <el-table
  :data="user.list"
  style="width: 100%;"
  >
  <el-table-column
   v-for="(item,index) in columns"
   :key="index"
   :prop="item.prop"
   :label="item.label"
   align="center"
  />
  </el-table>
  <pagination
  :module="user"
  @get-data="getData"
  />
 </div>
</template>
<script>
import Pagination from "@/common/components/Pagination";
import { mapActions, mapState } from "vuex";
export default {
 components: {
 Pagination,
 },
 data: () => ({
 columns: [
  {
  prop: "name",
  label: "姓名"
  },
  {
  prop: "性别",
  label: "sex"
  },
  {
  prop: "年龄",
  label: "age"
  },
 ]
 }),
 created() {
 this.getData();
 },
 methods: {
  ...mapActions({
   getData : "getUser",
  }) 
 },
 computed: {
 ...mapState(["user"])
 }
};
</script>

后记

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
JS宝典学习笔记(下)
Jan 10 Javascript
Exitjs获取DataView中图片文件名
Nov 26 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
学习vue.js计算属性
Dec 03 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
JavaScript实现简易计算器小功能
Oct 22 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 #Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 #Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 #Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 #Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 #Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 #Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 #Javascript
You might like
用cookies来跟踪识别用户
2006/10/09 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
php探针不显示内存解决方法
2019/09/17 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
python 生成目录树及显示文件大小的代码
2009/07/23 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
python实现手势识别的示例(入门)
2020/04/15 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
幼儿园课题实施方案
2014/05/14 职场文书
应急处置方案
2014/06/16 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
会计专业自荐信范文
2019/05/22 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS