parent
2a7fbb0be1
commit
c2570e4400
7 changed files with 194 additions and 40 deletions
@ -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> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -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> |
||||
@ -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"> <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> |
||||
@ -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') |
||||
Loading…
Reference in new issue