node+mysql+vue+element实现后台分页

有两万多条数据 之前用的前端分页 数据量一大就不好办了 挺卡的 速度就慢很多了

 

所以这边就考虑后端分页 一次请求10次数据

上代码吧

后端对应上接口

app.post('/Work/List1/page=:page&pageNum=:pageNum', async (req, res) => {

    const {page,pageNum} = req.params;

    let sql = `SELECT * FROM kmp_url LIMIT ${pageNum} offset ${page+0} `;

    // console.log(sql);

    connection.query(sql, function (err, result) {

        if (err) {

            console.log('[SELECT ERROR] - ', err.message);

            return;

        }

        res.send(result);

    });

});

前端使用了element分页器

直接上代码

<template>
  <div>
    <el-table :data="WorkList2" border style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="ywid" label="业务id"></el-table-column>
      <el-table-column prop="gdname" label="工单名称"></el-table-column>
      <el-table-column prop="ucode" label="网址" width="280"></el-table-column>
      <el-table-column prop="host" label="iP"></el-table-column>
      <el-table-column prop="uurl" label="App"></el-table-column>
      <el-table-column prop="status" label="关键字"></el-table-column>
      <el-table-column prop="province" label="公众号"></el-table-column>
      <el-table-column prop="city" label="省份"></el-table-column>
      <el-table-column label="创建时间" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.time | date }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="$router.push(`/WorkEdit/${scope.row.gdid}`)"
          >编辑</el-button>
          <el-button type="danger" size="small" @click="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row :span="24">
      <div class="pagination-list">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="paginations.page_index"
          :page-size="paginations.page_size"
          layout="total, prev, pager, next, jumper"
          :total="length"
          style="margin-top: 20px;text-align: center;"
        ></el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  filters: {
    date(val) {
      // 过滤器过滤时间格式
      return dayjs(val).format("YYYY-MM-DD HH:mm");
    }
  },
  data() {
    return {
      WorkList: [], //数据存放
      WorkList2: [],
      length: 0,
      paginations: {
        page_index: 1,
        total: 0,
        page_size: 10, //一页显示几条
        layout: "prev, pager, next"
      }
    };
  },
  methods: {
    async handleCurrentChange(page) {
      const list = await this.$http.post(
        `/Work/List1/page=${page}&pageNum=${this.paginations.page_size}`
      );
      this.WorkList2 = list.data;
      //   let index = this.paginations.page_size * (page - 1);
      //   let items_num = this.paginations.page_size * page;
      //   let tables = [];
      //   for (let i = index; i < items_num; i++) {
      //     if (this.WorkList2[i]) {
      //       tables.push(this.WorkList2[i]);
      //     }
      //     this.WorkList = tables;
      //   }
    },
    async fetch() {
      const list = await this.$http.post(`/Work/List1/page=1&pageNum=10`);
      this.WorkList2 = list.data;
      //   const res = await this.$http.get("/Work/List1");
      //   this.WorkList2 = res.data;
      const lengths = await this.$http.get("/Work/List/Count");
      this.length = lengths.data;
    }
  },
  created() {
    this.fetch();
  },
  watch: {
    search: function(new_v) {
      if (new_v != "") {
        this.searchItem();
      } else {
        this.fetch();
      }
    }
  }
};
</script>

<style>
.search {
  width: 250px;
  margin-right: 20px;
  margin-bottom: 20px;
}
</style>