前言
本文讲述如何使用Gradle搭建一个以springboot技术栈作为后端, 使用Angular作为前端技术栈, 同过gradle将其整合成一个项目的实践经验.
这里只是作为一种实践, 并不建议在生产环境中将前后端耦合在一起. 本文的目的是拓展Spring在(SPA)Single page Application一种能力, 即将实现项目依赖关系, 测试,打包等等自动化.
实现思路就是通过Gradle task 触发npm build, 将编译后的静态资源文件, 部署到springboot的静态资源文件目录, 然后沿用后端打包过程, 将前后端应用程序整合在一起.
前置条件
项目需要用到 Nodejs, angular cli, gradle, 需要提前储备相关知识和安装环境.
创建后端项目
可以使用Spring's Initializr 工具来快速的创建一个工程.
也可以参考我的文档如何手动创建一个springBoot项目, 里面有对springBoot项目的详细解释.
创建前端项目
创建完成后端springboot项目后, 进入src/main/目录下创建前端项目.
ng new webapp
对于如何创建Angular项目,详细信息可以参考我的博客创建angular项目
使用gradle将前后端整合
将springboot项目和angular项目整合的关键就是: 首先调用ng build, 将编译后的文件放到springboot的static目录下.
配置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时首先需要加载的就是这个文件.
配置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应用了.
自动化工程
前面的过程中, 我们需要手动执行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
总结
本文详细讲述了如何创建springBoot工程以及Angular工程, 并通过gradle将前后端工程整合起来. 秘诀就是将angular工程的output输出到springboot的静态资源目录下.
如果要更加深入的探索Angular以及SpringBoot, 可以移步到鹏叔的技术博客空间https://pengshu.net, 空间中提供了博客内搜索功能, 输入相关关键字进行探索吧.
参考文档
Angular + Spring Boot integration using Gradle
标签：springboot,项目,Spring,boot,Gradle,static,build,ng,angular From： https://www.cnblogs.com/guoapeng/p/17016461.html