vue+node+elementUI实现分页功能

原创

朦胧淡月 2022-09-01 16:56:38 ©著作权

©著作权归作者所有：来自51CTO博客作者朦胧淡月的原创作品，请联系作者获取转载授权，否则将追究法律责任

第1===》收集当前页码和每页显示条数

第2==》发送ajax请求页码和每页显示条数发送给后端

第3===》接收后端返回的数据总条数 total 和当前页码的数据 data

第3===》如果当前页没有数据且排除第一页，防止出现删除当前页后出现页面没有数据

<div style="margin-top: 20px; text-align: left;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 3, 5, 10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>

// 数据
  data() {
    return {
  
      currentPage: 1, // 当前页
      total: 0, // 数据总条数
      pageSize: 3 // 每页条数
    };
  },

methods:{
   // 按照分页显示数据的函数
    getAccountListByPage() {
      // 收集当前页码 和 每页显示条数
      let pageSize = this.pageSize;
      let currentPage = this.currentPage;

      // 发送ajax请求 把分页数据发送给后端
      this.axios
        .get("http://127.0.0.1:666/account/accountlistbypage", {
          params: {
            pageSize,
            currentPage
          }
        })
        .then(response => {
          console.log("对应页码的数据:", response.data);
          // 接收后端返回的数据总条数 total 和 对应页码的数据 data
          let { total, data } = response.data;
          // 赋值给对应的变量即可
          this.total = total;
          this.accountTableData = data;
          // 如果当前页没有数据 且 排除第一页
          if (!data.length && this.currentPage !== 1) {
            // 页码减去 1
            this.currentPage -= 1;
            // 再调用自己
            this.getAccountListByPage();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 每页显示条数改变 就会触发这个函数
    handleSizeChange(val) {
      // 保存每页显示的条数
      this.pageSize = val;
      // 调用分页函数
      this.getAccountListByPage();
    },
    // 当前页码改变 就会触发这个函数
    handleCurrentChange(val) {
      // 保存当前页码
      this.currentPage = val;
      // 调用分页函数
      this.getAccountListByPage();
    },



}

后端用node写的代码

/* 
  按分页显示账号列表的路由 /accountlistbypage
*/
router.get("/accountlistbypage", (req, res) => {
  // 接收前端参数
  let { pageSize, currentPage } = req.query;
  // 默认值
  pageSize = pageSize ? pageSize : 3;
  currentPage = currentPage ? currentPage : 1;

  // 构造sql语句 （查询所有数据 按照时间排序）
  let sqlStr = `select * from account order by ctime desc`;
  // 执行sql语句
  connection.query(sqlStr, (err, data) => {
    if (err) throw err;
    // 计算数据总条数
    let total = data.length;

    // 分页条件 (跳过多少条)
    let n = (currentPage - 1) * pageSize;
    // 拼接分页的sql语句
    sqlStr += ` limit ${n}, ${pageSize}`;

    // 执行sql语句 （查询对应页码的数据）
    connection.query(sqlStr, (err, data) => {
      if (err) throw err;
      // 把数据返回给前端 两个数据 数据总条数 total 和 对应页码的数据 data
      res.send({
        total,
        data
      });
    });
  });
});