使用Vue-axios进行数据交互的方法
更新时间：2022年03月08日 09:48:12 作者：程序猿-张益达
这篇文章主要介绍了使用Vue-axios进行数据交互详情，文章围绕Vue-axios进行数据交互的相关资料展开详细内容，需要的小伙伴可以参考一下，希望对你的学习或工作有所帮助
1、安装axios
- 打开cmd命令行工具
- cd到项目目录
- 输入以下命令
npm install axios
提示安装完成以后，打开main.js
输入以下代码:
import axios from 'axios'
接着在底下输入:
Vue.prototype.$axios = axios
配置就完事了
2、axios的使用
this.$axios({
method: 'post',//交互方式
url: '/api/ImgHandle',//url地址
data: {page: page}//需要交互的数据
}).then((res) => {
console.log(res)//成功 res为返回的结果
}).catch((error) => {
console.log(error)//失败 打印异常
})3、讲一下代理proxyTable的使用
一般在开发时，地址都在本地，会出现跨域报错，报错示例如下:
Failed to load http://192.168.1.111:8888/console/good/front/classList:
Response to preflight request doesn’t pass access control
check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Origin ‘http://localhost:8081’ is therefore not allowed access.
If an opaque response serves your needs,
set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
如果后端不修改，那就前端操作修改一下:
- 找到 config/index.js
- 找到 proxyTable进行修改
proxyTable: {
'/api': { //使用"/api"来代替"http://www.xxx.com/"
target: 'https://www.xxx.com/', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': 'https://www.xxx.com/' //路径重写
}
}
},然后重新运行一下，即可生效，操作失败就再检查一下代码
到此这篇关于使用Vue-axios进行数据交互的方法的文章就介绍到这了,更多相关Vue-axios数据交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue-cli3 设置端口号(81)无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-02-02
这篇文章主要为大家介绍了vue3+ts中ref及reactive如何指定类型的实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
本文分步骤给大家介绍了基于vue cli重构多页面脚手架过程，非常不错，具有参考借鉴价值，需要的朋友参考下2018-01-01
vue3成功创建项目后 run serve启动项目报错的解决
这篇文章主要介绍了vue3成功创建项目后 run serve启动项目报错的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue实现剪切板图片压缩功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了vue使用exif获取图片经纬度的示例代码，帮助大家更好的利用vue获取图片信息，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了 vue中v-for 循环对象中的属性，文章围绕v-for 循环对象的相关资料展开详细内容,需要的朋友可以参考一下，希望对大家有所帮助2021-11-11
本篇文章主要介绍了基于Vue实现后台系统权限控制的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
最近工作中遇到了element表单校验失败的情况,通过查找相关资料终于解决了,所以下面这篇文章主要给大家介绍了关于element表单使用校验之校验失效问题的相关资料,需要的朋友可以参考下2022-10-10
本文主要介绍了将vue+nodejs项目部署到服务器上的实现,使用Express生成器部署和前端Vue项目部署,具有一定的参考价值,感兴趣的可以了解一下2025-03-03
最新评论