1.创建Search.vue
template>
<section class="jumbotron">
<h3 class = 'jumbotron-heading'> Search Github Users</h3>
<div class="jumbotron-context">
<input type="text" placeholder="enter the name you search" v-model="keyword"/>
<button @click="searchUsers">Search</button>
</div>
</section>
</template>
<script>
import pubsub from 'pubsub-js'
import axios from 'axios'
export default {
name:'Search',
data(){
return{
keyword:'',
}
},
methods:{
searchUsers(){
//请求前更新数据
pubsub.publish('getUsers',[false,true,[],''])
axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
res=>{
console.log('发送数据成功',res.data.items)
pubsub.publish('getUsers',[false,false,res.data.items,''])
},
err=>{
console.log('请求发送失败',err.message)
pubsub.publish('getErr',err.message)
}
)
//请求后更新数据
}
}
}
</script>
<style scoped>
.jumbotron{
background-color:rgba(186, 197, 187, 0.301);
height:200px;
padding-left:10%;
padding-top:60px;
margin-bottom: 50px;
border-radius: 10px;
}
.jumbotron-context>input{
width:220px;
}
button{
border:1px solid rgb(148, 142, 142);
}
</style>
2.创建List界面
<template>
<div class="row" >
<!--展示欢迎-->
<h1 v-if="firstShow" >欢迎使用!</h1>
<!--展示加载中-->
<h1 v-if="secondShow" >加载中,请稍后···</h1>
<!--展示错误信息-->
<h1 v-if="errShow" >{{err}}</h1>
<div class="card" v-for="user in users" :key="user.id">
<a :href="user.html_url" target="_blank">
<img :src="user.avatar_url" style="width:100px">
</a>
<p class="card-text"> {{user.login}}</p>
</div>
</div>
</template>
<script>
import pubsub from 'pubsub-js'
export default {
name:'List',
data(){
return{
users:[],
firstShow:true,
secondShow:false,
errShow:false,
err:''
}
},
methods:{
updateDate(_,data){
console.log('我是List组件,我收到的信息',data[0],data[1],data[2],data[3])
this.users=data[2]
this.firstShow=data[0]
this.secondShow=data[1]
this.err=data[3]
console.log('this.users='+this.users)
},
},
mounted() {
//绑定事件
this.pid=pubsub.subscribe('getUsers',this.updateDate)
},
}
</script>
<style>
.album{
min-height:50rem;
padding-top:3rem;
padding-bottom: 3rem;
background-color:#f7f7f7 ;
}
.card{
float:left;
width:33.33%;
padding: 0.75rem;
border:1px solid #efefef;
text-align: center;
}
.card>img{
margin-bottom: .75rem;
border-radius: 100px;
}
.card-text{
font-size: 85%;
}
</style>
3.创建app.vue
<template>
<div class ='container'>
<Search/>
<List/>
</div>
</template>
<script>
import List from'./components/List'
import Search from'./components/Search'
export default {
name:'App',
components:{
Search,
List,
}
}
</script>
<style>
.album{
min-height:50rem;
padding-top:3rem;
padding-bottom: 3rem;
background-color:#f7f7f7 ;
}
.card{
float:left;
width:33.33%;
padding: 0.75rem;
border:1px solid #efefef;
text-align: center;
}
.card>img{
margin-bottom: .75rem;
border-radius: 100px;
}
.card-text{
font-size: 85%;
}
</style>
4.效果图