1.分页

使用vue+vuex+elementUI+axios+mongoDb+express实现分页

1.后端准备

使用nodeJs写好分页查询数据的接口,前提是已经初始化了数据库

personel.js

// 个人中心路由
const express = require('express'); //引入express
const Register = require('../db/Register'); //引入数据库
const router = express.Router() //创建router

router.get('/api/personer', async (req, res) => {
    // 1.获取分页数据
    // 测试
    // console.log(req.query);
    let page =JSON.parse(req.query.page)||1;
    let pageSize =JSON.parse(req.query.pageSize);
    let count = await Register.countDocuments({}) //查询数据库中数据的总数
    let total = Math.ceil(count / pageSize) //总页数=数据总数/每页显示的数量 Math.ceil() 向上取整
    let start = (page - 1) * pageSize //页码对应的数据查询开始位置
    //2.分页查询
    const personerList = await Register.find().limit(pageSize).skip(start); //根据查询的位置查询
    if (personerList) { //如果查询到了
        //不显示的数据隐藏掉
        for (const key in personerList) {
            personerList[key].password = undefined
        }
        req.statusCode = 200
        res.send({ //3.发送数据
            data: personerList,
            state: "ok",
            total: total,
            count: count
        })
    } else {
        res.send({
            state: "error"
        })
    }
})

module.exports = router; //导出路由

接口地址是 /api/personer

2.前端准备

2.1首先准备好一个Pag.vue的组件（直接从elementUI中copy）

Pag.vue

其中page，pageSize，total需要父组件传递过来，Pag组件传递一个current-change事件给父组件，父组件获取到页码

<template>
  <div class="coyPag">
    <el-row :gutter="10">
      <el-col :span="24">
        <div class="block">
          <el-pagination
            background
            layout="prev, pager, next,total,jumper"
            :total="total"
            :page-size="pageSize"
            @current-change="getPage"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 分页组件
export default {
  name: "Pag",
  props: {
    total: {
      type: Number,
      default: 100,
    },
    pageSize: {
      type: Number,
      default: 6,
    },
    page:{
      type:Number
    }
  },
  data() {
    return {
    };
  },
  methods: {
    getPage(page) {//得到子组件传递的页数
      this.$emit("current-change", page); 
    },
  },

};
</script>

<style scoped lang="less">
.coyPag {
  .block {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
}
</style>

2.2 在vuex中初始化page，pageSize，使用axios+vuex获取接口的数据

前提是已经封装好了axios的api

store/modules/personal.js

/*
登录/注册状态
*/
import api from '../../api/index'
const personalAbout = {
    namespaced: true, //开启命名空间
    actions: {
        // 1.获取用户数据
        getTableData(context, value) { //此处进行axios获取后台数据
            api.personalQuery({
                page: value,
                pageSize: context.state.data.pageSize
            }).then(res => {    
                // 传给mutations去操作数据
                context.commit("GITTABLEDATA",res)
            })
        }
    },
    mutations: {
        CHANGE_KEYWORD(state, value) {   // 搜索的数据
            state.searchKeyword = value
        },
        GITTABLEDATA(state,value){  //改变数据的值
            state.tableData=value.data.data
            state.total=value.data.count
        }
    },
    state: {
        searchKeyword: '',
        data: {
            page: 1, //初始化页码
            pageSize: 7 //每页显示多少数据    
        },
        tableData:[],
        total:0
    }
}

export default personalAbout

2.3 在personal.vue组件（要进行分页的组件）中获取到vuex的数据并渲染到页面

<template>
  <div class="personal pd10">
    <!-- 顶部 -->
    <div class="personal_top">
      <el-row :gutter="10">
        <el-col :md="18">
          <div class="personal_search">
            <el-input v-model="Keyword" placeholder="请输入内容"> </el-input>
          </div>
        </el-col>
        <el-col :md="6">
          <el-button class="defaultBtn" type="primary"> 查询 </el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 主体 -->
    <div class="personer_ctn">
      <el-row class="mt15">
        <el-col :md="24">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="_id" label="id" width="220">
              <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="200">
            </el-table-column>
            <el-table-column
              prop="username"
              label="用户名"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column label="操作" width="220">
              <el-button type="danger" size="mini"
                ><i class="fa fa-trash-o" aria-hidden="true"></i> 删除
              </el-button>
              <el-button type="info" size="mini"
                ><i class="fa fa-pencil" aria-hidden="true"></i> 编辑
              </el-button>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row class="mt15">
        <el-col :md="3">
          <el-button class="defaultBtn" @click="toggleSelection()"
            >取消选择</el-button
          >
        </el-col>
        &nbsp;
        <el-col :md="3">
          <el-button class="defaultBtn">删除选中</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 底部 -->
    <div class="personer_foot">
      <Pag
        :pageSize="psldata.pageSize"
        :page="psldata.page"
        :total="total"
        @current-change="getPage"
      />
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { mapState } from "vuex"; //state
import Pag from "../../components/SubLayout/Pag.vue";
export default {
  name: "Personal",
  computed: {
    ...mapState("personalAbout", {  //获取state的数据
      psldata: "data",
      total: "total",
      tableData: "tableData",
    }),
  },
  components: {
    Pag,
  },
  methods: {
    //Actions使用axios
    ...mapActions("personalAbout", { getTableData: "getTableData" }),
    //获取pag的页码
    getPage(page) {
      this.getTableData(page);
    }
  },

  mounted() {
    //  dom更新完的钩子，//初始化传值
    this.getTableData(1);
  },
};
</script>

<style scoped lang="less">
.personal_top,
.personal_ctn {
  .el-button--primary:focus,
  .el-button--primary:hover {
    background: #009c7f;
  }
}
</style>

3.总结

分页思路：通过页码进行接口访问得到不同的数据渲染到页面上。