概述在前后端分离架构中后端提供RESTful API前端使用Vue、React等框架独立开发最后需要整合为一个可部署的应用。本文基于一个使用Spring Security与OAuth2的后端项目介绍如何将前端工程与后端工程合并为Maven多模块结构实现统一编译、打包和运行。纲要前后端分离的多模块工程概览Maven父子工程配置父POM管理公共依赖与模块顺序后端模块(UA)拷贝前端静态资源到classpath前端模块(UA-UI)借助Maven插件执行Node构建前端项目关键文件package.json脚本与依赖管理前端开发依赖与运行时依赖工程启动与验证架构图与代码示例多模块工程结构我们有两个独立工程后端UA和前端UA-UI。通过在它们的上层目录新建一个聚合POM形成父子工程便于统一构建。项目目录结构如下parent/ ├── pom.xml # 父POM ├── UA/ # 后端Spring Boot工程 │ ├── pom.xml │ └── src/main/resources/public/ # 前端编译产物拷贝至此 └── UA-UI/ # 前端Vue工程 ├── pom.xml └── package.json模块构建顺序前端先编译生成HTML/JS/CSS再由后端模块在package阶段拷贝到resources/public最终打包成一个可执行的Jar。父POMUA-UI 前端模块UA 后端模块maven-exec-plugin: npm install buildtarget/distmaven-resources-plugin 拷贝spring-boot:repackage可运行Jar父POM配置父POM继承自spring-boot-starter-parent统一管理Spring Boot版本与公共属性并在modules中声明两个子模块前端模块放在第一位以保证编译顺序。?xml version1.0 encodingUTF-8?projectxmlnshttp://maven.apache.org/POM/4.0.0xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion2.7.12/versionrelativePath//parentgroupIdcom.example/groupIdartifactIdua-parent/artifactIdversion1.0.0/versionpackagingpom/packagingpropertiesjava.version11/java.versionnode.versionv16.14.2/node.versionnpm.version8.5.0/npm.version/propertiesmodulesmoduleUA-UI/modulemoduleUA/module/modules/project通过父POM子模块无需重复声明Spring Boot的版本继承关系公共属性也可复用。后端模块配置后端UA模块的pom.xml原本是独立Spring Boot项目现在其parent指向父POM。为接收前端产物添加maven-resources-plugin在validate阶段将UA-UI编译输出目录的内容拷贝到src/main/resources/public确保打包时静态资源位于classpath下。!-- UA/pom.xml --projectxmlnshttp://maven.apache.org/POM/4.0.0xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdcom.example/groupIdartifactIdua-parent/artifactIdversion1.0.0/versionrelativePath../pom.xml/relativePath/parentartifactIdUA/artifactIdpackagingjar/packagingdependencies!-- Spring Boot, Security, OAuth2 等依赖 --/dependenciesbuildpluginspluginartifactIdmaven-resources-plugin/artifactIdexecutionsexecutionidcopy-frontend/idphasevalidate/phasegoalsgoalcopy-resources/goal/goalsconfigurationoutputDirectory${basedir}/src/main/resources/public/outputDirectoryresourcesresourcedirectory${basedir}/../UA-UI/target/dist/directoryfilteringfalse/filtering/resource/resources/configuration/execution/executions/plugin/plugins/build/project确保UA-UI模块已执行构建target/dist目录存在否则拷贝会失败。通过这种方式最终Jar包中的/public目录即前端静态文件可直接通过浏览器访问。前端模块配置前端模块本质上是一个Node项目Maven通过exec-maven-plugin调用系统安装的Node和npm或者使用frontend-maven-plugin自动下载Node并执行构建。这里展示自动下载的方案避免CI环境缺少Node的问题。!-- UA-UI/pom.xml --projectxmlnshttp://maven.apache.org/POM/4.0.0xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdcom.example/groupIdartifactIdua-parent/artifactIdversion1.0.0/versionrelativePath../pom.xml/relativePath/parentartifactIdUA-UI/artifactIdpackagingpom/packagingbuildpluginsplugingroupIdcom.github.eirslett/groupIdartifactIdfrontend-maven-plugin/artifactIdversion1.12.1/versionconfigurationnodeVersion${node.version}/nodeVersionnpmVersion${npm.version}/npmVersionworkingDirectory${basedir}/workingDirectory/configurationexecutionsexecutionidinstall node and npm/idgoalsgoalinstall-node-and-npm/goal/goals/executionexecutionidnpm install/idgoalsgoalnpm/goal/goalsconfigurationargumentsinstall/arguments/configuration/executionexecutionidnpm run build/idgoalsgoalnpm/goal/goalsconfigurationargumentsrun build/arguments/configuration/execution/executions/plugin/plugins/build/project该插件会自动下载指定版本的Node和npm然后执行npm install和npm run build。npm run build命令对应前端package.json中定义的构建脚本。前端关键文件package.json前端依赖和脚本通过package.json管理类似于Java中的pom.xml。典型配置如下{name:ua-ui,version:1.0.0,scripts:{serve:vue-cli-service serve,build:vue-cli-service build,lint:vue-cli-service lint},dependencies:{vue:^2.6.14,vue-router:^3.5.1,vuex:^3.6.2,axios:^0.27.2,ant-design-vue:^1.7.8},devDependencies:{vue/cli-service:^5.0.8,vue-template-compiler:^2.6.14}}scripts定义了可执行命令serve用于本地开发build用于生产构建。dependencies是运行时依赖如Vue全家桶、axios HTTP客户端、Ant Design Vue UI库。devDependencies是开发编译依赖如Vue CLI构建工具和模板编译器。前端项目启动时开发者需预先安装Node环境然后执行npm run serve即可在本地热加载开发。Maven整合后npm run build会自动生成静态文件到target/dist目录。启动与验证调整目录结构后确保后端application.properties或application.yml中的资源路径配置正确并且Redis等外部依赖已启动。在工程根目录执行统一构建mvn clean package构建过程父POM触发UA-UI模块构建插件安装Node并执行npm install与npm run build。UA模块在validate阶段拷贝前端产物到src/main/resources/public随后编译打包。生成的Jar包包含后端逻辑与前端静态资源可直接运行java-jarUA/target/UA-1.0.0.jar访问http://localhost:8080即可看到前端页面通过登录接口与后端OAuth2认证交互。前端使用axios发送HTTP请求与后端的Spring Security安全体系对接具体的认证流程将在后续章节展开。总结本文介绍了将独立的前后端工程整合为Maven多模块项目的方法利用父POM统一管理依赖版本借助frontend-maven-plugin实现Node环境标准化通过资源拷贝将前端编译产物嵌入后端Jar包。这种结构便于持续集成使全栈应用成为一个整体交付单元。读者可根据实际框架调整前端构建工具和目录布局实现类似的一体化构建。
Java框架快速入门: Spring Security+OAuth2之前后端分离多模块工程配置
概述在前后端分离架构中后端提供RESTful API前端使用Vue、React等框架独立开发最后需要整合为一个可部署的应用。本文基于一个使用Spring Security与OAuth2的后端项目介绍如何将前端工程与后端工程合并为Maven多模块结构实现统一编译、打包和运行。纲要前后端分离的多模块工程概览Maven父子工程配置父POM管理公共依赖与模块顺序后端模块(UA)拷贝前端静态资源到classpath前端模块(UA-UI)借助Maven插件执行Node构建前端项目关键文件package.json脚本与依赖管理前端开发依赖与运行时依赖工程启动与验证架构图与代码示例多模块工程结构我们有两个独立工程后端UA和前端UA-UI。通过在它们的上层目录新建一个聚合POM形成父子工程便于统一构建。项目目录结构如下parent/ ├── pom.xml # 父POM ├── UA/ # 后端Spring Boot工程 │ ├── pom.xml │ └── src/main/resources/public/ # 前端编译产物拷贝至此 └── UA-UI/ # 前端Vue工程 ├── pom.xml └── package.json模块构建顺序前端先编译生成HTML/JS/CSS再由后端模块在package阶段拷贝到resources/public最终打包成一个可执行的Jar。父POMUA-UI 前端模块UA 后端模块maven-exec-plugin: npm install buildtarget/distmaven-resources-plugin 拷贝spring-boot:repackage可运行Jar父POM配置父POM继承自spring-boot-starter-parent统一管理Spring Boot版本与公共属性并在modules中声明两个子模块前端模块放在第一位以保证编译顺序。?xml version1.0 encodingUTF-8?projectxmlnshttp://maven.apache.org/POM/4.0.0xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion2.7.12/versionrelativePath//parentgroupIdcom.example/groupIdartifactIdua-parent/artifactIdversion1.0.0/versionpackagingpom/packagingpropertiesjava.version11/java.versionnode.versionv16.14.2/node.versionnpm.version8.5.0/npm.version/propertiesmodulesmoduleUA-UI/modulemoduleUA/module/modules/project通过父POM子模块无需重复声明Spring Boot的版本继承关系公共属性也可复用。后端模块配置后端UA模块的pom.xml原本是独立Spring Boot项目现在其parent指向父POM。为接收前端产物添加maven-resources-plugin在validate阶段将UA-UI编译输出目录的内容拷贝到src/main/resources/public确保打包时静态资源位于classpath下。!-- UA/pom.xml --projectxmlnshttp://maven.apache.org/POM/4.0.0xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdcom.example/groupIdartifactIdua-parent/artifactIdversion1.0.0/versionrelativePath../pom.xml/relativePath/parentartifactIdUA/artifactIdpackagingjar/packagingdependencies!-- Spring Boot, Security, OAuth2 等依赖 --/dependenciesbuildpluginspluginartifactIdmaven-resources-plugin/artifactIdexecutionsexecutionidcopy-frontend/idphasevalidate/phasegoalsgoalcopy-resources/goal/goalsconfigurationoutputDirectory${basedir}/src/main/resources/public/outputDirectoryresourcesresourcedirectory${basedir}/../UA-UI/target/dist/directoryfilteringfalse/filtering/resource/resources/configuration/execution/executions/plugin/plugins/build/project确保UA-UI模块已执行构建target/dist目录存在否则拷贝会失败。通过这种方式最终Jar包中的/public目录即前端静态文件可直接通过浏览器访问。前端模块配置前端模块本质上是一个Node项目Maven通过exec-maven-plugin调用系统安装的Node和npm或者使用frontend-maven-plugin自动下载Node并执行构建。这里展示自动下载的方案避免CI环境缺少Node的问题。!-- UA-UI/pom.xml --projectxmlnshttp://maven.apache.org/POM/4.0.0xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdcom.example/groupIdartifactIdua-parent/artifactIdversion1.0.0/versionrelativePath../pom.xml/relativePath/parentartifactIdUA-UI/artifactIdpackagingpom/packagingbuildpluginsplugingroupIdcom.github.eirslett/groupIdartifactIdfrontend-maven-plugin/artifactIdversion1.12.1/versionconfigurationnodeVersion${node.version}/nodeVersionnpmVersion${npm.version}/npmVersionworkingDirectory${basedir}/workingDirectory/configurationexecutionsexecutionidinstall node and npm/idgoalsgoalinstall-node-and-npm/goal/goals/executionexecutionidnpm install/idgoalsgoalnpm/goal/goalsconfigurationargumentsinstall/arguments/configuration/executionexecutionidnpm run build/idgoalsgoalnpm/goal/goalsconfigurationargumentsrun build/arguments/configuration/execution/executions/plugin/plugins/build/project该插件会自动下载指定版本的Node和npm然后执行npm install和npm run build。npm run build命令对应前端package.json中定义的构建脚本。前端关键文件package.json前端依赖和脚本通过package.json管理类似于Java中的pom.xml。典型配置如下{name:ua-ui,version:1.0.0,scripts:{serve:vue-cli-service serve,build:vue-cli-service build,lint:vue-cli-service lint},dependencies:{vue:^2.6.14,vue-router:^3.5.1,vuex:^3.6.2,axios:^0.27.2,ant-design-vue:^1.7.8},devDependencies:{vue/cli-service:^5.0.8,vue-template-compiler:^2.6.14}}scripts定义了可执行命令serve用于本地开发build用于生产构建。dependencies是运行时依赖如Vue全家桶、axios HTTP客户端、Ant Design Vue UI库。devDependencies是开发编译依赖如Vue CLI构建工具和模板编译器。前端项目启动时开发者需预先安装Node环境然后执行npm run serve即可在本地热加载开发。Maven整合后npm run build会自动生成静态文件到target/dist目录。启动与验证调整目录结构后确保后端application.properties或application.yml中的资源路径配置正确并且Redis等外部依赖已启动。在工程根目录执行统一构建mvn clean package构建过程父POM触发UA-UI模块构建插件安装Node并执行npm install与npm run build。UA模块在validate阶段拷贝前端产物到src/main/resources/public随后编译打包。生成的Jar包包含后端逻辑与前端静态资源可直接运行java-jarUA/target/UA-1.0.0.jar访问http://localhost:8080即可看到前端页面通过登录接口与后端OAuth2认证交互。前端使用axios发送HTTP请求与后端的Spring Security安全体系对接具体的认证流程将在后续章节展开。总结本文介绍了将独立的前后端工程整合为Maven多模块项目的方法利用父POM统一管理依赖版本借助frontend-maven-plugin实现Node环境标准化通过资源拷贝将前端编译产物嵌入后端Jar包。这种结构便于持续集成使全栈应用成为一个整体交付单元。读者可根据实际框架调整前端构建工具和目录布局实现类似的一体化构建。
