从零开始在 Vue 3 中实现网络请求和分页功能

2023-07-28 06:59:15

网络请求与分页功能：Vue 3 中实现数据交互与展示

网络请求

在前端开发中，网络请求是必不可少的，它允许我们从后端服务器获取数据，以丰富前端界面。在 Vue 3 中，我们可以使用 HyRequest 库对 Axios 进行封装，从而更轻松地发起网络请求。

安装 HyRequest

首先，通过 NPM 安装 HyRequest：

npm install hy-request

创建 HyRequest 实例

在 Vue 组件中，创建 HyRequest 实例：

import { HyRequest } from "hy-request";

const instance = new HyRequest();

发送请求

通过 HyRequest 实例，我们可以轻松发起网络请求：

instance.get("/api/users").then((res) => {
  // 处理响应数据
});

分页功能

分页功能允许我们在有限的空间内分段显示数据，提升用户体验。在 Vue 3 中，我们可以使用 computed、watch 和 props 来实现分页。

计算总页数

使用 computed 计算总页数：

computed: {
  totalPages() {
    return Math.ceil(this.total / this.pageSize);
  },
}

监听当前页码

通过 watch 监听当前页码的变化：

watch: {
  currentPage(newVal) {
    this.loadData(); // 触发数据加载
  },
},

传递分页参数

通过 props 传递分页参数，包括当前页码、每页大小和总数据量：

props: {
  currentPage: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
  total: {
    type: Number,
    default: 0,
  },
}

代码示例

以下是一个使用 HyRequest 和分页的 Vue 3 组件示例：

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>

    <pagination :current-page="currentPage" :total-pages="totalPages"></pagination>
  </div>
</template>

<script>
import { HyRequest } from "hy-request";
import Pagination from "./Pagination.vue";

export default {
  components: { Pagination },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      users: [],
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize);
    },
  },
  watch: {
    currentPage(newVal) {
      this.loadData();
    },
  },
  methods: {
    loadData() {
      const instance = new HyRequest();
      instance.get("/api/users", {
        params: {
          page: this.currentPage,
          pageSize: this.pageSize,
        },
      }).then((res) => {
        this.users = res.data.data;
        this.total = res.data.total;
      });
    },
  },
  created() {
    this.loadData();
  },
};
</script>