Node+Express写分页接口

苦逼的猿宝

已于 2024-01-26 09:26:06 修改

阅读量905

点赞数 13

分类专栏： node 文章标签： vue.js javascript 前端 node.js 后端 express

于 2024-01-26 09:25:16 首次发布

本文链接：https://blog.csdn.net/GAGGAAAAA/article/details/135858152

版权

node 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

文章详细描述了如何使用Express框架和router.js创建API接口，从数据库中获取文章列表并实现分页功能，同时利用Element-Plus组件库管理前端分页效果。

摘要由CSDN通过智能技术生成

后端逻辑

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 = 0
    db.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");
            },
          });
        }
      });
    },
}