github搜索

axios 版

main.js
App.vue
List.vue
Search.vue

import Vue from "vue";
import App from './App.vue'

new Vue({
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    }
}).$mount('#app')


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

<script>
import Search from './components/Search.vue'
import List from './components/List.vue'
export default {
  name: "App",
  components: {Search, List}
};
</script>

<style>


</style>


<template>
  <div class="row">
    <div
      v-show="info.users.length"
      v-for="user in info.users"
      :key="user.id"
      class="card"
    >
      <a :href="user.html_url" target="_blank">
        <img :src="user.avatar_url" style="width: 100px" />
      </a>
      <p class="card-text"></p>
    </div>
    <h1 v-show="info.isFirst">欢迎使用</h1>
    <h1 v-show="info.errMsg">错错了</h1>
    <h1 v-show="info.isLoading">加载中。。。</h1>
  </div>
</template>

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

<style>
.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: 0.75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

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

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


<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>
import axios from 'axios'
export default {
    name: 'Search',
    data() {
        return {
            keyWord: ''
        }
    },
    methods: {
        searchUsers(){

            this.$bus.$emit('getUsers', {users:[], isLoading: true, errMsg: '' } )

            axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                response => {
                    console.log('收到了数据:', response.data);
                    this.$bus.$emit('getUsers', response.data.items)

                    this.$bus.$emit('getUsers', {users:response.data.items, isLoading: false, errMsg: '' } )

                },
                error => {
                    console.log('出错了，', error.message);
                    this.$bus.$emit('getUsers', {users:[], isLoading: false, errMsg: error.message } )
                }
            )
        }
    },
}
</script>

vue-resource 版

main.js
App.vue
List.vue
Search.vue

import Vue from "vue";
import App from './App.vue'

import VueResource from "vue-resource";

Vue.use(VueResource)

new Vue({
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    }
}).$mount('#app')


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

<script>
import Search from './components/Search.vue'
import List from './components/List.vue'
export default {
  name: "App",
  components: {Search, List}
};
</script>

<style>


</style>


<template>
  <div class="row">
    <div
      v-show="info.users.length"
      v-for="user in info.users"
      :key="user.id"
      class="card"
    >
      <a :href="user.html_url" target="_blank">
        <img :src="user.avatar_url" style="width: 100px" />
      </a>
      <p class="card-text"></p>
    </div>
    <h1 v-show="info.isFirst">欢迎使用</h1>
    <h1 v-show="info.errMsg">错错了</h1>
    <h1 v-show="info.isLoading">加载中。。。</h1>
  </div>
</template>

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

<style>
.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: 0.75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

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

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


<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(){
  
              this.$bus.$emit('getUsers', {users:[], isLoading: true, errMsg: '' } )
  
              this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                  response => {
                      console.log('收到了数据:', response.data);
                      this.$bus.$emit('getUsers', response.data.items)
  
                      this.$bus.$emit('getUsers', {users:response.data.items, isLoading: false, errMsg: '' } )
  
                  },
                  error => {
                      console.log('出错了，', error.message);
                      this.$bus.$emit('getUsers', {users:[], isLoading: false, errMsg: error.message } )
                  }
              )
          }
      },
  }
  </script>

results matching ""

    No results matching ""