Vue基础18之github案例、vue-resource

github案例

静态页面

第三方样式引入（以bootstrap举例）

1. public中创建文件夹css,将样式放入
   

2. 在index.html中使用link引入

<!--   引入第三方样式   --><link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">

App.vue

<template><div class="bg"><Search/><List/></div>
</template><script>
import Search from "@/components/Search";
import List from "@/components/List";
export default {name: "App",components: {Search, List},methods:{}
}
</script><style lang="less"></style>

Search.vue

<template><div class="jumbotron bg"><h1>Search Github Users</h1><p><input type="text" placeholder="输入你想要搜索的用户名"><a class="btn btn-default btn-lg" href="#" role="button">Search</a></p></div>
</template><script>export default {name: "Search"}
</script><style scoped lang="less">
.bg{height: 250px;margin: 0 20px;padding-left: 50px;padding-top: 50px;.title{font-size: 20px;}input{margin-right: 10px;}
}
</style>

List.vue

<template>
<div class="bg"><div class="predict" v-show="isShow">welcome to use</div><div class="pro-list"><div class="pro-item" v-for="item in content"><img src="@/assets/logo.png" alt=""><div class="text">122555</div></div></div>
</div>
</template><script>export default {name: "List",data(){return{isShow:false,content:["","","","","","","","","",""]}}}
</script><style scoped lang="less">
.bg{margin: 0 20px;font-size: 24px;.pro-list{display: flex;flex-wrap: wrap;.pro-item{margin: 50px  120px;.text{text-align: center;}}}}
</style>

列表展示

接口地址

https://api.github.com/search/users?q=xxx

用到的响应值：

1. avatar_url：头像链接
2. html_url：用户详情页
3. login：用户名

使用全局事件总线进行兄弟间组件通信

Search.vue

