github搜索案例（vue版本）之完善案例

代码变更涉及的文件有：

1. App.vue，即App组件。
2. components/Search.vue，即Search组件。
3. components/List.vue，即List组件。

App.vue（App组件）

<template>
  <div id="app">
    <div class="container">
      <Search :updateInfo="updateInfo"/>
      <List :info="info"/>
    </div>
  </div>
</template>

<script>
import Search from "./components/Search.vue";
import List from './components/List.vue';

export default {
  name: 'App',
  components: {
    Search,
    List
  },
  data(){
    return {
      info:{
        users:[],
        isFirst:true,
        isLoading:false,
        errorMsg:""
      }
    }
  },
  methods:{
    updateInfo(dataObj){
      this.info = {...this.info,...dataObj}
    }
  }
}
</script>

Search.vue（Search组件）

<template>
    <section class="jumbotron">
      <h3 class="jumbotron-heading">搜索Github用户</h3>
      <div>
        <input type="text" placeholder="输入关键词" ref="keywordEle"/>&nbsp;
        <button @click="handleClick">搜索</button>
      </div>
    </section>  
</template>

<script>
import axios from "axios";

export default {
    name:"Search",
    props:["updateInfo"],
    methods:{
        handleClick(){
            const keyword = this.$refs.keywordEle.value;
            this.updateInfo({
                isFirst:false,
                isLoading:true,
                users:[],
                errorMsg:""
            })
            axios.get(`https://api.github.com/search/users?q=${keyword}`).then(
                response => {
                    this.updateInfo({
                        isLoading:false,
                        users:response.data.items,
                        errorMsg:""
                    })
                },
                error => {
                    this.updateInfo({
                        isLoading:false,
                        users:[],
                        errorMsg:error.message
                    })
                }
            )
        }
    }
}
</script>

List.vue（List组件）

<template>
  <div class="row">
    <div v-show="info.users.length" class="card" v-for="userObj in info.users" :key="userObj.id">
      <a :href="userObj.html_url" target="_blank">
        <img :src="userObj.avatar_url" style="width: 100px" />
      </a>
      <p class="card-text">{{userObj.login}}</p>
    </div>
    <!-- 显示欢迎词 -->
    <h2 v-show="info.isFirst">欢迎使用，输入关键词，点击按钮即可搜索</h2>

    <!-- 显示错误信息 -->
    <h2 v-show="info.errorMsg">{{info.errorMsg}}</h2>

    <!-- 显示加载中 -->
    <h2 v-show="info.isLoading">正在加载...</h2>

  </div>
</template>

<script>
export default {
  name: "List",
  props:["info"]
};
</script>

<style scoped>
.album {
  min-height: 50rem;
  /* Can be removed; just added for demo purposes */
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #f7f7f7;
}

.card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card>img {
  margin-bottom: .75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}
</style>

相关链接

github搜索案例（vue版本）之搭建静态页面
github搜索案例（vue版本）之展示数据