前言
最近在做一個前后端分離的項目，前端使用 Vue+ Element UI，而后端則使用 Lumen 做接口開發(fā)，其中分頁是必不可少的一部分，本文就介紹如何基于以上環(huán)境做一個簡單、可復(fù)用的分頁功能。
先說后端
后端做的事情不多，只需要接受幾個參數(shù)，根據(jù)參數(shù)來獲取數(shù)據(jù)即可。
需要獲取的參數(shù)如下：
然后就可以根據(jù)這兩個參數(shù)計算出偏移量，再從數(shù)據(jù)庫中取出相應(yīng)的數(shù)據(jù)。
假如現(xiàn)在給出的參數(shù)為：pageSize=10，pageIndex = 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();}后端基本上只需要做這么多，就可以完成一個分頁的功能了，但還是有幾處地方需要改進(jìn)一下：
改進(jìn)后的代碼如下：
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);}再說前端
前端相對于需要做的事情就比較多了，需要考慮幾點：
獲取數(shù)據(jù)
這里我們用 vuex來管理狀態(tài)，然后在請求時帶上分頁數(shù)據(jù)：
store.js：
注意：
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 只是我自己封裝的一個函數(shù) 這里并不重要 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; } }, }})數(shù)據(jù)持久化
現(xiàn)在如何獲取數(shù)據(jù)已經(jīng)搞定了，數(shù)據(jù)持久化我使用 vuex-localstorage，安裝后，只需要在上面代碼的基礎(chǔ)上添加：
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>后記
將一些常用的功能抽象出來，打造一個自己的工具庫，從而使開發(fā)效率更高。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
