Spring Boot + Vue 前后端分离开发，前端网络请求封装与配置 (2)

官方给出了 5 种插件制作方式，我们这里采用第 4 种方案。
具体操作就是在 main.js 中引入所有的封装好的方法，然后挂载到 Vue.prototype 上即可，如下：

import {postRequest} from "./utils/api"; import {putRequest} from "./utils/api"; import {deleteRequest} from "./utils/api"; import {getRequest} from "./utils/api"; Vue.prototype.getRequest = getRequest; Vue.prototype.deleteRequest = deleteRequest; Vue.prototype.putRequest = putRequest; Vue.prototype.postRequest = postRequest;

封装完成后，以后在 vue 文件中，直接通过 this 就可以获取到网络请求方法的引用了，如下：

this.postRequest("/doLogin", this.user).then(msg=>{ if (msg) { //登录成功，页面跳转 } })

注意 ，then 中的 msg 就是响应拦截器中返回的 msg ，这个 msg 如果没有值，表示请求失败（失败已经在拦截器中进行处理了），如果有值，表示请求成功！

配置请求转发

在前后端分离中，前端和后端在不同的端口或者地址上运行，如果前端直接向后端发送请求，这个请求是跨域的。

但是在项目部署时，前端打包编译后拷贝到 Java 项目中，和 Java 项目一起运行，此时不存在跨域问题。

所以这里我们的解决思路不是解决跨域问题，而是通过配置 NodeJS 的请求转发，来实现网络请求顺利发送。

请求转发在 vue 项目的 config/index.js 文件中配置：

添加了请求转发配置之后，一定要重启前端项目才会生效。

此时启动前端项目，就可以顺利发送网络请求了。

总结

本文主要和大伙分享了在前后端分离的情况下，如何对前端网络请求进行封装，并且如何配置请求转发，这是前后端分离中的基础课，小伙伴们有问题欢迎留言讨论。松哥将自己封装的网络请求库已经放在 GitHub 上，欢迎大家参考 https://github.com/lenve/javaboy-code-samples。

关注公众号牧码小子，专注于 Spring Boot+微服务，定期视频教程分享，关注后回复 Java ，领取松哥为你精心准备的 Java 干货！