github搜索案例-编程知识

github搜索案例

目录结构

public/index.html

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 开启移动端的理想视口 --><meta name="viewport" content="width=device-width,initial-scale=1.0"><!-- 配置页签图标 --><link rel="icon" href="<%= BASE_URL %>favicon.ico"><!-- 引入第三方样式 --><link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css"><!-- 配置网页标题 --><title><%= htmlWebpackPlugin.options.title %></title></head><body><!-- 当浏览器不支持js时noscript中的元素就会被渲染 --><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><!-- 容器 --><div id="app"></div><!-- built files will be auto injected --></body>
</html>

src/App.vue

<template><div class="container"><Search /><List /></div>
</template><script>
import Search from './components/Search'
import List from './components/List'
export default {name: 'App',components: { Search, List }
}
</script>

src/main.js

import Vue from 'vue'
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)
//创建vm
new Vue({el: '#app',render: h => h(App),beforeCreate(){Vue.prototype.$bus=this //安装全局事件总线}
})

src/components/List.vue

<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;/* 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;
}.card>img {margin-bottom: .75rem;border-radius: 100px;
}.card-text {font-size: 85%;
}
</style>

src/components/Search.vue

<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><script>
export default {name: 'Search',data() {return {keyWord: ''}},methods: {searchUsers() {// 请求前更新List的数据this.$bus.$emit('updateListData', { isFirst: false, isLoading: false, errMsg: '', users: [] })this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response => {console.log('请求成功了');// 请求成功后更新List的数据this.$bus.$emit('updateListData', { isLoading: false, errMsg: '', users: response.data.items })},error => {console.log('请求失败了');// 请求失败后更新List的数据this.$bus.$emit('updateListData', { isLoading: false, errMsg: error.message, users: [] })})}}
}
</script>