使用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数据交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Pinia 是一个基于 Vue 3 的状态管理库，可以更好地支持 TypeScript 和更灵活的状态管理方式，本文主要介绍了pinia的使用与持久化处理，需要的可以参考一下2023-07-07
这篇文章主要介绍了vue $set 实现给数组集合对象赋值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-07-07
这篇文章主要介绍了vue静态界面之左二级菜单右表单表格，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue使用exif获取图片旋转，压缩的示例代码，帮助大家更好的利用python处理图片，感兴趣的朋友可以了解下2020-12-12
vue3使用threejs实现3D卡片水平旋转效果的示例代码
这篇文章主要介绍了在vue3中使用threejs实现3D卡片水平旋转效果,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-04-04
今天小编就为大家分享一篇解决Vue+Element ui开发中碰到的IE问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
今天小编就为大家分享一篇关于vue中轮训器的使用，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
在Vue+Ts+Vite项目中配置别名指向不同的目录并引用的案例详解
这篇文章主要介绍了在Vue+Ts+Vite项目中配置别名指向不同的目录并引用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
本篇文章主要介绍了详解用vue-cli来搭建vue项目和webpack，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
本篇文章主要介绍了Vue 组件间的样式冲突污染，当多个样式出现时，就会导致样式冲突，本文介绍了具体解决方法2017-08-08
最新评论