完成github搜索案例

20_脚手架/vue_code/20.src_github搜索案例/App.vue

@@ -0,0 +1,20 @@
+<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>

20_脚手架/vue_code/20.src_github搜索案例/components/List.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="row">
+    <!--  展示列表  -->
+    <div v-show="info.user.length" class="card" v-for="u in info.user">
+      <a :href="u.html_url" target="_blank">
+        <img :src="u.avatar_url" style="width: 100px" alt=""/>
+      </a>
+      <p class="card-text">{{ u.login }}</p>
+    </div>
+    <!--  展示欢迎  -->
+    <h1 v-show="info.isFirst">欢迎</h1>
+    <!--  展示加载中  -->
+    <h1 v-show="info.isLoading">数据加载中...</h1>
+    <!--  展示错误信息  -->
+    <h1 v-show="info.errorMsg">{{ info.errorMsg }}</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "List",
+  data() {
+    return {
+      info: {
+        user: [],
+        isFirst: true,
+        isLoading: false,
+        errorMsg: ''
+      }
+    }
+  },
+  methods: {
+    getUserList(data) {
+      this.info = {...this.info, ...data}
+    }
+  },
+  mounted() {
+    this.$bus.$on('getUserList', this.getUserList)
+  }
+}
+
+</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;
+  border-radius: 10px;
+}
+
+.card > img {
+  margin-bottom: .75rem;
+  border-radius: 100px;
+}
+
+.card-text {
+  font-size: 85%;
+}
+</style>

20_脚手架/vue_code/20.src_github搜索案例/components/Search.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <section class="jumbotron">
+      <h3 class="jumbotron-heading">Search Github Users</h3>
+      <div>
+        <input type="text" placeholder="enter the name you search" v-model="input">&nbsp;<button @click="getUser()">
+        Search
+      </button>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  name: "Search",
+  data() {
+    return {
+      input: ""
+    }
+  },
+  methods: {
+    getUser() {
+      this.$bus.$emit('getUserList', {'isFirst':false, 'isLoading': true})
+      axios.get('https://api.github.com/search/users?', {params: {"q": this.input}}).then(
+          response => {
+            this.$bus.$emit('getUserList', {'isLoading': false, 'user': response.data.items})
+          },
+          error => {
+            this.$bus.$emit('getUserList', {'errorMsg': error.message, 'user': []})
+          }
+      )
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

20_脚手架/vue_code/20.src_github搜索案例/main.js

@@ -0,0 +1,19 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+
+// 设置Vue
+Vue.config.productionTip = false
+
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App),
+    beforeCreate() {
+        Vue.prototype.$bus = this  // 安装全局事件总线
+    }
+}).$mount('#app')

20_脚手架/vue_code/src/components/List.vue

@@ -1,48 +1,44 @@
 <template>
   <div class="row">
-    <div class="card">
+    <!--  展示列表  -->
-      <a href="https://github.com/xxxxxx" target="_blank">
+    <div v-show="info.user.length" class="card" v-for="u in info.user">
-        <img src="https://v2.cn.vuejs.org/images/logo.svg" style="width: 100px" alt=""/>
+      <a :href="u.html_url" target="_blank">
+        <img :src="u.avatar_url" style="width: 100px" alt=""/>
       </a>
-      <p class="card-text">xxxxx</p>
+      <p class="card-text">{{ u.login }}</p>
-    </div>
-    <div class="card">
-      <a href="https://github.com/xxxxxx" target="_blank">
-        <img src="https://v2.cn.vuejs.org/images/logo.svg" style="width: 100px" alt=""/>
-      </a>
-      <p class="card-text">xxxxx</p>
-    </div>
-    <div class="card">
-      <a href="https://github.com/xxxxxx" target="_blank">
-        <img src="https://v2.cn.vuejs.org/images/logo.svg" style="width: 100px" alt=""/>
-      </a>
-      <p class="card-text">xxxxx</p>
-    </div>
-    <div class="card">
-      <a href="https://github.com/xxxxxx" target="_blank">
-        <img src="https://v2.cn.vuejs.org/images/logo.svg" style="width: 100px" alt=""/>
-      </a>
-      <p class="card-text">xxxxx</p>
-    </div>
-    <div class="card">
-      <a href="https://github.com/xxxxxx" target="_blank">
-        <img src="https://v2.cn.vuejs.org/images/logo.svg" style="width: 100px" alt=""/>
-      </a>
-      <p class="card-text">xxxxx</p>
-    </div>
-    <div class="card">
-      <a href="https://github.com/xxxxxx" target="_blank">
-        <img src="https://v2.cn.vuejs.org/images/logo.svg" style="width: 100px" alt=""/>
-      </a>
-      <p class="card-text">xxxxx</p>
     </div>
+    <!--  展示欢迎  -->
+    <h1 v-show="info.isFirst">欢迎</h1>
+    <!--  展示加载中  -->
+    <h1 v-show="info.isLoading">数据加载中...</h1>
+    <!--  展示错误信息  -->
+    <h1 v-show="info.errorMsg">{{ info.errorMsg }}</h1>
   </div>
 </template>
 
 <script>
 export default {
-  name: "List"
+  name: "List",
+  data() {
+    return {
+      info: {
+        user: [],
+        isFirst: true,
+        isLoading: false,
+        errorMsg: ''
+      }
+    }
+  },
+  methods: {
+    getUserList(data) {
+      this.info = {...this.info, ...data}
+    }
+  },
+  mounted() {
+    this.$bus.$on('getUserList', this.getUserList)
+  }
 }
+
 </script>
 
 <style scoped>

20_脚手架/vue_code/src/components/Search.vue

@@ -3,7 +3,9 @@
     <section class="jumbotron">
       <h3 class="jumbotron-heading">Search Github Users</h3>
       <div>
-        <input type="text" placeholder="enter the name you search" v-model="input">&nbsp;<button @click="getUser()">Search</button>
+        <input type="text" placeholder="enter the name you search" v-model="input">&nbsp;<button @click="getUser()">
+        Search
+      </button>
       </div>
     </section>
   </div>
@@ -20,10 +22,15 @@ export default {
     }
   },
   methods: {
-    getUser(e) {
+    getUser() {
+      this.$bus.$emit('getUserList', {'isFirst':false, 'isLoading': true})
       axios.get('https://api.github.com/search/users?', {params: {"q": this.input}}).then(
           response => {
-            console.log(response.data)},
+            this.$bus.$emit('getUserList', {'isLoading': false, 'user': response.data.items})
+          },
+          error => {
+            this.$bus.$emit('getUserList', {'errorMsg': error.message, 'user': []})
+          }
       )
     }
   }