前端学习笔记-Vue篇-04

4 Vue中的ajax

4.1 解决开发环境Ajax跨域问题

vue脚手架配置代理

配置参考 | Vue CLI
方法一：在vue.config.js中添加如下配置:

module.exports = {devServer: {proxy: 'http://localhost:4000'}
}

说明:
1.优点:配置简单，请求资源时直接发给前端(8080)即可。
2.缺点:不能配置多个代理，不能灵活的控制请求是否走代理。
3.工作方式:若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器(优先匹配前端资源)

方法二编写vue.config.js配置具体代理规则:

module.exports = {devServer:{prqxy:'/api1':{// 匹配所有以'/api1'开头的请求路径target:'http://localhost:5000'，//代理目标的基础路径changeOrigin:true,pathRewrite:{'^/api1':・'}},'/api2':{// 匹配所有以'/api2'开头的请求路径target:'http://localhost:5001',//代理目标的基础路径changeOrigin:true,pathRewrite:{'^/api2':''}}}}
}
/*  change0rigin设置为true时，服务器收到的请求头中的host为:1ocalhost:5000-撒谎change0rigin设置为false时，服务器收到的请求头中的host为:1ocalhost:8080-诚实change0rigin默认值为true
*/

4.2 github用户搜索案例-axios

新建项目文件夹

components文件：

MySearch.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>import axios from 'axios'export default {name:'MySearch',data(){return{keyword:''}},methods:{searchUsers(){/* 请求前更新List的数据 */this.$bus.$emit('updateListObj',{isFirst:false,isloading:true,errMsg:'',users:[]})axios.get(`https://api.github.com/search/users?q=${this.keyword}`).then(response=>{/* 请求成功了后更新List数据 */this.$bus.$emit('updateListObj',{isloading:false,errMsg:'',users:response.data.items})},error=>{/* 请求失败了后更新List数据 */this.$bus.$emit('updateListObj',{isloading:false,errMsg:error.message,users:[]})})}}
}
</script>

MyList.vue:

<template><div class="row"><!-- 展示用户列表 --><div v-show="info.sers.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">Loading......</h1><!-- 展示错误信息 --><h1 v-show="info.errMsg">{{info.errMsg}}</h1></div>
</template><script>export default {name:'MyList',data(){return{info:{isFirst:true,isloading:false,errMsg:'',users:[]}}},mounted(){this.$bus.$on('updateListData',(dataObj)=>{console.log(dataObj)//this.users = usersthis.info = {...this.info,...dataObj}})},
}
</script><style scoped>.album{min-height: 50rem;padding-top: 3rem;padding-bottom: 3rem;background: #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>

App.vue

<template><div class="container"><MySearch/><MyList/></div></template><script>
import MySearch from './components/MySearch'
import MyList from'./components/MyList'export default {name:'App',components:{MySearch,MyList}
}
</script><style></style>

main.js

/* 该文件是整个项目的入口文件 */
//引入vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false
//创建vue实例对象-vm
new Vue({render: h => h(App),beforeCreate(){Vue.prototype.$bus = this}
}).$mount('#app')

引入第三方文件：

/*!* Bootstrap v3.3.5 (http://getbootstrap.com)* Copyright 2011-2015 Twitter, Inc.* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

案例效果：

4.3 vue-resource-已不再维护

下载：

npm i vue-resource

main.js引用：

//引入插件
import vueResource from 'vue-resource'

MySearch.vue更改：

<template>
......
</template><script>export default {......methods:{searchUsers(){/* 请求前更新List的数据 */this.$bus.$emit('updateListObj',{isFirst:false,isloading:true,errMsg:'',users:[]})//更改此处前缀即可this.$http.get(`https://api.github.com/search/users?q=${this.keyword}`).then(。。。。。。)}}
}
</script>

4.4 插槽

1.作用:让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===>子组件
2.分类:默认插槽、具名插槽、作用域插槽

案例演示

4.4.1 默认插槽

模板：

父组件中:<Category><div>html结构1</div></Category>
子组件中:
<template><div><!--定义插槽 --><slot>插槽默认内容...</slot></div>
</template>

MyCategory.vue

<template><div class="category"> <h3>{{title}}分类</h3><ul><slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot></ul></div>
</template><script>export default {name:'MyCategory',props:['title']}
</script><style scoped>.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}
</style>

App.vue

<template><div class="container"><MyCategory title="美食"><img src="https://www.bing.com/images/search?view=detailV2&ccid=Eyva9J6H&id=58A35885A9ABF4B4008D3D18096A4122F9029A3B&thid=OIP.Eyva9J6Hqfa0-gY_T5UH2QHaE8&mediaurl=https%3A%2F%2Fth.bing.com%2Fth%2Fid%2FR.132bdaf49e87a9f6b4fa063f4f9507d9%3Frik%3DO5oC%252bSJBagkYPQ%26riu%3Dhttp%253a%252f%252fseopic.699pic.com%252fphoto%252f50042%252f9686.jpg_wh1200.jpg%26ehk%3DCVgCwwuyvk3yAH1jdMUEzZ5EZTtv2EJohlzI%252fGFGqHg%253d%26risl%3D%26pid%3DImgRaw%26r%3D0&exph=800&expw=1200&q=%E8%8D%89%E8%8E%93%E8%9B%8B%E7%B3%95&simid=608008331698973000&FORM=IRPRST&ck=B54535D1D089E109A832BFC96E23CCD8&selectedIndex=4&itb=0&cw=1375&ch=664&ajaxhist=0&ajaxserp=0" alt=""></MyCategory><MyCategory title="游戏"><ul><li v-for="(g,index) in games" :key="index">{{g}}</li></ul></MyCategory><MyCategory title="电影"><video controls src="https://www.bilibili.com/video/BV1TezjYAEDV/?spm_id_from=333.1387.homepage.video_card.click&vd_source=56a27fe8aee59c56c0c0bfabcae02918"></video></MyCategory></div></template><script>
import MyCategory from './components/MyCategory'export default {name:'App',components:{MyCategory},data(){return{foods:['火锅','烧烤','小龙虾','牛排'],games:['红色禁戒','穿越火线','劲舞团','超级玛丽'],films:['教父','拆弹专家','你好李焕英','流浪地球']}}
}
</script><style scoped>.container{display: flex;justify-content: space-around;}
</style>

4.4.2 具名插槽

模板：

父组件中:
<Category><template slot="center"><div>html结构1</div></template><template v-slot:footer><div>html结构2</div></template>
</Category>
子组件中:
<template><div><!-- 定义插槽--><slot name="center">插槽默认内容...</slot><slot name="footer">插槽默认内容...</slot></div>
</template>

4.4.3 作用域插槽

1.理解:数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定)

模板：

父组件中:<Category><template scope="scopeData"><!--生成的是u1列表 --><u1><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul></template></Category><Category><template slot-scope="scopeData"><!--生成的是h4标题 --><h4 v-for="g in scopeData.games" :key="g">{{g}}</h4></template></Category>
子组件中:<template><div><slot :games="games"></slot></div></template><script>export default{name:'Category,props:['title'],//数据在子组件自身data(){return{games:['红色警戒'，穿越火线'，劲舞团'，超级玛丽’]}}}</script>