前端分页以及后端分页

前端分页

 // 1.获取商品分类列表
    async getcatlist () {
      let res = await this.$http.get('categories?type=3')
      let {meta, data} = res.data
      if (meta.status === 200) {
        this.catList = data
        // 得到数据的总条数
        this.total = data.length
        // 第一次得到分页数据
        this.getPageList()
      }
    },
    // 2. 得到分页的数据源
    getPageList () {
      let start = (this.currentPage - 1) * this.pageSize
      let end = this.currentPage * this.pageSize
      // console.log(this.catList, start, end)
      // 得到分类数据源
      this.pageList = this.catList.slice(start, end)
      // console.log(this.pageList);
    },
    // 当前页发生改变
    currentChange (val) {
      // 改变当前页
      this.currentPage = val
      // 获取分页的数据
      this.getPageList()
    },
    // 页容量发生变化时
    sizeChange (val) {
      // 改变页容量
      this.pageSize = val
      // 重新获取分页数据
      this.getPageList()
    }