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

Posted 毕小宝

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SpringBoot + React 前后端分离多模块项目框架搭建流程相关的知识,希望对你有一定的参考价值。

背景

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

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

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

模块规划

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

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

第一步,按上图结构创建文件夹

第二步,创建父工程

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

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

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

第三步,创建子模块

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

再看 order-web 视图,就成了 maven 工程图标了:

同操作,创建另两个子模块 user-webcommon ,搭建好的框架结构为:

第三步,后端打包插件配置

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

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

<plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>exec-maven-plugin</artifactId>
    <executions>
        <execution>
            <id>exec-npm-run-build</id>
            <phase>prepare-package</phase>
            <goals>
                <goal>exec</goal>
            </goals>
            <configuration>
                <executable>cnpm</executable>
                <arguments>
                    <argument>run</argument>
                    <argument>build</argument>
                </arguments>
                <workingDirectory></workingDirectory>
            </configuration>
        </execution>
    </executions>
</plugin>

同理,修改 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. 前端 axiosBASE_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
})

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

以上是关于SpringBoot + React 前后端分离多模块项目框架搭建流程的主要内容,如果未能解决你的问题,请参考以下文章

Tomcat部署前后端分离springboot项目

利用Spring boot+react快速搭建一个博客站点(前后端完全分离)

开源的 SpringBoot 前后端分离项目!赶快收藏吧

java+react前后端分离项目处理重复提交问题

springboot可以前后端分离吗

前后端分离开发,Vue 如何处理跨域问题?