位置: IT常识 - 正文
使用Axios前后端交互（超详细）建议点赞收藏(前端axios请求怎么中断)
编辑：rootadmin推荐整理分享使用Axios前后端交互（超详细）建议点赞收藏(前端axios请求怎么中断)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:axios调用接口,axios前后端交互的实现方式,axios前后端交互的实现方式,前端怎么用axios调用后端接口,前端axios请求怎么中断,axios 后端,axios 后端,前端怎么用axios调用后端接口,内容如对您有帮助，希望把文章链接给更多的朋友！
1、安装axios
将目录切换到当前项目目录下，执行下面安装命令：
npm install --save axios vue-axios
2、将axios挂载到vue实例上或则直接导入组件中
在mian.js中做如下配置，可将axios挂载到vue实例上：
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
3.vue.config.js中写配置代理器
//配置代理 devServer:{ proxy:{ '/wanshi':{ target:"http://localhost:8081", ws:true, changeOrigin:true pathRewrite:{ '^/wanshi':"" } } } }'/wanshi':路径的作用是告知代理服务器，如果请求中包含”、wanshi“则将请求通过代理服务器发送给真正的服务器(自己可以随便起名字) /wanshi写在浏览器端口号的后面（下面会用到）
target：真实服务器的地址（也就是后台服务器的端口号）
后台服务器的端口号跟前台端口后不可以一样，否则会占用端口号，打开是同一个页面，所以要提前看一下是否一样 target这里是后台端口号
pathRewrite：代理服务器发送请求的时候会将路径中的'/wanshi'替换成'',否则找不到路径
中间两个默认配置，不写的话也不影响
4.写后台代码
首先数据库里面要有数据 在idea里面写数据的增删改查这里我就不写了 毕竟学到这里了 前面的应该都是小问题 咱们这主要讲的是前后交互
写sql语句
实体类
重点来啦
其实跟咱们平常写增删改查一样 只是用了一个
@ResponseBody注解：转为json格式这个必须要有5.前台接收
要显示的格式随便写 只要可以在页面显示就行
重点！！先引入注册
这里的get是前台浏览器的端口号
/wanshi现在用到了
.then():运行成功后要执行的操作
this.movies=response.data 意思是我自定义一个空的数组，把后台传过来的数据给空数组
.catch():运行失败后要执行的操作
到现在基本的写完了 测试时需要前后端同时开启 才可以获取数据
有任何问题可以私聊找我哦 或者需要什么资料的都可以
上一篇：改进YOLO：YOLOv5结合swin transformer(改进的拼音)
下一篇：图像修复（Image Restoration）算法数据集详细介绍(图像修复技术)