vue+node+mysql实现分页展示数据

为什么要使用分页展示数据，因为如果一次性向服务器请求全部数据的话，数据量大的话，会对服务器造成阻塞，要提高性能，所以这就要使用分页展示数据，当我们用到表格当前页的数据，才向服务器发起相对应页码和码数的请求。

用到的技术栈

vue-cli + node + mysql 

前端页面编写
页面搭建主要是用到了element-ui框架，用到了表格组件和分页组件
代码

mysql数据库shop表数据

node后台接口

获取shop表的全部数据

//获取商品
router.get('/getProductData', (req, res) => {
  const sqlStr = `SELECT * FROM shop`;
  connection.query(sqlStr, (error, results, fields) => {
    if (error) {
      res.json({ err_code: 0, message: "获取失败" });
    } else {
      results = JSON.parse(JSON.stringify(results));
      res.json({ success_code: 200, data: results })
    }
  })
})

分页展示接口

//分页查询

router.post('/page',(req,res)=>{
  
  let pageNo = Number(req.body.page) || 1;
  let pageCount = Number(req.body.pageSize) || 10;
  let pageSize = pageCount;
  let page = (pageNo - 1) * pageCount;
  console.log(page,pageSize);
  let sqlStr = `select * from shop limit ${page},${pageSize}`;
  connection.query(sqlStr,(error,results,fields)=>{
    if(error){
      console.log(error);
      res.json({ err_code: 0, message: "获取分页数据失败"});
    }else{
      console.log(results);
        res.json({success_code: 200, message: '获取分页数据成功', data: results })
    }
  })
})

前端js部分

第一页数据

第二页数据

第三页数据