Vue入门020(021)- github搜索案例(axios、vue-resource)

这个案例主要演示如何网络请求，并且给组件使用数据

先安装 axios

npm i axios           

main.js 入口文件

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})           

主要代码

Vue.prototype.$bus = this

创建全局事件总线

引用第三方样式

把样式放到pubilc的css目录下

通过link方式引用css

封装2个组件 Search.vue 、 List.vue

Search.vue 主要是实现搜索的功能

List.vue 是列表展示的功能

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"/> 
			<button @click="searchUsers">Search</button>
		</div>
	</section>
</template>

<script>
	import axios from 'axios'
	export default {
		name:'Search',
		data() {
			return {
				keyWord:''
			}
		},
		methods: {
			searchUsers(){
				//请求前更新List的数据
				this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})
				axios.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 => {
						//请求后更新List的数据
						this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
					}
				)
			}
		},
	}
</script>           

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} //es6 语法
			})
		},
	}
</script>

<style scoped>
	...
</style>           

es6 解构赋值

vue-resource

vue-resource 和 axios 使用上差不多

1.先安装 npm i vue-resource

2.vue-resource其实是一个插件，需要 Vue.user(vueResource)

使用插件

3.请求使用 this.$http 发起请求

使用this.$http 发起请求

代码摘录于尚硅谷Vue学习课件