使用Gradle整合angular和Spring boot
1. 前言
本文讲述如何使用Gradle搭建一个以springboot技术栈作为后端, 使用Angular作为前端技术栈, 同过gradle将其整合成一个项目的实践经验.
这里只是作为一种实践, 并不建议在生产环境中将前后端耦合在一起. 本文的目的是拓展Spring在(SPA)Single page Application一种能力, 即将实现项目依赖关系, 测试,打包等等自动化.
实现思路就是通过Gradle task 触发npm build, 将编译后的静态资源文件, 部署到springboot的静态资源文件目录, 然后沿用后端打包过程, 将前后端应用程序整合在一起.
2. 前置条件
项目需要用到 Nodejs, angular cli, gradle, 需要提前储备相关知识和安装环境.
3. 创建后端项目
可以使用Spring's Initializr 工具来快速的创建一个工程.
也可以参考我的文档如何手动创建一个springBoot项目, 里面有对springBoot项目的详细解释.
4. 创建前端项目
创建完成后端springboot项目后, 进入src/main/目录下创建前端项目.
ng new webapp
对于如何创建Angular项目,详细信息可以参考我的博客创建Angular项目
5. 使用gradle将前后端整合
将springboot项目和angular项目整合的关键就是: 首先调用ng build, 将编译后的文件放到springboot的static目录下.
5.1. 配置angular项目
首先我们修改一下angular的配置文件angular.json, 找到architect.build.options.outputPath属性, 将其指向springBoot项目的src/resources目录
这里我们使用相对路径.
"outputPath": "../resources/static",
此时我们以及可以手动编译一下前端工程, 看其是否会将编译后的文件输出到指定路径下.
cd webapp
ng build
此时我们可以看到编译的结果输出到了resources/webapp
$tree ../resources/static
static
├── 3rdpartylicenses.txt
├── favicon.ico
├── index.html
├── main.e25f0772ec365244.js
├── polyfills.8e0c5f95042fa80f.js
├── runtime.2ab56e4f659c1314.js
└── styles.ef46db3751d8e999.css
注意这里的index.html, 当我们在稍后启动了springboot, 使用浏览器访问http://localhost时首先需要加载的就是这个文件.
5.2. 配置spring boot项目
此时我们已经有了html文件, 以及js等等文件, 我们只需要在springboot项目的配置文件中, 将静态资源文件目录指向../resources/webapp.
修改springboot项目的配置文件
spring.resources.static-locations=classpath:/static
并指定端口号80, 此项配置是可选的, 默认springBoot web会监听在8080, 此处只是为了方便后续讲解, 所以将端口号修改到80端口.
server.port= 80
此时我们启动springBoot
./gradlew bootRun
启动成功后, 打开浏览器访问http://localhost 即可看到一个default的angular应用了.
5.3. 自动化工程
前面的过程中, 我们需要手动执行ng build命令将web相关文件输出到src/resources/static目录下.
每次编译还需要手动清理文件. 而我们的目标是执行./gradlew bootRun时自动执行这一过程.
将这一段加入到我们build.gradle 中即可在编译, 打包, 运行之前执行我们手动执行的部分.
代码很好理解, 注释也已经写的很清楚了, 这里就不做过多解释了, 也就是手工过程的替代.
def webappDir = "$projectDir/src/main/webapp"
processResources {
dependsOn "buildAngular"
}
task buildAngular(type:Exec) {
// installAngular should be run prior to this task
dependsOn "installAngular"
workingDir "$webappDir"
inputs.dir "$webappDir"
// Add task to the standard build group
group = BasePlugin.BUILD_GROUP
// ng doesn't exist as a file in windows -> ng.cmd
if (System.getProperty("os.name").toUpperCase().contains("WINDOWS")){
commandLine "ng.cmd", "build"
} else {
commandLine "ng", "build"
}
}
task installAngular(type:Exec) {
workingDir "$webappDir"
inputs.dir "$webappDir"
group = BasePlugin.BUILD_GROUP
if (System.getProperty("os.name").toUpperCase().contains("WINDOWS")){
commandLine "npm.cmd", "install"
} else {
commandLine "npm", "install"
}
}
完成以上配置我们就可以执行以下命令, 启动springBoot项目了, 在浏览器上敲入http://localhost就可以访问基于Angular的SPA应用了.
./gradlew bootRun
6. 总结
本文详细讲述了如何创建springBoot工程以及Angular工程, 并通过gradle将前后端工程整合起来. 秘诀就是将angular工程的output输出到springboot的静态资源目录下.
如果要更加深入的探索Angular以及SpringBoot, 可以移步到鹏叔的技术博客空间https://pengtech.net, 空间中提供了博客内搜索功能, 输入相关关键字进行探索吧.
7. 参考文档
posted on 2022-12-31 12:40 eagle.supper 阅读(187) 评论(0) 编辑 收藏 举报
