1. 前言
前期给小伙伴们分享了学会Vue后，都能做哪些案例，例如：
10 行代码！Vue 实现炫酷的 TodoList 动画效果
永别 jQuery！axios配置代理服务器才是yyds!
测试开发系列！Vue 组件间通信方式: 自定义事件，简直太灵活好用了~
Vue 强大的插件功能，你也可以自定义实现！(真没你想得那么高大上~)
Coding 提升篇！Vue 组件代码优化: 公共配置抽离成 Mixin 混合( 附超详细使用教程 )
测试开发系列！Vue 组件间通信方式汇总，总有一款适合你( 5分钟教程-附项目实战案例 )
测试开发必备！webStorage 浏览器本地存储数据（附项目实战案例！）
200行纯前端Vue代码！教你写一个专属TodoList【零基础友好】
测试开发之前端VUE框架的搭建与使用（基础篇）
今天给大家分享如何使用Vue快速开发一个具有github用户搜索功能的页面。
2. 目录结构
先来看下核心的目录结构
assets目录下放置样式文件：bootstrap.css
components目录下放置页面组件文件：List.vue, Search.vue
App.vue文件是对子组件 List.vue, Search.vue 的导入与引用
main.js文件对 App.vue 组件内容的整体解析与渲染
3. 核心代码
1). main.js内容
代码语言：javascript复制//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用组件
Vue.use(vueResource)
//创建vm
new Vue({
el:'#app',
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线
}
})
2). App.vue内容
代码语言：javascript复制<template>
<div class="container">
<Search/>
<List/>
</div>
</template>
<script>
//引入第三方样式
import './assets/css/bootstrap.css'
import Search from './components/Search'
import List from './components/List'
export default {
name:'App',
components: {Search,List}
}
</script>
3). Search.vue内容
代码语言：javascript复制<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"/>
<button @click="searchUsers">Search</button>
</div>
</section>
</template>
<script>
export default {
name: "Search",
data(){
return {
keyWord:''
}
},
methods: {
searchUsers(){
//请求前更新List的数据
this.$bus.$emit('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]})
this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
response => {
//请求成功后更新List的数据
this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
},
error => {
//请求失败后更新List的数据
this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
}
)
}
}
}
</script>
4). List.vue内容
代码语言：javascript复制<template>
<div class="row">
<!-- 展示用户列表 -->
<div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login">
<a :href="user.html_url" target="_blank">
<img :src="user.avatar_url" style="width: 100px"/>
</a>
<p class="card-text">{{user.login}}</p>
</div>
<!-- 展示欢迎词 -->
<h1 v-show="info.isFirst">欢迎使用！</h1>
<!-- 展示加载中 -->
<h1 v-show="info.isLoading">加载中...</h1>
<!-- 展示错误信息 -->
<h1 v-show="info.errMsg">{{info.errMsg}}</h1>
</div>
</template>
<script>
export default {
name: "List",
data(){
return {
info:{
isFirst: true,
isLoading: false,
errMsg: '',
users:[]
}
}
},
mounted(){
this.$bus.$on('updateListData', (dataObj)=>{
this.info = {...this.info,...dataObj}
})
}
}
</script>
<style scoped>
.album {
min-height: 50rem;
padding-top: 3rem;
padding-bottom: 3rem;
background-color: white;
}
.card{
float: left;
width: 33.333%;
padding: .75rem;
margin-bottom: 2rem;
border: 1px solid white;
text-align: center;
}
.card > img {
margin-bottom: .75rem;
border-radius: 100px;
}
.card-text {
font-size: 85%;
}
</style>
4. 实现效果
5. 写到最后
上文中提到的github开放接口，仅支持测试调试使用，切勿频繁恶意调用，谨防被拦截后记入黑名单！！！
