获取bootstrap vue分页以使用REST api

Bootstrap Vue 是一个流行的前端框架，它结合了 Bootstrap 的样式和 Vue.js 的组件化特性，提供了丰富的 UI 组件，包括分页组件。要使用 Bootstrap Vue 的分页组件与 REST API 进行交互，你需要了解以下几个基础概念：

基础概念

Bootstrap Vue 分页组件：这是一个用于显示分页控件的 Vue 组件，允许用户通过点击页码来导航不同的数据页面。
REST API：REST（Representational State Transfer）是一种网络应用程序的设计风格和开发方式，基于 HTTP 协议，可以使用 XML 或者 JSON 格式传输数据。
分页参数：通常包括 page（当前页码）和 limit（每页显示的数据条数），这些参数会被发送到服务器以获取特定页面的数据。

类型

客户端分页：所有数据一次性加载到客户端，然后通过前端逻辑进行分页。
服务器端分页：每次只加载当前页面所需的数据，通常与 REST API 结合使用。

应用场景

列表展示：如商品列表、文章列表等。
大数据处理：当数据量非常大时，分页可以有效地管理和展示数据。

示例代码

以下是一个简单的示例，展示如何使用 Bootstrap Vue 的分页组件与 REST API 进行交互：

<template>
  <div>
    <!-- 数据列表 -->
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>

    <!-- 分页组件 -->
    <b-pagination
      v-model="currentPage"
      :total-rows="totalRows"
      :per-page="perPage"
      aria-controls="my-table"
    ></b-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 存储从API获取的数据
      currentPage: 1, // 当前页码
      totalRows: 0, // 总行数
      perPage: 10, // 每页显示的数据条数
    };
  },
  watch: {
    currentPage() {
      this.fetchData();
    }
  },
  methods: {
    fetchData() {
      const start = (this.currentPage - 1) * this.perPage;
      const end = start + this.perPage;

      // 发送请求到REST API
      fetch(`/api/items?start=${start}&end=${end}`)
        .then(response => response.json())
        .then(data => {
          this.items = data.items;
          this.totalRows = data.total;
        });
    }
  },
  mounted() {
    this.fetchData(); // 初始加载数据
  }
};
</script>