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

用到的技术栈

vue-cli + node + mysql 

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

<template>
  <div class="table">
    <el-table
    :data="tableData"
    border
    style="width: 100%">
     
     <el-table-column
      type="index"
      :index="indexMethod"
      label="序号"
      width="50">
    </el-table-column>

    <el-table-column
      prop="product_name"
      label="手机"
      width="180">
    </el-table-column>
    <el-table-column
      prop="product_price"
      label="价格"
      width="100">
    </el-table-column>

    <el-table-column align="center" label="商品图片" width="120">
        <template slot-scope="scope">
          <img :src="scope.row.product_img" width="40" height="40" class="head_pic" />
        </template>
    </el-table-column>
    <el-table-column
      prop="product_desc"
      label="描述">
    </el-table-column>
  </el-table>
  <div id="pagepos">
   <el-pagination 
     background
    layout="prev, pager, next"
    @current-change="currentPage"
    :total="totalPage">
  </el-pagination>
</div>

</div>
</template>

<style lang="less" scoped>
#pagepos{
  // float:right
  text-align:center;
  margin-top:10px;

}
</style>

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部分

<script>
 import axios from 'axios'
  export default {
  name: 'page-query',
  data(){
    return{
      tableData: [],//当前页码表格数据
      pageNo:1,//表格页码
      pageCount:10,//数据数
      currentNo:1,//当前页码
      allData:[],//全部数据
      totalPage:1//总页码
    }
  },
  mounted(){
    this.getData();
    this.getPageTotal();
  },
  methods:{
    //获取前10条数据
    getData(index){
     this.pageNo = index || this.pageNo
        axios.post('http://139.9.107.233:3030/page',{page:this.pageNo,pageSize:this.pageCount}).then(res=>{
          console.log(res.data.data);
          this.tableData = res.data.data
        }).catch(error=>{
          console.log(error);
        })
    },
    //当前页数据
    currentPage(currentPage){
      this.currentNo = currentPage;
      console.log( this.currentNo)
        this.getData(this.currentNo)
    },
    //获取序号
    indexMethod(index){
      return (this.currentNo -1) * this.pageCount + index + 1;
    },
    //获取总页数
    getPageTotal(){
      axios.get('http://139.9.107.233:3030/getProductData').then(res=>{
        console.log(res.data.data);
        this.allData = res.data.data;
        this.totalPage = Math.ceil(this.allData.length / this.pageCount) * 10;
        console.log(this.totalPage);
      }).catch(error=>{
        console.log(error)
      })
    }
  }
}
</script>

第一页数据

第二页数据

第三页数据