5分钟！Vue 快速实现 GitHub 用户搜索功能

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用组件
Vue.use(vueResource)

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this //安装全局事件总线
    }
})

2). App.vue内容

<template>
   <div class="container">
       <Search/>
       <List/>
   </div>
</template>

<script>
   //引入第三方样式
   import './assets/css/bootstrap.css'
   import Search from './components/Search'
   import List from './components/List'
   export default {
       name:'App',
       components: {Search,List}
   }
</script>

3). Search.vue内容

<template>
   <section class="jumbotron">
       <h3 class="jumbotron-heading">Search Github >Users</h3>
       <div>
           <input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;
           <button @click="searchUsers">Search</button>
       </div>
   </section>
</template>

<script>
   export default {
       name: "Search",
       data(){
           return {
               keyWord:''
           }
       },
       methods: {
           searchUsers(){
               //请求前更新List的数据
               this.$bus.$emit('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]})
               this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                   response => {
                       //请求成功后更新List的数据
                       this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
                   },
                   error => {
                       //请求失败后更新List的数据
                       this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})

                   }
               )
           }
       }
   }
</script>

4). List.vue内容

<template>
   <div class="row">
       <!-- 展示用户列表 -->
       <div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login">
           <a :href="user.html_url" target="_blank">
               <img :src="user.avatar_url" style="width: 100px"/>
           </a>
           <p class="card-text">{{user.login}}</p>
       </div>
       <!-- 展示欢迎词 -->
       <h1 v-show="info.isFirst">欢迎使用！</h1>
       <!-- 展示加载中 -->
       <h1 v-show="info.isLoading">加载中...</h1>
       <!-- 展示错误信息 -->
       <h1 v-show="info.errMsg">{{info.errMsg}}</h1>
   </div>
</template>

<script>
   export default {
       name: "List",
       data(){
           return {
               info:{
                   isFirst: true,
                   isLoading: false,
                   errMsg: '',
                   users:[]
               }
           }
       },
       mounted(){
           this.$bus.$on('updateListData', (dataObj)=>{
               this.info = {...this.info,...dataObj}
           })
       }
   }
</script>

<style scoped>
   .album {
       min-height: 50rem;
       padding-top: 3rem;
       padding-bottom: 3rem;
       background-color: white;
   }
   .card{
       float: left;
       width: 33.333%;
       padding: .75rem;
       margin-bottom: 2rem;
       border: 1px solid white;
       text-align: center;
   }
   .card > img {
       margin-bottom: .75rem;
       border-radius: 100px;
   }
   .card-text {
       font-size: 85%;
   }
</style>

4. 实现效果

5. 写到最后

上文中提到的github开放接口，仅支持测试调试使用，切勿频繁恶意调用，谨防被拦截后记入黑名单！！！

我来回复

暂无回复内容