vue--day63--github搜索案例

<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>

<!-- https://api.github.com/search/users?q=xxx -->

<script>

import axios from 'axios'

export default {

name: 'Search',

data(){

return{

keyWord:''

}

 

},

methods:{

searchUsers(){

// 请求开始前初始化数据

this.$bus.$emit('updateUsers', {

// 进行请求了，取消欢迎词

isFirst: false,

// 请求开始，进入加载状态

isLoading: true,

// 无报错信息

errorMsg: '',

// 请求开始前，用户数据为空

users: []

})

axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(

 

response => {

console.log('请求成功')

// 触发全局事件总线事件 传递数据

// this.$bus.$emit('updateUsers', response.data.items)

// 请求成功传递数据

this.$bus.$emit('updateUsers', {

// 原先是否第一次加载页面状态已经修改不用再次传递修改

// 请求结束

isLoading: false,

// 无报错信息

errorMsg: '',

// 用户数据

users: response.data.items

})

},

error => {

console.log('请求失败', error)

// 请求失败传递数据

this.$bus.$emit('updateUsers', {

// 原先是否第一次加载页面状态已经修改不用再次传递修改

// 请求结束

isLoading: false,

// 报错信息

errorMsg: error,

// 请求失败用户数据为空

users: []

})

}

)

}

}

 

}

</script>

<style scoped>

</style>

6.  静态页面