当前位置：首页 > VUE

vue实现github

2026-01-13 04:28:51VUE

Vue 实现 GitHub 功能

在 Vue 中实现类似 GitHub 的功能，可以通过调用 GitHub API 获取数据，并结合 Vue 的响应式特性进行展示。以下是一个完整的实现方案：

安装 axios 进行 API 调用

npm install axios

创建 Vue 组件

<template>
  <div>
    <input v-model="username" placeholder="输入 GitHub 用户名" />
    <button @click="fetchRepos">获取仓库</button>
    <div v-if="loading">加载中...</div>
    <div v-else>
      <div v-for="repo in repos" :key="repo.id">
        <h3>{{ repo.name }}</h3>
        <p>{{ repo.description }}</p>
        <p>⭐ {{ repo.stargazers_count }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      repos: [],
      loading: false,
    };
  },
  methods: {
    async fetchRepos() {
      if (!this.username) return;
      this.loading = true;
      try {
        const response = await axios.get(
          `https://api.github.com/users/${this.username}/repos`
        );
        this.repos = response.data;
      } catch (error) {
        console.error('获取仓库失败:', error);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

使用 GitHub API 的注意事项

GitHub API 有速率限制，未认证的情况下每小时最多 60 次请求。
可以通过创建个人访问令牌（Personal Access Token）提高速率限制。

添加认证令牌

在 axios 请求中添加认证头：

axios.get(`https://api.github.com/users/${this.username}/repos`, {
  headers: {
    Authorization: `token YOUR_GITHUB_TOKEN`,
  },
});

实现分页功能

GitHub API 支持分页参数，可以在请求中添加 page 和 per_page：

axios.get(`https://api.github.com/users/${this.username}/repos?page=1&per_page=10`);

错误处理

添加更详细的错误处理逻辑，例如用户不存在或 API 限制：

catch (error) {
  if (error.response.status === 404) {
    alert('用户不存在');
  } else if (error.response.status === 403) {
    alert('API 速率限制，请稍后再试');
  }
}