实现效果

继前面文章继续完善

后端

后端接口添加分页参数。

加一个当前页，再加一个当每页数量，因为我是固定的list分页，没有数据库查询，所以这里没有直接用PageHelper

    /**
     * 获取接口列表
     * @param page 当前页
     * @param pageSize 每页数量
     * @return
     */
    @RequestMapping(value = "/getApiList", method = RequestMethod.GET)
    public ResultInfo getList(@RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "5") Integer pageSize) {
        List<ApiList> list = this.getApiList();
        //创建Page类
        Page page1 = new Page(page, pageSize);
        //为Page类中的total属性赋值
        int total = list.size();
        page1.setTotal(total);
        //计算当前需要显示的数据下标起始值
        int startIndex = (page - 1) * pageSize;
        int endIndex = Math.min(startIndex + pageSize, total);
        //从链表中截取需要显示的子链表，并加入到Page
        page1.addAll(list.subList(startIndex, endIndex));
        //以Page创建PageInfo
        PageInfo pageInfo = new PageInfo<>(page1);
        return ResultInfo.ok(pageInfo);
    }

    private List<ApiList> getApiList() {
        List<ApiList> list = new ArrayList<>();
        list.add(new ApiList(1, "上传二维码识别", "/qrcode/upload", "/apiInfo"));
        for (int i = 2; i < 19; i++) {
            list.add(new ApiList(i, "网络二维码识别", "/qrcode/url", "/apiInfo"));
        }
        return list;
    }

前端

size-change和current-change是elementUI中的事件，直接用就行，方法自己写

关于分页有三个参数，分别是currentPage当前页，total总数量，pageSize每页数量

<template>
  <div>
    <el-card class="box-card" shadow="hover" body-style="border-radius：50px;" v-for="(v,i) in dataArray" :key="i" @click.native="toApiInfo(dataArray[i],$event)">
      <div class="text item">
        {{ dataArray[i].name }}
        <br>
        {{ dataArray[i].path }}
      </div>
    </el-card>
    <el-pagination
      @size-change=handleSizeChange
      @current-change=page
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data () {
    return {
      dataArray: [],
      currentPage: 1,
      total: 0,
      pageSize: 5
    }
  },
  created () {
    this.page(1)
  },
  methods: {
    toApiInfo (v, e) {
      this.$router.push({path: v.view, query: {id: v.id}})
    },
    page (currentPage) {
      //切换页码
      this.getApiList(currentPage, this.pageSize)
    },
    handleSizeChange (size) {
      //变更每页数量
      this.getApiList(this.currentPage, size)
    },
    getApiList (page, pageSize) {
      const _this = this
      _this.$axios.get('/getApiList', {
        params: {
          page: page,
          pageSize: pageSize
        }
      }).then(res => {
        _this.dataArray = res.data.data.list
        _this.currentPage = res.data.data.pageNum
        _this.total = res.data.data.total
        _this.pageSize = res.data.data.pageSize
      }).catch(resp => {
        _this.$alert('获取Api列表失败！！！', '温馨提示')
      })
    }
  }
}
</script>

<style scoped>

.text {
  font-size: 14px
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 150px;
  display: inline-block;
  margin: 10px;
}
</style>

然后效果就是第一个图片的样子了