Vue-github 用户搜索案例

news2025/6/9 20:49:12

一、前言

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

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

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

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

二、项目目标

我们要实现的功能如下：

功能	描述
输入用户名搜索	支持实时搜索或回车触发
防抖机制	避免频繁请求，提升性能
显示加载动画	在请求过程中显示“加载中”提示
展示搜索结果	显示用户头像、用户名、主页链接等信息
处理错误信息	当无结果或网络异常时提示用户
可选：保存历史记录	将搜索过的用户名保存到本地

三、技术选型

技术	说明
Vue 3	使用 `<script setup>` 语法糖
Axios	网络请求库
GitHub Public API	https://api.github.com/users/xxx
HTML + CSS	基础布局与样式
localStorage	可选，用于存储搜索历史
Vue Devtools	调试工具

四、项目结构说明

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 用户搜索界面。

你可以：

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

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

功能	实现建议
添加搜索历史记录	使用 `localStorage` 保存历史记录并展示
支持多个用户展示	返回用户列表而非单个用户
分页加载更多	GitHub API 支持分页查询
自动补全建议	结合 GitHub 搜索 API 实现输入联想
使用 TypeScript	提升类型安全与开发体验
使用 Vuex / Pinia 管理状态	更好地组织大型项目