正文

springboot+react前后端分离多模块项目框架搭建流程(代码片段)

毕小宝  毕小宝  2023-03-09  308

关键词：

背景

最近两年参与的项目多是基于 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 命令完成前端模块的打包：

<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 为例，执行流程如下：

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

第五步，前端运行环境配置

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

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

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

后端工程添加跨域拦截器配置。
前端 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
)

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

springboot项目一般选择前后端分离好还是整合freemarker？

springboot项目一般选择前后端分离好？还是整合freemarker？现在项目采用哪种模式多一些啊？并没有好与不好，只有合适与不合适；你要看你的项目的应用场景，开展的具体业务类型；是小型项目，还是一定规模的项目，是你自己... 查看详情

springboot+vue前后端分离框架

项目介绍一款Java语言基于SpringBoot2.x、MybatisPlus、Vue、ElementUI、MySQL等框架精心打造的一款前后端分离框架，致力于实现模块化、组件化、可插拔的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统&#... 查看详情

springboot+vue前后端分离框架

springboot+vue+antdesign前后端分离解决方案

项目介绍一款Java语言基于SpringBoot2.x、MybatisPlus、Vue、AntDesign、MySQL等框架精心打造的一款前后端分离框架，致力于实现模块化、组件化、可插拔的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统&#... 查看详情

springboot+vue+antdesign前后端分离项目脚手架

springboot+vue+antdesign前后端分离快速开发平台

springboot+vue+antdesign前后端分离通用后台管理系统

最棒的springboot+vue+antdesign前后端分离系统搭建教程

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

参考技术A使用到的技术springbootspringdatajpaspringdatarestreact.jsfetch.jsmaterial-ui先把要点记一下：pom.xmlblog.java@BlogRepositoryDatabaseLoader.javaspring.data.rest.base-path=/apipackagecom.example;importorg.springframework.boot.SpringApplication;importorg.springframework.boot.a... 查看详情

基于vue+springboot实现的前后端分离的商城项目，包含秒杀模块（毕设）

本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，后端基于SpringBoot+Redis+RabbitMQ+MySQL实现。实现了用户注册与登录，商城首页展示，商品分类展示，商品详情页，购物车，查看详情

八个开源的springboot前后端分离项目，一定要收藏！

八个开源的SpringBoot前后端分离项目最近前后端分离已经在慢慢走进各公司的技术栈，不少公司都已经切换到这个技术栈上面了。即使贵司目前没有切换到这个技术栈上面，我们也非常建议大家学习一下前后端分离开发，以免在... 查看详情

八个开源的springboot前后端分离项目，一定要收藏！

无意间做了个web版的jvm监控端（前后端分离react+springboot）(代码片段)

之前写了JConsole、VisualVM依赖的JMX技术，然后放出了一个用纯JMX实现的web版本的JConsole的截图，今天源码来了。本来就是为了更多的了解JMX，第一步就想把所有的MBean和属性都展示出来，开始在控制台输出，但是效果不好，内容太... 查看详情

最棒的springboot+vue+antdesign前后端分离系统搭建教程

项目介绍JavaWeb_Ant_Pro是基于SpringBoot2+Vue+AntDesign+Shiro+MybatisPlus研发的权限(RBAC)及内容管理系统，致力于做更简洁的后台管理框架，包含系统管理、代码生成、权限管理、站点、广告、布局、字段、配置等一系列... 查看详情

七个开源的springboot前后端分离项目，一定要收藏！

...动端、Electron环境中的各种开发模式；后端有两个版本：SpringBoot版本和SpringCloud版本，前端有Angular、React以及Electron等版本。项目效果图：微人事star数9313项目地址：https://github.com/lenve/vhr微人事是一个前后端分离的人力资源管理... 查看详情

springboot+vue+antdesign前后端分离解决方案

springboot+vue+antdesign搭建的前后端分离后台管理系统

springboot可以前后端分离吗

参考技术A可以，现在很多项目都是前后端分离的，只是开发前需要配置环境，数据源，上下端等很多东西。查看详情