前端vue入门(纯代码)18-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端vue入门(纯代码)18。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

不管何时何地，永远保持热爱，永远积极向上！！！

【20.尚硅谷GitHub搜索案例_vue-resource实现】

1.vue-resource

vue-resource 是 vue 中一个用于发送请求的插件。

vue 发送请求推荐使用 axios ，vue-resource 的更新频率不高，且 vue 也推荐 axios。

1.1 安装插件vue-resource

npm i vue-resource

vue插件使用忘了的，点击此处。

1.2 在main.js中导入插件vue-resource

vue-resource 中使用的是默认导出，导入 vue-resource 使用变量vueResource 接收即可。

import vueResource from 'vue-resource'

1.3 在main.js中使用插件vue-resource

//使用插件
Vue.use(vueResource)

没有使用 vue-resource插件，【 vue 实例对象和组件实例对象含有的部分属性如下】。

使用 Vue 的 use() 方法使用插件，在所有的 vue 实例对象和组件实例对象中会多一个 $http 属性。

在所有的 vue 实例对象和组件实例对象中 $http 属性展开。

1.4 使用vue-resource发送请求

vue-resource 与 axios 一样都是 promise 风格的，vue-resource 发送请求的方法与形式和 axios 一样。

以发送 get 请求为例：

用axios发送请求：

// 发起请求获取用户数据
axios.get(`请求地址`).then(
        //请求成功后，应该干什么？
        (response)=>{
          console.log(this);// this指vc
          console.log('请求成功');
          // 请求成功的处理代码写在这里，xxx
        },
        //请求失败后，应该干什么？
        (error)=>{
          console.log('请求失败', error.message)
          // 请求失败的处理 
        },
      );

用vue-resource发送请求：

	  // 发起请求获取用户数据
      this.$http.get(`请求地址`).then(
        response => {
          console.log('请求成功')
          // 请求成功的处理
        },
        error => {
          console.log('请求失败', error)
          // 请求失败的处理          
        }
      )

2.基于插件vue-resource的GitHub搜索案例实现

页面效果如下：

前端vue入门(纯代码)18

完整代码：

index.html

<!DOCTYPE html>
<html lang="zh-en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 引入第三方样式库 -->
    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js文件

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

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
  // 生命周期钩子beforeCreate中模板未解析，且this是vm
  beforeCreate() {
    // this:指的是vm
		Vue.prototype.$bus = this  //安装全局事件总线$bus
	}
})

App.vue文件

<template>
	<div class="container">
		<Search/>
		<List/>
	</div>
</template>

<script>
import List from './components/List';
import Search from './components/Search';
export default {
	components: { List, Search},
	name: 'App',
};
</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>
export default {
	name: 'Search',
  data() {
    return {
      keyWord:'',
    }
  },
	methods: {
		searchUsers() {
      console.log(this);
      //请求前更新List的数据【类似于初始化】
      this.$bus.$emit('updateListData',{isLoading:true,errorMsg:'',users:[],isFirst:false})
      // 获取该url：github搜索的数据
			this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
        //请求成功后触发自定义事件，并传递数据
        (response)=>{
          console.log(this);// this指vc
          console.log(response.data);
          this.$bus.$emit('updateListData',{isLoading:false,errorMsg:'',users:response.data.items})
        },
        //请求失败后
        (error)=>{
          console.log('我请求数据失败后，传递失败的信息，并将users数据初始化');
          // 请求失败后 users必须制空，不然页面还是会显示上次成功请求的数据
          this.$bus.$emit('updateListData',{isLoading:false,errorMsg:error.message,users:[]})
        },
      );
		},
	},
};
</script>

List.vue文件文章来源地址https://www.toymoban.com/news/detail-513030.html

<template>
	<div class="row">
		<!-- 展示用户列表 -->
		<div
			class="card"
			v-show="info.users.length"
			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>
		<!-- 展示欢迎词 -->
		<h2 v-show="info.isFirst">欢迎使用免费的GitHub接口！</h2>
		<!-- 展示加载中 -->
		<h2 v-show="info.isLoading">页面加载中....</h2>
    <!-- 展示错误信息 -->
		<h2 v-show="info.errorMsg">{{ info.errorMsg }}</h2>
	</div>
</template>

<script>
export default {
	name: 'List',
	data() {
		return {
			info: {
				isFirst: true,
				isLoading: false,
				errorMsg: '',
				users: [],
			},
		};
	},
	// 全局数据总线：
	// 接收数据的一方：在mounted钩子中定义自定义事件
	mounted() {
		// 绑定事件updateListData,并在回调函数中接收来自Search组件的数据【对象的形式：dataObj】
		this.$bus.$on('updateListData', (dataObj) => {
      // 对象合并：相同的属性以后面的对象为主
			this.info = {...this.info,...dataObj}
		});
	},
};
</script>

<style scoped>
h2 {
	margin-left: 50px;
}
.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: 0.75rem;
	margin-bottom: 2rem;
	border: 1px solid #efefef;
	text-align: center;
}

.card > img {
	margin-bottom: 0.75rem;
	border-radius: 100px;
}

.card-text {
	font-size: 85%;
}
</style>