《进阶篇第7章》学习vue中的ajax之后，练习vue案例

admin管理员组
文章数量:1794759

《进阶篇第7章》学习vue中的ajax之后，练习vue案例

@toc

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

7.1github接口地址

这是github维护的一个简单测试接口，其中xxx输入什么内容，github接口就会返回相关的数据。

7.2案例代码

注意点1：

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

答案：这次只划分2个组件，上方的search.vue，下方的List.vue

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

方式1：字符串+拼接

代码语言：java复制

axios.get(`=` + this.keyWord).then()

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

代码语言：java复制

axios.get(`=${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：接收方必须按照索引顺序才能获取参数。

代码语言：java复制

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

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

传递方

代码语言：java复制

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

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

代码语言：java复制

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个属性，那么最后控制台会整个替换从而丢一个属性

代码语言：java复制

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为第一个属性，而我传递时放在了{}的最后也有效

代码语言：java复制

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

接收方

代码语言：java复制

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

代码语言：java复制

//引入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

代码语言：java复制

<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

代码语言：java复制

<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(`=` + this.keyWord).then(
				//axios的get请求url拼接参数方式2：采用ES6语法，地址字符串采用单引号’’，同时使用${}
        // axios.get(`=${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

代码语言：java复制

<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

代码语言：java复制

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

Search.vue

代码语言：java复制

旧代码:
axios.get(`=` + this.keyWord).then()
新代码：
this.$http.get(`=${this.keyWord}`).then()

完整代码

main.js

代码语言：java复制

//引入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

代码语言：java复制

<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

代码语言：java复制

<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(`=${this.keyWord}`).then(
        //axios的get请求url拼接参数方式1：字符串+拼接
				//axios.get(`=` + this.keyWord).then(
				//axios的get请求url拼接参数方式2：采用ES6语法，地址字符串采用单引号’’，同时使用${}
        // axios.get(`=${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

代码语言：java复制

<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章》学习vue中的ajax之后，练习vue案例

版权声明：本文标题：《进阶篇第7章》学习vue中的ajax之后，练习vue案例内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1754656201a1704849.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

写会百科网

《进阶篇第7章》学习vue中的ajax之后，练习vue案例

《进阶篇第7章》学习vue中的ajax之后，练习vue案例

7.1github接口地址

7.2案例代码

完整代码

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

改变地方

完整代码

更多相关文章

《进阶篇第7章》学习vue中的ajax之后，练习vue案例

发表评论

推荐文章

C语言重要算法之一——冒泡排序详解（干货满满，欢迎各位朋友的观看）

StarRocks 开发环境搭建踩坑指北

【C语言篇】从零带你全面了解数组（超详细）

FeignClient接口格式

python知识点100篇系列（14）

热门文章

Java中的Synchronized，你了解多少？

学生信息管理系统(静态版)

【初阶数据结构】详解顺序表（下）（顺序表的代码实现）

栈和队列的习题详解（4）：设计循环队列

【Linux】进程详解：命令行参数、环境变量及地址空间

【Python篇】从零到精通：全面分析Scikit

操作符及实操

Python 3.13：性能和规模的新突破

C#的async 和 await 关键字

CADD筛选PROTAC新思路：利用非马尔科夫动力学模型发现亚稳态蛋白

最新文章

Linux系统之jobs命令的基本使用

手把手教学！简单上手“AI复活”技术

单细胞Seruat和h5ad数据格式互换(R与python)方法学习和整理

JVM专题

学会5个图表，让数据分析简洁高效

写“藤”的作文1200字

有关于进步的作文

幼儿园见习报告

语数英寒假作业上册答案五年级

伊索寓言经典语词句摘抄

写会百科网

《进阶篇第7章》学习vue中的ajax之后，练习vue案例

《进阶篇第7章》学习vue中的ajax之后，练习vue案例

7.1github接口地址

7.2案例代码

完整代码

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

改变地方

完整代码

更多相关文章

《进阶篇第7章》学习vue中的ajax之后，练习vue案例

发表评论

推荐文章

C语言重要算法之一——冒泡排序详解（干货满满，欢迎各位朋友的观看）

StarRocks 开发环境搭建踩坑指北

【C语言篇】从零带你全面了解数组（超详细）

FeignClient接口格式

python知识点100篇系列（14）

热门文章

Java中的Synchronized，你了解多少？

学生信息管理系统(静态版)

【初阶数据结构】详解顺序表（下）（顺序表的代码实现）

栈和队列的习题详解 （4）：设计循环队列

【Linux】进程详解：命令行参数、环境变量及地址空间

【Python篇】从零到精通：全面分析Scikit

操作符及实操

Python 3.13：性能和规模的新突破

C#的async 和 await 关键字

CADD筛选PROTAC新思路：利用非马尔科夫动力学模型发现亚稳态蛋白

最新文章

Linux系统之jobs命令的基本使用

手把手教学！简单上手“AI复活”技术

单细胞Seruat和h5ad数据格式互换(R与python)方法学习和整理

JVM专题

学会5个图表，让数据分析简洁高效

写“藤”的作文1200字

有关于进步的作文

幼儿园见习报告

语数英寒假作业上册答案五年级

伊索寓言经典语词句摘抄

栈和队列的习题详解（4）：设计循环队列