node+elementUi+mysql实现分页

node+elementUi+mysql实现分页

分页的思想
1.在前端选择每页显示的条数后，触发选择按钮向后端发送当前页需要显示的数据条数。
2.后端接受到条数后通过sql的limit 来限制发送到前端的数据。
3.当前端点击下一页时，向后端发送下一页的页码，通过过滤来和限制来展示当前的数据。

1.使用elementUi分页组件

分页组件

2.分页

 <!-- 分页组件 -->
      <el-pagination
        class="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 8, 10, 12]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>

3.定义方法

1.页数方法（每一页多少条）

 //分页每页显示多少
    handleSizeChange(val) {
    
    
      let pageSize = {
    
    
        pageSize: val,
      };
      allReservationTable(pageSize).then((res) => {
    
    
        setTimeout(() => {
    
    
          this.loading = false;
          this.tableData = res.data.results;
        }, 200);
      });
    },

2.下一页的方法

 // 获取数据
    getList() {
    
    
      // 采用封装的api接口方法
      allReservationTable().then((res) => {
    
    
        setTimeout(() => {
    
    
          this.loading = false;
          this.tableData = res.data.results;
          this.total = res.data.total;
        }, 200);
      });
    },

4.node后端

//查询预约表
router.post('/allReservationTable',function(req,res,next){
    
    
  //当前所在页码
  let currentPage = req.query.currentPage||1;
  //定义每页数据数
  let pageSize = req.query.pageSize||10
  let sql='select * from reservationtable ' 
  connection.query(sql,function(error,results){
    
    
    if(error) return console.log(error.message)
    // 计算数据总条数
    let total = results.length;
       // 分页条件 (跳过多少条)
   let n = (currentPage - 1) * pageSize;
    // 拼接分页的sql语句
    sql += ` limit ${
      
      n}, ${
      
      pageSize}`;
    connection.query(sql,(error,results)=>{
    
    
      if(error) return console.log(error.message)
      res.send({
    
    
        code:200,
        total,
        results
      });
    })
  })
})

5.展示