SpringBoot和Vue-element-admin前后端打通通讯

首先修改前端的代码:

1:修改项目的根路径,配置文件env.development中VUE_APP_BASE_API根据需要修改,如:


2:修改axios的代理,用于跨域,在vue.config.js中修改proxy(老版本可能在config文件夹下的index.js),注释掉after:



3:注释掉mock的代码,在src/main.js中:


4:修改访问的url,比如在src/api/user.js中:



5:修改axios的模式位history,在src/router/index.js中:



6:service的baseURL需要修改成后台的ip和port,在src/utils/request.js中:


7:最重要的在request.js中,往后台传值时需要对参数进行处理,否则后台接收不到,使用qs模块:



8:后台需要配置cors跨域,一个是建一个继承自WebMvcConfigurer的类,重写addCorsMappings方法:


同时,在方法上加@CrossOrigin也是可以的:


ps:我两个同时用了才行,不知道什么原因

注意返回前台时需要在方法前加上@ResponseBody

参考连接:vue-element-admin与后端交互流程(补)(跨域)

                   

你可能感兴趣的:(SpringBoot和Vue-element-admin前后端打通通讯)