Vue github用户搜索案例分享

下面我会详细讲解“Vue github 用户搜索案例分享”的完整攻略并附带两条示例说明。

简介

本次分享的案例是一个基于 Vue.js 的 Github 用户搜索应用，借助 Github 的公共 API 实现了在搜索框中输入用户名后可查看该用户的 Github 账号信息以及其仓库列表。

技术栈

• Vue.js：构建用户界面的 MVVM 框架，核心思想是响应式编程和组件化编程思想。
• Axios：基于 Promise 的 HTTP 请求库，可以用在浏览器和 Node.js 中。
• GitHub API：可使用 Github 提供的 RESTful API 获取 Github 官方数据。

步骤

步骤 1：初始化项目

我们首先在终端中进入项目所在目录，使用 Vue cli 创建项目：

vue create vue-github-users-search

根据提示配置好相关选项即可。

步骤 2：修改 App.vue

在项目中，打开 src/components/App.vue 文件，在 <template> 标签中添加以下代码：

<div>
  <h1>GitHub Users Search</h1>
  <input
    type="text"
    placeholder="Enter GitHub username"
  />
  <button>Search</button>
</div>

我们创建了一个搜索框和一个按钮，并将其包裹在一个 <div> 标签中。

步骤 3：实现搜索功能

我们将在组件的 methods 属性中实现搜索功能。

首先引入 axios，并创建 searchUser() 方法：

import axios from 'axios';

...

methods: {
  async searchUser() {
    const username = 'octocat';
    try {
      const response = await axios.get(
        `https://api.github.com/users/${username}`
      );
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  }
}

这里先使用了 async 和 await 实现异步操作。

然后我们调用 axios.get()，发出 GET 请求并传入用户名作为 URL 的一部分，以获取 Github 用户信息。我们用 console.log() 打印响应数据以查看是否成功。

最后，我们在模板中将 searchUser() 绑定到搜索按钮上：

<button @click="searchUser()">Search</button>

现在，当我们点击按钮时，控制台会将 Github 用户信息打印出来。

步骤 4：显示用户信息

为了在模板中显示用户信息，我们需要在组件中创建 data() 方法，并在其中创建两个空对象，一个用于存储用户信息，另一个用于存储仓库列表。

data() {
  return {
    user: {},
    repos: [],
  };
}

在 searchUser() 方法中，我们使用响应数据更新 user 对象。修改 methods 属性如下：

methods: {
  async searchUser() {
    const username = 'octocat';
    try {
      const response = await axios.get(
        `https://api.github.com/users/${username}`
      );
      this.user = response.data;
    } catch (error) {
      console.error(error);
    }
  }
}

在模板中，我们使用插值语法来显示用户信息：

<div v-if="user.login">
  <h2>{{ user.login }}</h2>
  <img v-bind:src="user.avatar_url" alt="Avatar" />
  <p>{{ user.bio }}</p>
  <p>{{ user.location }}</p>
</div>

注意，由于 searchUser() 方法是异步的，因此我们需要在 div 元素上添加 v-if="user.login"，以确保只有在用户存在时才会显示用户信息。

步骤 5：显示仓库列表

我们将使用与搜索用户相同的方法来获取用户的仓库列表。

在组件中创建 searchRepos() 方法：

async searchRepos() {
  const username = 'octocat';
  try {
    const response = await axios.get(
      `https://api.github.com/users/${username}/repos`
    );
    this.repos = response.data;
  } catch (error) {
    console.error(error);
  }
},

在模板中，我们使用 v-for 来显示每个仓库。

<ul>
  <li v-for="repo in repos" :key="repo.id">
    <a :href="repo.html_url">{{ repo.name }}</a>
    <p>{{ repo.description }}</p>
    <p>Language: {{ repo.language }}</p>
  </li>
</ul>

最后，我们将 searchRepos() 方法绑定到搜索按钮上：

<button @click="searchUser(); searchRepos()">Search</button>

示例 1：使用 Vuex 管理状态

我们可以使用 Vuex 来管理组件的状态。在 src 目录下创建一个名为 store.js 的文件，并在其中创建一个 store：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: {},
    repos: [],
  },
  mutations: {
    updateUser(state, user) {
      state.user = user;
    },
    updateRepos(state, repos) {
      state.repos = repos;
    },
  },
  actions: {
    async fetchUserProfile({ commit }, username) {
      try {
        const response = await axios.get(
          `https://api.github.com/users/${username}`
        );
        commit('updateUser', response.data);
      } catch (error) {
        console.error(error);
      }
    },
    async fetchUserRepos({ commit }, username) {
      try {
        const response = await axios.get(
          `https://api.github.com/users/${username}/repos`
        );
        commit('updateRepos', response.data);
      } catch (error) {
        console.error(error);
      }
    },
  },
});

然后在组件中引入 store，并将 data() 方法中的数据移除，由 store 提供：

import store from '../store';

然后，在组件中使用 computed 属性来获取 store 中的状态：

computed: {
  user() {
    return this.$store.state.user;
  },
  repos() {
    return this.$store.state.repos;
  },
},

最后，我们修改 methods 属性来调用 action：

methods: {
  async searchUser() {
    const username = 'octocat';
    await this.$store.dispatch('fetchUserProfile', username);
  },
  async searchRepos() {
    const username = 'octocat';
    await this.$store.dispatch('fetchUserRepos', username);
  },
}

示例 2：使用 Vue Router 导航

我们可以利用 Vue Router 实现路由导航，例如在搜索后跳转到用户详情页。

首先，在 src 目录下创建一个名为 router.js 的文件，并在其中新建一个 router：

import Vue from 'vue';
import VueRouter from 'vue-router';

import Users from './components/Users.vue';
import User from './components/User.vue';

Vue.use(VueRouter);

export default new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Users },
    { path: '/:username', component: User },
  ],
});

这里我们创建了两个路由：/ 是主页，显示搜索框和仓库列表；/:username 是用户详情页，显示用户信息和仓库列表。

然后在 main.js 中引入 router，并将其绑定到根实例上：

import router from './router';

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

最后，在组件中添加路由跳转链接，例如在搜索成功后跳转到用户详情页：

<a v-if="user.login" :to="`/${user.login}`">{{ user.login }}</a>

这就是“Vue Github 用户搜索案例分享”的完整攻略并附带了两条示例说明。如果需要更加详细的代码可以参考Github。