Vue-github 用户搜索案例

一、前言

在 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><!-- 搜索框 --><inputv-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 = trueerror.value = nulluser.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 管理状态	更好地组织大型项目

八、结语

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