Vue-github 用户搜索案例

一、前言

在 Vue 开发中，与后端或第三方 API 接口进行交互是非常常见的需求。GitHub 提供了开放的 RESTful API，非常适合用来练习 Vue 的异步请求和数据绑定功能。

本文将带你一步步实现一个完整的 GitHub 用户搜索系统，包括：

• 使用 Axios 发起网络请求
• 实现用户输入防抖
• 加载状态提示
• 错误信息处理
• 搜索历史记录（可选）
• 数据展示与模板渲染

通过这个项目，你可以掌握 Vue 中的接口调用、组件化开发、状态管理等关键知识点，是初学者迈向实战开发的重要一步。

二、项目目标

我们要实现的功能如下：

三、技术选型

四、项目结构说明

vue-github-search/
├── public/
├── src/
│   ├── App.vue
│   ├── main.js
│   └── components/
│       └── UserSearch.vue
├── package.json
└── README.md

五、开发步骤详解

第一步：创建 Vue 项目（使用 Vite）

如果你还没有创建项目，可以通过 Vite 快速搭建：

npm create vite@latest vue-github-search
cd vue-github-search
npm install
npm run dev

选择 Vue + JavaScript 即可。

第二步：安装 Axios

npm install axios

第三步：创建 UserSearch 组件

src/components/UserSearch.vue

<template>
  <div class="search-container">
    <h2>GitHub 用户搜索</h2>

    <!-- 搜索框 -->
    <input
      v-model="keyword"
      @keyup.enter="searchUser"
      placeholder="请输入 GitHub 用户名..."
      class="search-input"
    />
    <button @click="searchUser" :disabled="loading">搜索</button>

    <!-- 加载提示 -->
    <p v-if="loading" class="loading">正在加载...</p>

    <!-- 错误提示 -->
    <p v-if="error" class="error">{{ error }}</p>

    <!-- 搜索结果 -->
    <div v-if="user" class="result">
      <img :src="user.avatar_url" :alt="user.login" class="avatar" />
      <p><strong>用户名：</strong>{{ user.login }}</p>
      <p><strong>主页：</strong><a :href="user.html_url" target="_blank">点击查看</a></p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

// 用户输入关键字
const keyword = ref('')

// 请求相关状态
const loading = ref(false)
const error = ref(null)
const user = ref(null)

// 搜索用户
function searchUser() {
  const name = keyword.value.trim()
  if (!name) {
    error.value = '请输入用户名'
    return
  }

  loading.value = true
  error.value = null
  user.value = null

  // 发起请求
  axios.get(`https://api.github.com/users/${name}`)
    .then(res => {
      user.value = res.data
    })
    .catch(err => {
      if (err.response && err.response.status === 404) {
        error.value = '未找到该用户，请检查用户名是否正确。'
      } else {
        error.value = '网络请求失败，请稍后再试。'
      }
    })
    .finally(() => {
      loading.value = false
    })
}
</script>

<style scoped>
.search-container {
  max-width: 500px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: Arial, sans-serif;
}

.search-input {
  width: 70%;
  padding: 8px;
  font-size: 16px;
  margin-right: 10px;
}

button {
  padding: 8px 12px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

button:disabled {
  background-color: #aaa;
}

.loading {
  color: orange;
}

.error {
  color: red;
}

.result {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 6px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}
</style>

第四步：在 App.vue 中引入组件

<template>
  <div id="app">
    <UserSearch />
  </div>
</template>

<script setup>
import UserSearch from './components/UserSearch.vue'
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

六、运行效果预览

启动项目：

npm run dev

访问 http://localhost:5173（默认地址），你会看到一个美观且功能齐全的 GitHub 用户搜索界面。

你可以：

• 输入用户名并点击“搜索”按钮；
• 或者按下回车键发起搜索；
• 显示用户头像、用户名、主页链接；
• 如果未找到用户或出现网络问题，会显示相应的提示信息；
• 正在请求时显示“加载中”提示。

七、功能扩展建议（进阶）

八、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！