Github案例
利用github的接口 https://api.github.com/search/users?q=xxxxxx来实现获取github的用户信息，同时展示用户信息。
静态页面
静态页面分为Search和List两个部分，先将静态页面构建出来。
- MySearch.vue
<template>
<div>
<section class="jumbotron">
<h3 class="jumbotron-heading">Search Github Users</h3>
<div>
<input type="text" placeholder="enter the name you search"/>
<button>Search</button>
</div>
</section>
</div>
</template>
f
<script>
import axios from 'axios'
export default {
name:"MySearch"
}
</script>
<style>
</style>
- MyList.vue
<template>
<div class="row">
<div v-show="info.users.length" class="card">
<a :href="xxxxxx" target="_blank">
<img :src="xxxxxx" style=' 100px'/>
</a>
<p class="card-text">xxxxxx</p>
</div>
</div>
</template>
<script>
export default {
name:"MyList"
}
</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;
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>
- App.vue
<template>
<div class="container">
<MySearch/>
<MyList/>
</div>
</template>
<script>
import MyList from "./components/MyList.vue";
import MySearch from "./components/MySearch.vue";
export default {
name: 'App',
components: { MySearch,MyList },
}
</script>
<style>
</style>
- tip: 这里的静态页面样式使用到了bootstrap.css，本地映入的时候不要放在src/assets中，因为放在src目录中VUE脚手架回去检查所有的依赖，就没没有用到相关依赖也会报错，因此需要放在public目录下，然后在index.html使用
全局事件总线
-
全局事件总线注册
main.js
import Vue from 'vue' import App from '../20.github案例/App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), beforeCreate(){ Vue.prototype.$bus = this } }).$mount('#app') -
绑定事件
MyList.vue
mounted() { this.$bus.$on('updateListData', (dataObj)=>{ this.info = {...this.info,...dataObj} }) }这里的{...this.info,...dataObj}表示将info和dataObj对象融合，如果其中有相同的对象，那么以后一个对象dataObj为主
-
搜索事件，给MySearch的搜索案件绑定事件，利用axios来实现数据的获取(这里的github接口以及做了跨域处理了，所以能够正常访问到)
MySearch.vue
methods:{ searchUsers() { this.$bus.$emit('updateListData', {isFirst:false, errMag:'', isLoading:true, users:[]}) axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then( response => { console.log('请求成功了') this.$bus.$emit('updateListData', {isFirst:false, errMsg:'', isLoading:false, users:response.data.items}) }, error => { console.log(error) this.$bus.$emit('updateListData', {isFirst:false, errMsg:error, isLoading:false, users:[]}) } ) } }
整体代码
-
MyList.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=' 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:"MyList", 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; 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> -
MySearch.vue
<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="keyWord"/> <button @click="searchUsers">Search</button> </div> </section> </div> </template> f <script> import axios from 'axios' export default { name:"MySearch", data() { return { keyWord:'' } }, methods:{ searchUsers() { this.$bus.$emit('updateListData', {isFirst:false, errMag:'', isLoading:true, users:[]}) axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then( response => { console.log('请求成功了') this.$bus.$emit('updateListData', {errMsg:'', isLoading:false, users:response.data.items}) }, error => { console.log(error) this.$bus.$emit('updateListData', {errMsg:error, isLoading:false, users:[]}) } ) } } } </script> <style> </style> -
App.vue
<template> <div class="container"> <MySearch/> <MyList/> </div> </template> <script> import MyList from "./components/MyList.vue"; import MySearch from "./components/MySearch.vue"; export default { name: 'App', components: { MySearch,MyList }, } </script> <style> </style> -
结果展示
常用的Ajax库
Vue中常见的两个Ajax库
- axios：通用的Ajax请求，官方推荐，效率很高
vue-resources：vue的插件库，vue1.x使用比较多，但是已经停止使用(不建议使用)
axios在刚才的github案例中已经介绍过了，现在介绍一下vue-resource的使用
-
下载vue-resource库npm install vue-source
-
全局引入vue-resource组件
main.js
import Vue from 'vue' import App from './App.vue' import vueResource from 'vue-resource' Vue.config.productionTip = false Vue.use(vueResource) new Vue({ render: h => h(App), beforeCreate(){ Vue.prototype.$bus = this } }).$mount('#app') -
MySearch.vue
请求的地方从axios.get改成this.$http.get
// axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
response => {
console.log('请求成功了')
this.$bus.$emit('updateListData', {errMsg:'', isLoading:false, users:response.data.items})
},
error => {
console.log(error)
this.$bus.$emit('updateListData', {errMsg:error, isLoading:false, users:[]})
}
)