用于 SPA 的带有 Yeoman 的 Spring Boot 静态 Web 资源处理

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡/ 赠书活动

目前,正在 星球 内带小伙伴们做第一个项目:全栈前后端分离博客项目,采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 204 小节,累计 32w+ 字,讲解图:1416 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 870+ 小伙伴加入,欢迎点击围观

gulp grunt 这样的 Javascript 构建工具真的让我感到困惑,我看着这些工具的构建脚本之一,发现很难理解它,并且无法想象从头开始编写这些构建脚本之一。这就是 yeoman 的 用武之地,这是一个非常方便的工具,可以让人们使用 javascript 构建工具的无数组合中的任何一个快速引导一个好的入门项目。

我想探索 Spring 框架推荐 的处理静态 Web 资源的方法,即使用这些非常强大的构建工具来构建静态资产,并在静态资产构建为可分发状态后使用 Spring 提供内容。

我的方法是使用 yeoman 生成一个入门项目,我选择 gulp-angular 作为我的基础并快速生成一个完整的项目, 可在此处获得 。我能够将此模板扩展为一个相当全面的基于 angularjs 的单页应用程序,该应用程序委托回基于 Spring 的 REST 调用来为 UI 提供服务。

我遵循的步骤如下,主要是从 Brian Clozel 创建的 优秀示例 中复制的:

如果你想跟随 我的 github repo 中的最终结果。

  1. 定义两个模块,用于保存生成的 yeoman 模板的“客户端”模块和用于保存 Spring Boot 应用程序的“服务器”模块。
  2. 破解“客户端”模块,在这个特定实例中,我创建了一个简单的基于 angularjs 的应用程序
  3. 我使用 maven 作为 java 构建工具,所以我有一个 包装器 maven pom 文件,它触发 javascript 构建链作为 maven 构建周期的一部分,然后获取构建的工件并从中创建一个客户端 jar。静态内容巧妙地放置在 Spring boot 可以到达的位置,在本例中为 classpath:/static 位置。
  4. 在“服务器”模块中,客户端作为依赖项添加,“服务器”设置为作为成熟的 spring-boot 项目运行
  5. 通过执行以下命令从服务器模块提供项目: mvn spring-boot:run

结论

Spring Boot 采用了一种出色的方法来为静态 Web 资源提供资产管道,这不会干扰 Javascript 世界中非常强大的构建工具,并提供一种干净的方式来提供生成的静态内容。