4 Vue中的Ajax
4 Vue中的Ajax
4.1 配置代理服务器
1.原生 xhr newXMLHttpRequest() xhr.open() xhr.send()
2.jQuery $.get $.post 80%dom操作 不适合
3.axios(用的更多)
4.fetch
- 在
vue.config.js
中添加如下配置:
devServer:{proxy:"http://localhost:5000" //代理目标的基础路径
}
说明:
优点:配置简单,请求资源时直接发给前端(8080)即可。
缺点:不能配置多个代理,不能灵活的控制请求是否走代理(请求资源和public中的文件同名是时,请求的是自身的静态资源)。
工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源)
**
public
**文件夹里的就是代理服务器8080有的编写vue.config.js配置具体代理规则:
module.exports = {devServer: {proxy: {'/api1': {// 匹配所有以 '/api1'开头的请求路径 target: 'http://localhost:5000',// 代理目标的基础路径 changeOrigin: true,//用于控制请求头中的host值 localhost5000 如果是false,实话实说 localhost8080 pathRewrite: {'^/api1': ''} //匹配以api1开头的,防止把路径api/带到服务器,服务器找不到},'/api2': {// 匹配所有以 '/api2'开头的请求路径 target: 'http://localhost:5001',// 代理目标的基础路径 changeOrigin: true, pathRewrite: {'^/api2': ''}}}}}
changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
changeOrigin默认值为true
说明:
优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
缺点:配置略微繁琐,请求资源时必须加前缀。
4.2 github搜索案例
- 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>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(`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)=>{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>
4.3 插槽
作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件 。
4.3.1 默认插槽
- App.vue
<template><div class="container"><Category title="美食" ><img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""></Category><Category title="游戏" ><ul><li v-for="(g,index) in games" :key="index">{{g}}</li></ul></Category><Category title="电影"><video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video></Category></div>
</template><script>import Category from './components/Category'export default {name:'App',components:{Category},data() {return {foods:['火锅','烧烤','小龙虾','牛排'],games:['红色警戒','穿越火线','劲舞团','超级玛丽'],films:['《教父》','《拆弹专家》','《你好,李焕英》','《尚硅谷》']}},}
</script><style scoped>.container{display: flex;justify-content: space-around;}
</style>
image ul video 就是父组件向子组件插入的HTML结构,在父组件先解析,再塞入子组件,样式两边都能写,区别就是先解析好样式一起塞入还是先塞入再解析样式
- Category.vue
<template><div class="category"><h3>{{title}}分类</h3><!-- 定义一个插槽(挖个坑,等着组件的使用者进行填充) --><slot>我是一些默认值,当使用者没有传递具体结构时,我会出现</slot></div>
</template><script>export default {name:'Category',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>
4.3.2 具名插槽
子组件
<template><div class="category"><h3>{{title}}分类</h3><!-- 定义一个插槽(挖个坑,等着组件的使用者进行填充) --><slot name="center">我是一些默认值,当使用者没有传递具体结构时,我会出现1</slot><slot name="footer">我是一些默认值,当使用者没有传递具体结构时,我会出现2</slot></div>
</template>
父组件
<template><div class="container"><Category title="美食" ><img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""><a slot="footer" href="http://www.atguigu.com">更多美食</a></Category><Category title="游戏" ><ul slot="center"><li v-for="(g,index) in games" :key="index">{{g}}</li></ul><div class="foot" slot="footer"><a href="http://www.atguigu.com">单机游戏</a><a href="http://www.atguigu.com">网络游戏</a></div></Category><Category title="电影"><video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video><!--使用template的方式 v-slot:footer--><template v-slot:footer><div class="foot"><a href="http://www.atguigu.com">经典</a><a href="http://www.atguigu.com">热门</a><a href="http://www.atguigu.com">推荐</a></div><h4>欢迎前来观影</h4></template></Category></div>
</template><script>import Category from './components/Category'export default {name:'App',components:{Category},data() {return {foods:['火锅','烧烤','小龙虾','牛排'],games:['红色警戒','穿越火线','劲舞团','超级玛丽'],films:['《教父》','《拆弹专家》','《你好,李焕英》','《尚硅谷》']}},}
</script><style scoped>.container,.foot{display: flex;justify-content: space-around;}h4{text-align: center;}
</style>
4.3.3 作用域插槽
理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)
- 父组件中
<Category><template scope="scopeData"><!-- 生成的是ul列表 --><ul><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul></template></Category><Category><template scope="{games}"><!-- 解构赋值 --><!-- 生成的是ul列表 --><ul><li v-for="g in 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>
4 Vue中的Ajax相关推荐
- vue定时ajax获取数据,vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
- Vue学习(四)—— vue中的ajax
文章目录 第四部分 vue中的ajax 一.axios 1.安装 2.引入 二.vue脚手架配置代理 1.方法一 2.方法二 三.github用户搜索案例 1.接口地址 2.vue 项目中常用的 2 ...
- 第 4 章:Vue 中的 ajax
学习资料来自尚硅谷VUE教学视频 csdn:课程代码.vue3笔记.课件 gitee:课件.代码.资料 其他:vscode插件推荐.第三方库网站.npmjs库 工具库推荐: moment.js 时间处 ...
- Vue中使用ajax技术
Vue 在Vue中使用ajax技术 第一种代理方法 第二种代理方法 pathRewrite配置项 ws配置项 changeOrigin配置项 github案例 第三方库发送ajax 封装axios 默 ...
- vue可以用ajax,Vue 中使用Ajax请求
Vue 项目中常用的 2 个 ajax 库 (一)vue-resource vue 插件, 非官方库,vue1.x 使用广泛 vue-resource 的使用 下载 npm install vue-r ...
- vue使用ajax库,Vue 中使用Ajax请求
Vue 项目中常用的 2 个 ajax 库 (一)vue-resource vue 插件, 非官方库,vue1.x 使用广泛 vue-resource 的使用 在线文档 https://githu ...
- vue使用ajax提交数据,vue中使用ajax请求 data的数据问题
问题描述 v件览客需和下于有快都业视的事一房望站是有ue中使用ajax请求 data的数据抖要支圈者器说是事天开的.年后编定功口小发还问题 问题出现的朋不功事做时次功好来多这开制的请一例农在环境背景及 ...
- vue中封装ajax请求方法,Vue如何封装ajax
Vue如何封装ajax 发布时间:2020-12-07 11:09:07 来源:亿速云 阅读:123 作者:小新 这篇文章主要介绍Vue如何封装ajax,文中介绍的非常详细,具有一定的参考价值,感兴趣 ...
- vue 读取ajax数据,详解vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
最新文章
- python 删除列表中的指定元素
- UIBezierPath的使用(持续更新)
- 注意力机制的两种形式
- NodeJS(express)连接、封装操作MySQL
- Redis添加从节点
- JS简单正则得到字符串中特定的值
- Python 每日定时查询数据库生成Excel报表,并群发邮件
- java -- 对Map按键排序、按值排序
- 【VRP问题】基于节约算法CW求解带容量的车辆路径规划问题(CVRP)
- 小学数学应用题:经典题型归纳50题含解析
- 英语单词词性顺口溜_英语单词词性顺口溜
- 六轴传感器icm20602的自检和校准学习
- win10黑科技,新建桌面非常好用
- 创翼linux版本,创翼电信客户端for Mac-创翼客户端Mac版下载 V1.3.7-PC6苹果网
- 图像智能处理黑科技,让图像处理信手拈来
- 查看计算机真实用户名(username)
- 快速入门github网站,了解GitHub网站的基本使用
- CC00157.CloudKubernetes——|KuberNetes服务发布.V08|——|service.v04|验证service|
- 浅谈CMPP3协议架构实现
- 汉堡王什么汉堡好吃_KFC、汉堡王、麦当劳:谁家汉堡最适合减肥时吃?