不管何时何地，永远保持热爱，永远积极向上！！！
【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搜索案例实现
- 页面效果如下：
完整代码：
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" /> <!-- 绑定一个点击事件 --> <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文件<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>
