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

news/2024/7/10 2:02:55 标签: vue.js, ajax, github用户搜索案例, vue

在这里插入图片描述

文章目录

  • 7.1github接口地址
  • 7.2案例代码
    • 完整代码
  • 7.3把github用户搜索案例使用axios方式改为使用vue-resource方式
    • 改变地方
    • 完整代码

概述：该案例是学习完第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>

结果展示：

在这里插入图片描述

vueresource_295">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>

http://www.niftyadmin.cn/n/898127.html

相关文章

《进阶篇第8章：vuex》包括理解vuex、安装vuex、搭建vuex环境、四个map方法的使用、模块化+名命空间

《进阶篇第8章：vuex》包括理解vuex、安装vuex、搭建vuex环境、四个map方法的使用、模块化+名命空间

文章目录8.1理解 vuex8.1.1vuex 是什么8.1.2什么时候使用 Vuex8.1.3全局事件总线和vuex的区别8.1.5vuex的工作原理图举例&#xff1a;讲解原理图&#xff0c;以求和案例的下拉框选择2&#xff0c;点击后的变化流程讲解8.2安装vuex8.3搭建vuex环境完整代码8.4四个map方法的使用8…
阅读更多...
《进阶篇第9章》学习vuex知识点后练习：求和案例_纯vue版代码

《进阶篇第9章》学习vuex知识点后练习：求和案例_纯vue版代码

文章目录9.1求和案例_纯vue版代码完整代码本人其他相关文章链接效果展示&#xff1a; 注意点1&#xff1a; 问题&#xff1a;如何实现“当前和为奇数再加”&#xff1f; 答案&#xff1a; incrementOdd(){if(this.sum % 2){this.sum this.n} }注意点2: 问题&#xff1a;selec…
阅读更多...
《进阶篇第9章》学习vuex知识点后练习：把求和案例改成vuex版代码

《进阶篇第9章》学习vuex知识点后练习：把求和案例改成vuex版代码

文章目录9.2求和案例_vuex版代码改动地方&#xff1a;完整代码本人其他相关文章链接效果展示&#xff1a; 注意点1&#xff1a; 问题&#xff1a;如何实现“当前和为奇数再加”&#xff1f; 答案&#xff1a; incrementOdd(){if(this.sum % 2){this.sum this.n} }注意点2: 问…
阅读更多...
《进阶篇第9章》学习vuex知识点后练习：把求和案例改成getters

《进阶篇第9章》学习vuex知识点后练习：把求和案例改成getters

文章目录9.3求和案例_getters改动地方&#xff1a;完整代码本人其他相关文章链接效果展示&#xff1a; 注意点1&#xff1a; 问题&#xff1a;如何实现“当前和为奇数再加”&#xff1f; 答案&#xff1a; incrementOdd(){if(this.sum % 2){this.sum this.n} }注意点2: 问题&…
阅读更多...
《进阶篇第9章》学习vuex知识点后练习：把求和案例改成mapState与mapGetters

《进阶篇第9章》学习vuex知识点后练习：把求和案例改成mapState与mapGetters

文章目录9.4求和案例_mapState与mapGetters改动地方&#xff1a;完整代码本人其他相关文章链接效果展示&#xff1a; 注意点1&#xff1a; 问题&#xff1a;如何实现“当前和为奇数再加”&#xff1f; 答案&#xff1a; incrementOdd(){if(this.sum % 2){this.sum this.n} }注…
阅读更多...
《进阶篇第9章》学习vuex知识点后练习：把求和案例改成mapMutations与mapActions

《进阶篇第9章》学习vuex知识点后练习：把求和案例改成mapMutations与mapActions

文章目录9.5求和案例_mapMutations与mapActions改动地方&#xff1a;完整代码本人其他相关文章链接效果展示&#xff1a; 注意点1&#xff1a; 问题&#xff1a;如何实现“当前和为奇数再加”&#xff1f; 答案&#xff1a; incrementOdd(){if(this.sum % 2){this.sum this.n…
阅读更多...
《进阶篇第9章》学习vuex知识点后练习：把求和案例改成多组件共享数据

《进阶篇第9章》学习vuex知识点后练习：把求和案例改成多组件共享数据

文章目录9.6求和案例_多组件共享数据完整代码本人其他相关文章链接效果展示&#xff1a; 注意点1&#xff1a; 问题&#xff1a;如何实现“当前和为奇数再加”&#xff1f; 答案&#xff1a; incrementOdd(){if(this.sum % 2){this.sum this.n} }注意点2: 问题&#xff1a;se…
阅读更多...
《进阶篇第9章》学习vuex知识点后练习：把求和案例改成vuex模块化编码

《进阶篇第9章》学习vuex知识点后练习：把求和案例改成vuex模块化编码

文章目录9.7求和案例_vuex模块化编码完整代码本人其他相关文章链接效果展示&#xff1a; 注意点1&#xff1a; 问题&#xff1a;如何实现“当前和为奇数再加”&#xff1f; 答案&#xff1a; incrementOdd(){if(this.sum % 2){this.sum this.n} }注意点2: 问题&#xff1a;se…
阅读更多...
最新文章

Copyright @ 2022~2023