<template><div class="jumbotron bg"><h1>Search Github Users</h1><p><input type="text" placeholder="输入你想要搜索的用户名" v-model="keywords"><a class="btn btn-default btn-lg" href="#" role="button" @click="searchUsers">Search</a></p></div>
</template><script>
import axios from "axios";export default {name: "Search",data(){return{keywords:"",}},methods:{searchUsers(){if(this.keywords.trim()=="") return alert("用户输入的内容不得为空")axios.get(`https://api.github.com/search/users?q=`+this.keywords).then(response=>{// console.log(response.data.items)console.log("请求成功了~")this.$bus.$emit('getUsersList',response.data.items)},error=>{console.log(error.msg)})}}}
</script><style scoped lang="less">
.bg{height: 250px;margin: 0 20px;padding-left: 50px;padding-top: 50px;.title{font-size: 20px;}input{margin-right: 10px;}
}
</style>

List.vue

<template>
<div class="bg"><div class="predict" v-show="!users.length">welcome to use</div><div class="pro-list"><div class="pro-item" v-for="user in users" :key="user.login"><a :href="user.html_url" class="aitem"><img :src="user.avatar_url" alt=""></a><div class="text">{{ user.login }}</div></div></div>
</div>
</template><script>export default {name: "List",data(){return{isShow:false,users:[],}},mounted() {this.$bus.$on('getUsersList',(users)=>{this.users=users})}}
</script><style scoped lang="less">
.bg{margin: 0 20px;font-size: 24px;.pro-list{display: flex;flex-wrap: wrap;.pro-item{margin: 50px  120px;.aitem{display: inline-block;width: 200px;height: 200px;}img{width: 200px;height: 200px;}.text{text-align: center;}}}}
</style>

完善案例

List.vue

<template>
<div class="bg"><h1 class="predict" v-show="info.isFirst">欢迎使用！</h1><h1 v-show="info.isLoading">加载中...</h1><h1 v-show="info.emsg">错误信息：{{info.emsg}}</h1><div class="pro-list"><div class="pro-item" v-for="user in info.users" :key="user.login"><a :href="user.html_url" class="aitem"><img :src="user.avatar_url" alt=""></a><div class="text">{{ user.login }}</div></div></div>
</div>
</template><script>export default {name: "List",data(){return{isShow:false,users:[],info:{isFirst:true,isLoading:false,emsg:"",users:[]}}},mounted() {this.$bus.$on('updateListData',(dataObj)=>{this.info={...this.info,...dataObj}})}}
</script><style scoped lang="less">
.bg{margin: 0 20px;font-size: 24px;.pro-list{display: flex;flex-wrap: wrap;.pro-item{margin: 50px  120px;.aitem{display: inline-block;width: 200px;height: 200px;}img{width: 200px;height: 200px;}.text{text-align: center;}}}}
</style>

Search.vue

<template><div class="jumbotron bg"><h1>Search Github Users</h1><p><input type="text" placeholder="输入你想要搜索的用户名" v-model="keywords"><a class="btn btn-default btn-lg" href="#" role="button" @click="searchUsers">Search</a></p></div>
</template><script>
import axios from "axios";export default {name: "Search",data(){return{keywords:"",}},methods:{searchUsers(){if(this.keywords.trim()=="") return alert("用户输入的内容不得为空")else{this.$bus.$emit("updateListData",{isFirst:false,isLoading:true,emsg:"",users:[]})axios.get(`https://api.github.com/search/users?q=${this.keywords}`).then(response=>{// console.log(response.data.items)console.log("请求成功了~")this.$bus.$emit('updateListData',{isLoading:false,emsg:"",users:response.data.items})},error=>{console.log(error.msg)this.$bus.$emit("updateListData",{isLoading:false,emsg:error.message,users:[]})})}}}}
</script><style scoped lang="less">
.bg{height: 250px;margin: 0 20px;padding-left: 50px;padding-top: 50px;.title{font-size: 20px;}input{margin-right: 10px;}
}
</style>

补充知识点：{…this.info,…this.dataObj}

{…this.info,…this.dataObj}：通过字面量的形式合并一下对象
以this.dataObj为主，依次替换this.info中的属性的值，但是this.dataObj中没有的数据，还是沿用this.info中的

效果呈现

vue-resource

发送Ajax的5种方式：
1.xhr
2.jQuery
3.axios
4.fetch
5.vue-resource(插件库）对xhr的封装

安装

npm i vue-resource

引用

main.js

import Vue from 'vue'import App from './App'
//引入vue-resource插件
import vueresource from 'vue-resource'Vue.config.productionTip = false
//使用vue-resource插件
Vue.use(vueresource)new Vue({el: "#app",render: h => h(App),beforeCreate() {Vue.prototype.$bus = this}
})

使用

与axios一致，只需要将axios替换成this.$http就行

this.$http.get(`https://api.github.com/search/users?q=${this.keywords}`).then(response=>{// console.log(response.data.items)console.log("请求成功了~")this.$bus.$emit('updateListData',{isLoading:false,emsg:"",users:response.data.items})},error=>{console.log(error.msg)this.$bus.$emit("updateListData",{isLoading:false,emsg:error.message,users:[]})})

Search.vue

<template><div class="jumbotron bg"><h1>Search Github Users</h1><p><input type="text" placeholder="输入你想要搜索的用户名" v-model="keywords"><a class="btn btn-default btn-lg" href="#" role="button" @click="searchUsers">Search</a></p></div>
</template><script>
import axios from "axios";export default {name: "Search",data(){return{keywords:"",}},methods:{searchUsers(){if(this.keywords&&this.keywords.trim()=="") return alert("用户输入的内容不得为空")else{this.$bus.$emit("updateListData",{isFirst:false,isLoading:true,emsg:"",users:[]})this.$http.get(`https://api.github.com/search/users?q=${this.keywords}`).then(response=>{// console.log(response.data.items)console.log("请求成功了~")this.$bus.$emit('updateListData',{isLoading:false,emsg:"",users:response.data.items})},error=>{console.log(error.msg)this.$bus.$emit("updateListData",{isLoading:false,emsg:error.message,users:[]})})}}}}
</script><style scoped lang="less">
.bg{height: 250px;margin: 0 20px;padding-left: 50px;padding-top: 50px;.title{font-size: 20px;}input{margin-right: 10px;}
}
</style>