投稿
  1. 极客之音首页
  2. 技术随笔

《进阶篇第7章》学习vue中的ajax之后，练习vue案例-github用户搜索案例

小半 • • 技术随笔 • 阅读 196

导读：本篇文章讲解 《进阶篇第7章》学习vue中的ajax之后，练习vue案例-github用户搜索案例，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

在这里插入图片描述

文章目录

概述：该案例是学习完第6章：vue中的ajax之后，进行的练习和总结，相关知识点详情内容，请查看我的上一篇同一专栏文章。

7.1github接口地址

https://api.github.com/search/users?q=xxx
这是github维护的一个简单测试接口，其中xxx输入什么内容，github接口就会返回相关的数据。

7.2案例代码

注意点1：

问题：这次如何划分组件？

在这里插入图片描述
答案：这次只划分2个组件，上方的search.vue，下方的List.vue

注意点2：axios的get请求url拼接参数有2种方式

方式1：字符串+拼接

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

方式2：采用ES6语法，地址字符串采用单引号’’，同时使用${}

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

注意点3：优化页面效果，初始化显示展示欢迎词，点击按钮调接口时显示加载中…，如果调用报错显示错误信息提示，因此定义4个属性来控制：isFirst、isLoading、errMsg、users，
初始化时：isFirst:true, isLoading:false, errMsg:‘’, users:[]
请求前更新List的数据：isFirst:false, isLoading:true, errMsg:‘’, users:[]
请求成功后更新List的数据：isLoading:false, errMsg:‘’, users:response.data.items
请求失败后更新List的数据：isLoading:false, errMsg:error.message, users:[]
请求失败后 users必须制空，不然页面还是会显示上次成功请求的数据

注意点4：
全局事件总线传多个参数方式有以下几种
方式1：如下直接传多个参数，缺点1：不优雅不直观，不写注释压根不知道传过去的true、false、’’、[]啥意思；缺点2：接收方必须按照索引顺序才能获取参数。

this.$bus.$emit('updateListData', true, false, '', [])

方式2：传过去的参数封装成json对象方式，
传递方

this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})

接收方，方式1通过this.属性挨个赋值，缺点：我有100个属性赋值100行？不现实

data() {
	return {
		info:{
			isFirst:true,
			isLoading:false,
			errMsg:'',
			users:[]
		}
	}
},
mounted() {
	this.$bus.$on('updateListData',(dataObj)=>{
             this.info.isFirst = dataObj.isFirst;
             this.info.isLoading = dataObj.isLoading;
             this.info.errMsg = dataObj.errMsg;
             this.info.users = dataObj.users;
	})
},

接收方，方式2通过整个对象赋值，缺点：会丢属性值，data函数有4个属性，而我传递的dataObj只有3个属性，那么最后控制台会整个替换从而丢一个属性

data() {
	return {
		info:{
			isFirst:true,
			isLoading:false,
			errMsg:'',
			users:[]
		}
	}
},
mounted() {
	this.$bus.$on('updateListData',(dataObj)=>{
              this.info= dataObj;          
	})
},

接收方，方式3通过ES6语法实现局部更新，语法：{…原数据,…接收数据}，dataObj没有的属性用data() 原有的，dataObj包含的属性采用dataObj传递过来的值，另一个好处传递方不按属性顺序传值也能接收。
传递方，比如data()中isFirst为第一个属性，而我传递时放在了{}的最后也有效

this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})

接收方

data() {
	return {
		info:{
			isFirst:true,
			isLoading:false,
			errMsg:'',
			users:[]
		}
	}
},
mounted() {
	this.$bus.$on('updateListData',(dataObj)=>{
             this.info = {...this.info,...dataObj}       
	})
},

注意点5：

问题：注意点3中接收方，方式2通过整个对象赋值方式，我可以把dataObj直接复制给this._data中吗？

答案：不能，如果赋值给this._data就破坏数据结构了，因为直接赋值方式不会让vue动态代理给_data中设置get和set方法。

完整代码

项目结构

在这里插入图片描述

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
	},
})

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>

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>
	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请求url拼接参数方式1：字符串+拼接
				axios.get(`https://api.github.com/search/users?q=` + this.keyWord).then(
				//axios的get请求url拼接参数方式2：采用ES6语法，地址字符串采用单引号’’，同时使用${}
        // 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)=>{
        //接收方，方式1通过this.属性挨个赋值,缺点：我有100个属性赋值100行？
        // this.info.isFirst = dataObj.isFirst;
        // this.info.isLoading = dataObj.isLoading;
        // this.info.errMsg = dataObj.errMsg;
        // this.info.users = dataObj.users;

        //接收方，方式2通过整个对象赋值,缺点：会丢属性值
        // this.info = dataObj;

        //接收方，方式3采用ES6语法，局部更新
				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>

结果展示：

在这里插入图片描述

7.3把github用户搜索案例使用axios方式改为使用vue-resource方式

改变地方

main.js

//引入插件
import vueResource from 'vue-resource'
//使用插件
Vue.use(vueResource)

Search.vue

旧代码:
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()

完整代码

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//引入插件
import vueResource from 'vue-resource'
//使用插件
Vue.use(vueResource)

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

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>

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>
	//import axios from 'axios'
	export default {
		name:'Search',
		data() {
			return {
				keyWord:''
			}
		},
		methods: {
			searchUsers(){
				//请求前更新List的数据
				this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})
        this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
        //axios的get请求url拼接参数方式1：字符串+拼接
				//axios.get(`https://api.github.com/search/users?q=` + this.keyWord).then(
				//axios的get请求url拼接参数方式2：采用ES6语法，地址字符串采用单引号’’，同时使用${}
        // 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)=>{
        //接收方，方式1通过this.属性挨个赋值,缺点：我有100个属性赋值100行？
        // this.info.isFirst = dataObj.isFirst;
        // this.info.isLoading = dataObj.isLoading;
        // this.info.errMsg = dataObj.errMsg;
        // this.info.users = dataObj.users;

        //接收方，方式2通过整个对象赋值,缺点：会丢属性值
        // this.info = dataObj;

        //接收方，方式3采用ES6语法，局部更新
				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>

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/106163.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！