基于node.js+MongoDB+elementui的分页接口以及页面实现

一、在准备分页之前，先搭好分页的组件。

这里我已经提前实现了对elementui中分页组件的二次封装，如果想参考分页组件二次封装，详情请看如下链接

ElementUI分页组件的封装_mingY的博客-CSDN博客

 二、准备好分页组件，可以看见如下样式：

 这里我已经使用elementui的全局样式对分页组件样式进行处理

三、我使用的是mlab下面的mongo DB数据库

mlab官网：MongoDB Hosting: Database-as-a-Service by mLab

 mongoDB

 这里对mongoDB的使用不再过多介绍

 四、实现

1.根目录下创建文件

modules-->Profiles.js

2.使用命令行命令安装分页

安装分页  npm i mongoose-paginate

 并在创建好的Profiles.js中进行使用。

const mongoose = require('mongoose')
const Schema = mongoose.Schema
// 分页
const mongoosePaginate = require('mongoose-paginate');
const ProfileSchema = new Schema({

})


ProfileSchema.plugin(mongoosePaginate); 
module.exports = Profile = mongoose.model("profile",ProfileSchema)

3.接口编写

const express = require('express')
const Profile = require('../../modules/Profile')
const router = express.Router()
const passport = require('passport')

// $route GET api/profiles
// @desc  获取所有信息
//@access private
router.get('/', passport.authenticate('jwt', { session: false }), (req, res) => {
  let pageSize = req.param('pageSize')
  let pageNum = req.param('pageNum')
  Profile.find({})
    .skip((pageNum - 1) * pageSize)
    .limit(parseInt(pageSize))
    //计算分页数据
    .exec(function (err, rs) {
      if (err) {
        res.send(err)
      } else {
        Profile.find((err, result) => {
          jsonArray = { data: rs, total: result.length, pageNum, pageSize }
          res.json(jsonArray)
        })
      }
    })
})

注意：.limit(parseInt(pageSize)) ，一定要加上parseInt。转换成数值类型。

4.页面调用接口

getData() {
      this.$axios.get('/api/profiles/', { params: { pageSize: this.queryParams.pageSize, pageNum: this.queryParams.pageNum } }).then(res => {
        this.tableData = res.data.data
        this.total = res.data.total
      })
    },