1.npm 安装 axios
npm install axios --save
2.编写访问后台的方法
3.运行测试,遇到跨域问题
解决办法:后台配置CORS,后台使用的是SpringBoot,增加配置类,关于后台的文章参见另一个系列:SpringBoot权限管理开发实战
4.配置CORS之后重启后台,再测试交互,接收返回
5.为了代码复用和方便维护,对axios进行封装
代码较多,这里不能全部贴出,源码托管在码云上https://gitee.com/gintone/Guard,前端项目的目录是guard-admin-ui 其他目录是后台代码
6、修改登录请求,访问后台,发现报错
this.$api.login.login().then(function(data){
alert(data)
console.log(data);
})
前台报错:
后台报错:
之前简单测试的时候给的路径是GetMapping,改成PostMapping之后再测试
可以获得token,还是有报错
报出的错误时:路由不能跳转到自身,修改main.js
修改后再访问,上一个问题解决
后台加了@RequestBody获取请求参数,结果前台报错,login方法里的断点也进不去
原因是前台请求时没有把参数传进来
加上参数之后,再请求,问题解决
完整前后台代码托管在gitee上,地址 https://gitee.com/gintone/Guard