后端逻辑

router.js文件

const express = require('express');
const router = express.Router();//导入函数处理,数据
const articleMessage = require('../router_handle/artcle')//文章列表
router.get('/list',articleMessage.articleList)module.exports = router;

router_handle.js

const db = require('../db/index')
//选择指定要连接的数据库
db.changeUser({ database: "page" }, (err) => {if (err) throw err;
});
// 获取文章列表 -- 分页
exports.articleList = (req, res) => {const { page, pageSize } = req.query; // 获取前端传递的page和pageSize参数  //查看总有多少条数据const articleSqlTotal = `select * from article ` //按照id排序,返回列表//总条数var total = 0db.query(articleSqlTotal, (err, result) => {if (err) return res.send({ code: 0, msg: err.message })total = result.length})// 构建分页查询语句  //const articleSql = `SELECT * FROM article ORDER BY id LIMIT ${pageSize} OFFSET ${(page - 1) * pageSize}`;const articleSql = `SELECT * FROM article ORDER BY id LIMIT ${pageSize}  OFFSET ${(page - 1) * pageSize}`;db.query(articleSql, (err, result) => {if (err) return res.send({ code: 0, msg: err.message });res.send({ code: 1, data: result, msg: '获取成功!', total: total });});
};

前端页面

使用组件库element-plus组件的分页器

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" @prev-click="getList()" @next-click="getList()" background v-model:page-size="pageSize" v-model:current-page="page"layout="prev, pager, next,sizes" :total="total" />

处理方法

 data() {return {total: 0,page: 1,pageSize: 10,};},
methods:{//这个是监听到一页展示多少条数据的控制监听函数handleSizeChange(val) {this.pageSize = val;this.getList();},//这个是监听点击哪一页就跳转到哪一页的监听函数handleCurrentChange(number){this.page = number;this.getList()},//调用分页传参,也可直接传一个对象,例如queryparams:{},直接将queryparams传入其中getList() {ArticleListApi({page: this.page,pageSize: this.pageSize,}).then((res) => {if (res.data.code == 1) {this.tableData = res.data.data;this.total = res.data.total;}if (res.data.code == 401) {this.$message({type: "error",message: res.data.msg,duration: 1000,onClose: () => {router.replace("/login");},});}});},
}