An article tells you how to implement Vue front-end paging and back-end paging

1: Front-end handwritten paging (when the amount of data is small)
2: Backend paging, the frontend only needs to pay attention to the passed page and pageSize
Summarize

1: Front-end handwritten paging (when the amount of data is small)

The front end needs to use slice interception: tableData((page-1)pageSize,pagepageSize)

2: Backend paging, the frontend only needs to pay attention to the passed page and pageSize

3: Front-end handwritten paging buttons

 <body>
  <div id="app">
    <table class="table table-bordered table-condensed">
      <tr class="bg-primary">
        <th class="text-center">Sort</th>
        <th class="text-center">User Name</th>
        <th class="text-center">User's gender</th>
        <th class="text-center">City</th>
      </tr>
      <tr class="text-center active" v-for="(v,i) in list" :key="i">
        <td>{{num(i)}}</td>
        <!-- <td>{{params.pagesize}}</td> -->
        <td>{{v.name}}</td>
        <td>{{v.sex}}</td>
        <td>{{v.addr}}</td>
      </tr>       
    </table>
    <nav aria-label="Page navigation" style="text-align: center;">
      <ul class="pagination">
        <!-- Previous Page -->
        <li @click="prePage()" :class="{'disabled':params.page == 1}">
          <a aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li :class="{'active': params.page == page}" v-for="(page,index) in pages" :key="index" @click="curPage(page)">
          <a style="cursor: pointer;">
            {{page}}
          </a>
        </li>
        <!-- Next Page -->
        <li :class="{'disabled':params.page == totalPage}" @click="next()">
          <a aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</body>

window.onload = function () {
  // Only one request (trigger event) is allowed within 1 second (multiple clicks are allowed) throttle
  new Vue({
    el: '#app',
    data: {
      params:{
        page:1,
        pagesize:20,
        name:''
      },
      list: [],
      total:0, //Total number of entries totalPage:0, //Total number of pages flag: false,
    },
    created() {
      this.getData()
    },
    computed: {
      pages() {
        let totalPage = this.totalPage;
        let page = this.params.page;
        // The total number of pages is less than 10 if(totalPage < 10) return totalPage;
        // If the total number of pages is greater than 10, add ellipsis if (page <= 5) { // The first five pages // (1) If the page number is less than 5, six pages will be displayed on the left return [1,2,3,4,5,6,'...',totalPage]
        } else if (page >= totalPage - 5) { // Next five pages console.log("trigger")
          // (2) If the page number is greater than the total number of pages - 5, six returns are displayed on the right: [1,'...',totalPage-5,totalPage-4,totalPage-3,totalPage-2,totalPage-1,totalPage]
        } else { // The middle five pages // (3) The page number is between 5-(totalPage-5). The left interval cannot be less than 5 and the right interval cannot be greater than the total number of pages totalPage. Note that the current page-num on the left cannot be less than 1, and the current page+num on the right cannot be greater than the total number of pages return [1,'...',page-1,page,page+1,page+2,page+3,'...',totalPage]
        }
      },
      num() {
        let { pagesize, page} = this.params
        // (1-1) * 10 + 10 + 0 + 1 = 1;
        // (2-1) * 10 + 10 + 0 + 1 = 11 
        // First page = (current page - 1) * number of entries per page + index value + 1. Ensure that it starts from 1. return i => (page - 1) * pagesize + i + 1 // (current page - 1 * number of entries per page) + index value + 1
      }
    },
    methods: {
      getData() {
        if(this.flag) return;
        this.flag = true;
        // The following is equivalent to a timer axios.get('http://localhost:3000/user/listpage',{params:this.params}).then(res => {
          console.log('res',res.data.users)
          let { total,users } = res.data.users;
          this.total = total;
          this.totalPage = Math.ceil( this.total / this.params.pagesize);
          this.list = users
          this.flag = false;
        })
      },
      curPage(page) {
        if(page == '...') return 
        if(this.flag) return;
        this.params.page = page;
        this.getData()
      },
      prePage() {
        // if (this.params.page == '...') return 
        if (this.params.page > 1) {
          if(this.flag) return;
          --this.params.page;
          console.log('page',this.params.page)
          this.getData()
        }
      },
      next() {
        // if (this.params.page == '...') return 
        if(this.flag) return;
        console.log("execution", this.totalPage)
        if(this.params.page < this.totalPage) {
          ++this.params.page;
          console.log('page',this.params.page)
          this.getData()
        }
      },
     } 
  })
}