SpringBoot + React 前后端分离多模块项目框架搭建流程

最近两年参与的项目多是基于 SpringBoot 【后端】+ Vue 或 React 【前端】，说是前后端分离，实际还是全栈，只是静态资源搭上了前端的框架而已。

那么就面临一个问题，既然不是纯粹的前后端分离，怎么调试前端呢？怎么搭建项目框架，才能在开发时不用开多个 IDEA 、在多个项目间切换呢？

maven 的 exec-maven-plugin 插件和前端的打包目录 eg :React 的 appBuild 参数结合，可以完美解决这个问题。

本文以一个多模块的简单应用为例，基于SpringBoot 和 React 的多模块项目搭建流程的 demo 。父工程名称为 wood-multi-pro，包含两个完整的子模块 order-web 和 user-web ，一个公共模块 common。

order-view 和 user-view 目录放 React 创建的前端框架。

IDEA 的菜单的 “new Project” 选中 maven 项目且为空，目录指定第一步创建的父目录地址：

作为父工程容器，不需要代码，所以删掉 src 目录，IDEA 中打开刚刚创建的项目，工程目录如下：

这就达到了前后端工程目录在一块的视觉效果。

创建子模块 order-web ，目录直接选已经建好的：

再看 order-web 视图，就成了 maven 工程图标了：

同操作，创建另两个子模块 user-web 和 common ，搭建好的框架结构为：

因为前后端分离，order-web 和 user-web 的页面静态资源文件来自对应前端工程打包的输出物，可以利用 maven 的打包插件完成前端自动打包的过程。

在 order-web 的 pom.xml 文件中配置它的打包插件，打包之前的阶段先执行 npm run build 命令完成前端模块的打包：

    org.codehaus.mojo
    exec-maven-plugin
    
        
            exec-npm-run-build
            prepare-package
            
                exec
            
            
                cnpm
                
                    run
                    build
                
                
            
        
    

同理，修改 user-web 模块的 pom.xml 添加上面的前端打包配置，修改目录为 ../user-view 。

这样就解决了后端打包问题。

对于 React 项目，默认输出目录为 build ，我们需要修改它到 web 工程的 static 目录下。

以 order-view 为例，执行流程如下：

1. 进入 order-view 目录，执行 npm run eject 生成项目的配置文件。注意，这个配置文件不能拷贝，必须通过命令生成，否则打包时不会生效。
2. 进入生成的 config 目录，修改 path.js 文件中的 appBuild 为它的上层目录： appBuild: resolveApp('../order-web/src/main/resources/static'), 目的就是设置打包输出文件到 web 工程的静态资源目录下，这样就能跟第三步后端的打包结合在一起使用了。

前后端分离开发时，运行前端工程有两种方式：

1. 第一种，独立运行，使用 npm run start ，开启前端独立端口，那它的 ajax 访问就是跨域访问后端工程。
2. 第二种，打包到后端，与后端一起启动，就不存在跨域。

解决前端启动需要做两个步骤：

1. 后端工程添加跨域拦截器配置。
2. 前端 axios 的 base_URL 设置，用环境变量区分开发和生产：

let {hostname, port} = window.location;

// 前后台分离时，需要单独制定后端请求地址
const ADDRESS = `${hostname}:${port}`;
let base_URL = `http://${ADDRESS}`;

// 生产环境时，前后台整合在一起
if (process.env.NODE_ENV === 'production') {
    base_URL = '';
}

// 创建axios实例
const service = axios.create({
    baseURL: base_URL, 
    timeout: 50000, 
    changeOrigin: true, //跨域
    withCredentials: true, // 跨域携带cookie
})

至此，一个完整的前后端分离开发，打包时又整合的框架就搭建好了。