vue+ElementUI(el-pagination)+express实现分页功能（前后台）

前台部分

1、安装elemenUI、axios：

npm i element-ui -S
npm install axios --save
npm install vue-axios --save

在main.js中引用：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; //样式文件单独引入
Vue.use(ElementUI); #全局注册

import axios from "axios"
Vue.prototype.$axios = axios 

2、在需要的vue页面中使用

<template>
	<!-- 信息列表展示开始 -->
      <div class="ihtor_table">
		//:data="tableData"绑定计算属性中的tableData, prop为需要展示的字段名
        <el-table class="elTable" :data="tableData" border style="width: 100%">
          <el-table-column prop="index" label="序号" width="100">
          </el-table-column>
          <el-table-column prop="name" label="名称" width="250">
          </el-table-column>
          <el-table-column prop="classes" label="类别" width="160">
          </el-table-column>
          <el-table-column prop="grade" label="级别" width="139">
          </el-table-column>
        </el-table>
      </div>
    <!-- 信息列表展示结束 -->

	<!-- 分页开始 -->
	<div class="pages">
	  <!--
	    total 数据总条数
	    page-size  每页数据条数
	    current-page  当前页码
	  -->
	  <el-pagination
	    :page-size="pageSize"
	    :total="totalCount"
	    background
	    :current-page="currentPage"
	    @current-change="handleCurrentChange"
	    layout="prev, pager, next"
	  >
	  </el-pagination>
	</div>
	<!-- 分页结束 -->
</template>
<script>

export default {
	data() {
	    return {
		  tables: [],
		  searchInput: '',
		  // 分页相关数据
	      currentPage: 1,
	      pageSize: 9,
	      totalCount: 0,
		}
	},
	methods: {
		handleCurrentChange(currentPage) {
	      this.currentPage = currentPage
	      this.queryData()
	      // console.log("当前页变化")
	    },
		// 查询数据
	    queryData() {
	      this.loading = true
	      var pageSize = this.pageSize
	      var currentPage = this.currentPage
	      // 请求后台接口 查询数据 根据自己的接口路径修改
	      this.$axios.post("/api/massage/selectAllMsg", {
	        pageSize: pageSize,
	        pageNumber: currentPage,
	      }).then(data => {
	        // 加载结束
	        this.loading = false
	        // 响应的数据
	        this.totalCount = data.data.totalCount
	        // 12.1 处理得到的数据
	        let resData = data.data.result
	        // 12.1 处理数据展示列表前的序号
	        resData.map((item, i) => {
	          // 12.1 处理序号
	          let index = (this.currentPage - 1) * this.pageSize + i + 1
	          item.index = index
	        })
	        
			//tables用于存储后台查询返回的数据
	        this.tables = data.data.result
	      })
	    },
    },
	// 使用周期函数  使得方法在页面加载时调用
	mounted() {
	  this.queryData()
	},
    // 计算属性
    computed: {
      // 需要计算的属性的名字
      tableData() {
        //这里的this.searchInput是搜索框的内容，需要的可以使用,将data中的searchInput通过v-model绑定到搜索框即可,仅搜索当页符合搜索条件的内容
        //let keywords = this.searchInput
        //不使用搜索功能可以设成空字符串
        let keywords = ''
        let newList = []
        // console.log( this.tables)
        // 对原数组进行遍历  将符合条件数据放在新数组中
        this.tables.forEach(item => {
          if (item.heritage_name.indexOf(keywords) != -1 ) {
            newList.push(item)
          }
        })
        return newList
      }
    }
}
</script>

后台部分

// 用户模块
const express = require("express")
const router = express.Router()
//引入数据库连接文件
const db = require("../db")

/**
* @url /api/massage/selectAllMsg
* @desc 查询所有信息接口
*/
router.post('/selectAllMsg',(req, res) => {
  // 获取参数   当前页码   当前每页数据量
  let pageNumber = req.body.pageNumber
  // let pageSize = parseInt(req.body.pageSize)
  let pageSize = req.body.pageSize - 0
  // 求得sql语句中的参数
  let start = (pageNumber - 1) * pageSize
  // sql语句
  let sql = "select * from tableName limit ?, ?"
  let sqlParam = [start, pageSize]
  let sqlCount = "select count(*) from tableName"
  let count
  // 执行查询
  db.query(sqlCount, null, (err, result) => {
    // 得到总记录数
    count = result[0]["count(*)"]
  })

  db.query(sql, sqlParam, (err, result) => {
    if (err) {
      res.json({
        err,
        msg: "请求失败",
        ok: false
      })
    } else {
      res.json({
        msg: "请求成功",
        ok: true,
        totalCount: count,
        result
      })
    }
  })
})

补充：封装连接mysql数据库操作（db.js）

// 封装操作数据库通用的API
const mysql = require("mysql")

// 创建数据库连接池
const pool = mysql.createPool({
  host: "localhost",
  user: "root", 
  password: "root",
  database: "myDatabase", //数据库名
})

// 封装数据库操作方法
const query = function(sql, sqlParam, callback) {
  // 获取数据库连接
  pool.getConnection((err, conn) => {
    // 错误回调
    if (err) {
      callback(err, null, null)
    }
    // 正确回调
    else {
      conn.query(sql, sqlParam, (status, result, fileds) => {
        // 释放连接
        conn.release()

        //  调用回调函数
        callback(status, result, fileds)
      })
    }
  })
}

// 向外暴露查询方法
module.exports.query = query