构建可靠的分页功能：基于 Vue + Element UI + Lumen 的最佳实践

2023-11-15 10:00:19

在构建前后端分离的项目时，分页功能是必不可少的。本文将结合 Vue + Element UI + Lumen，详细介绍如何实现通用分页功能，为您的项目带来更加流畅和高效的数据处理体验。

后端开发

1. 后端数据获取

首先，我们需要在后端定义一个 REST API 接口来获取分页数据。在这个接口中，需要接受几个参数，包括当前页码、每页显示的数据量、排序字段和排序方式等。然后，根据这些参数从数据库中查询数据，并返回给前端。

// lumen后端
Route::get('/api/users', function (Request $request) {
    $page = $request->input('page', 1);
    $perPage = $request->input('per_page', 10);
    $orderBy = $request->input('order_by', 'id');
    $sortOrder = $request->input('sort_order', 'asc');

    $users = User::orderBy($orderBy, $sortOrder)
        ->paginate($perPage, ['*'], 'page', $page);

    return $users;
});

前端开发

1. 安装必要的依赖

首先，我们需要在项目中安装 Vue、Element UI 和 Axios 等依赖。

npm install vue element-ui axios --save

2. 配置 Vuex 状态管理

为了管理分页状态，我们需要使用 Vuex 状态管理。在 Vuex store 中，需要定义一个分页模块，其中包括当前页码、每页显示的数据量、排序字段和排序方式等状态。

// store/modules/pagination.js
export default {
  state: {
    currentPage: 1,
    perPage: 10,
    orderBy: 'id',
    sortOrder: 'asc'
  },
  mutations: {
    setCurrentPage(state, page) {
      state.currentPage = page;
    },
    setPerPage(state, perPage) {
      state.perPage = perPage;
    },
    setOrderBy(state, orderBy) {
      state.orderBy = orderBy;
    },
    setSortOrder(state, sortOrder) {
      state.sortOrder = sortOrder;
    }
  },
  actions: {
    fetchUsers({ commit, state }) {
      axios.get('/api/users', {
        params: {
          page: state.currentPage,
          per_page: state.perPage,
          order_by: state.orderBy,
          sort_order: state.sortOrder
        }
      })
      .then(response => {
        commit('setUsers', response.data.data);
        commit('setTotal', response.data.total);
      });
    }
  },
  getters: {
    users: state => state.users,
    total: state => state.total
  }
}

3. 创建分页组件

接下来，我们需要创建一个分页组件，用于显示分页控件和控制分页状态。这个组件可以复用在不同的页面中。

// components/Pagination.vue
<template>
  <el-pagination
    :current-page="currentPage"
    :page-size="perPage"
    :total="total"
    layout="prev, pager, next, jumper"
    @current-change="handleCurrentPageChange"
    @size-change="handlePerPageChange"
  >
  </el-pagination>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  name: 'Pagination',
  computed: {
    ...mapState('pagination', ['currentPage', 'perPage', 'total']),
  },
  methods: {
    ...mapMutations('pagination', ['setCurrentPage', 'setPerPage']),
    handleCurrentPageChange(page) {
      this.setCurrentPage(page);
    },
    handlePerPageChange(perPage) {
      this.setPerPage(perPage);
    }
  }
};
</script>

4. 使用分页组件

最后，在需要使用分页功能的页面中，只需要引入分页组件并将其添加到模板中即可。

<template>
  <div>
    <Pagination></Pagination>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination';
import { mapState } from 'vuex';

export default {
  name: 'Users',
  components: { Pagination },
  computed: {
    ...mapState('pagination', ['users']),
  },
  mounted() {
    this.$store.dispatch('pagination/fetchUsers');
  }
};
</script>