Java Spring Boot 项目中嵌入前端静态资源:完整教程与实战案例

言简意赅的讲解Java Spring Boot 中嵌入前端项目的静态资源解决的痛点

之前给大家讲解了如何部署一个前端项目,但大家还是好奇如何部署一个前后端一体项目。将前端构建后的静态资源嵌入 Java Spring Boot 后端项目,是现代全栈开发中一种流行的实践方式。本文将详细讲解这样做的好处,并通过代码示例和实践演示,帮助你轻松实现这一目标。最后,我们还会探讨如何优化静态资源访问路径,使用户体验更加友好。


一、在 Spring Boot 中嵌入静态资源的好处

1.1 好处概述
  1. 简化交付流程
    前端打包生成的静态资源与后端结合为一个单独的可运行文件(如 jarwar),客户只需运行一个文件即可启动整个系统,无需分别部署前端和后端服务。

  2. 独立开发,协作灵活
    在开发阶段,前后端仍可以分为两个独立团队,分别开发和调试。前端完成开发后,通过构建工具(如 Webpack、Vite)生成静态资源文件,后端只需加载这些文件即可。

  3. 部署维护方便
    只需部署一个 Spring Boot 服务,无需额外配置 Nginx 或其他静态资源服务器,降低部署复杂度,减少维护成本。


二、实现步骤与代码示例

2.1 项目目录结构规划

为了更好地管理嵌入的前端静态资源,建议使用如下的项目目录结构:

project-root/
├── src/
│   ├── main/
│   │   ├── java/
│   │   ├── resources/
│   │   │   ├── static/           # 存放前端打包后的静态资源
│   │   │   │   ├── index.html
│   │   │   │   ├── css/
│   │   │   │   ├── js/
│   │   │   │   ├── images/
│   │   │   └── application.properties
│   │   └── Application.java
├── frontend/                     # 前端项目目录(开发阶段)
│   ├── src/
│   ├── public/
│   ├── package.json
│   └── vite.config.js
└── pom.xml
2.2 前端构建与资源存放
  1. 前端项目打包
    假设你的前端使用 Vite 或 Webpack 构建,运行如下命令生成构建文件:

    npm run build
    

    生成的文件通常位于 dist/ 目录下,其中包括 index.html 和相关静态资源文件(如 css/js/ 文件夹)。
    spingboot前端项目打包

  2. 拷贝静态资源到后端项目
    dist/ 中的所有文件复制到 Spring Boot 项目的 src/main/resources/static/ 目录下。
    Springboot中包含静态资源
    注意: src/main/resources/static/ 是 Spring Boot 的默认静态资源目录,放置在此的文件可以直接通过浏览器访问。


2.3 后端代码示例
package com.example.demo;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class DemoApplication {public static void main(String[] args) {SpringApplication.run(DemoApplication.class, args);}
}

重要提示:如果你只需要静态资源,而不打算使用 Spring MVC 来拦截路径,请确保 src/main/resources/static/ 中的文件名和路径完全一致。Spring Boot 会自动将这些文件直接暴露为静态资源。


2.4 访问测试

完成上述步骤后,运行 Spring Boot 项目并访问以下 URL:

  • http://localhost:8080/index.html
  • http://localhost:8080/css/style.css
  • http://localhost:8080/js/app.js

你会发现静态资源可以正常加载。但这里存在一个问题:URL 必须以 .html 结尾,这不够美观且容易暴露文件类型。


三、优化静态资源访问路径

为了去掉 .html 后缀,提供更优雅的访问方式,我们可以通过以下两种方式解决:

3.1 使用 Nginx 配置 URL 重写

如果最终的部署环境中使用了Nginx,可以通过配置重写规则来去掉 .html 后缀。例如:

server {listen 80;server_name yourdomain.com;root /path/to/static/files;location / {try_files $uri $uri/ $uri.html =404;}
}

上述规则会优先匹配文件路径,若文件路径不存在,则尝试追加 .html 后缀。


3.2 使用 Spring MVC 实现 URL 重写

如果没有使用 Nginx,可以通过 Spring MVC 自定义控制器来实现 URL 重写。

添加控制器代码
package com.example.demo;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;@Controller
public class WebController {@GetMapping("/{path:[^\.]*}") // 匹配路径中不包含"."的请求public String forwardToIndex() {return "forward:/index.html"; // 转发到 index.html}
}

Springboot包含前端项目controller

功能说明
  • 该控制器会将所有不包含文件后缀的请求(如 /about/contact)转发到 index.html
  • 这样,访问 http://localhost:8080http://localhost:8080/about 时,都会加载前端的 index.html

四、总结

通过将前端构建后的静态资源嵌入到 Spring Boot 项目中,可以显著简化交付和部署流程。为了提升用户体验,可以通过配置 Nginx 或 Spring MVC 实现 URL 优化。以下是整个流程的核心步骤总结:

  1. 前后端独立开发,前端打包输出静态资源文件。
  2. 将构建好的文件复制到 Spring Boot 的 src/main/resources/static/ 目录下。
  3. 运行后端项目,确保静态资源可以正常访问。
  4. 通过 Nginx 或 Spring MVC 优化路径访问。

按照本文的指导,你可以轻松实现一个既美观又高效的全栈项目交付方案。


通过上述内容,你就已经基本理解了这个方法,基础用法我也都有展示。如果你能融会贯通,我相信你会很强

Best
Wenhao (楠博万)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/63803.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RabbitMQ中的Topic模式

在现代分布式系统中,消息队列(Message Queue)是实现异步通信、解耦系统组件的重要工具。RabbitMQ 是一个广泛使用的开源消息代理,支持多种消息传递模式,其中 Topic 模式 是一种灵活且强大的模式,允许生产者…

可编辑99PPT | 智能工厂整体规划方案及实施细部方案

荐言分享:智能工厂是利用物联网、大数据、人工智能等先进技术,实现生产过程自动化、智能化和柔性化的现代工厂。本整体规划方案旨在通过整合信息技术、自动化技术、人工智能技术和物联网技术,构建一个高效、灵活、绿色、可持续的生产环境&…

Day13 用Excel表体验梯度下降法

Day13 用Excel表体验梯度下降法 用所学公式创建Excel表 用Excel表体验梯度下降法 详见本Day文章顶部附带资源里的Excel表《梯度下降法》,可以对照表里的单元格公式进行理解,还可以多尝试几次不同的学习率 η \eta η来感受,只需要更改学习率…

YOLOv8改进,YOLOv8引入Hyper-YOLO的MANet混合聚合网络+HyperC2Net网络

摘要 理论介绍 MANet 的目标是通过多种卷积操作的协同作用,提高特征提取能力,并加强梯度流动,从而提升模型在不同层次的特征表示和语义深度。MANet 结合了三种卷积变体,通过混合使用它们来提高视觉特征的多样性和信息流动性。 HyperC2Net 的主要目标是通过超图结构对多层次…

Nautilus源码编译傻瓜式教程二

Nautilus源码编译傻瓜式教程一 Nautilus编译 依赖项文件 接上文,点击小锤子进行编译后出现如下的错误提示 看这个报错,未找到文件或目录,再看前面的git地址是github就知道肯定是下载有问题,查找下Nautilus项目,发现在nautilus/build-aux/flatpak/org.gnome.Nautilus.json文件…

Java中使用四叶天动态代理IP构建ip代理池,实现httpClient和Jsoup代理ip爬虫

在本次爬虫项目中,关于应用IP代理池方面,具体完成以下功能: 从指定API地址提取IP到ip池中(一次提取的IP数量可以自定义更改) 每次开始爬虫前(多条爬虫线程并发执行),从ip池中获取一…

CEF127 编译指南 MacOS 篇 - 拉取 CEF 源码(五)

1. 引言 在完成了所有必要工具的安装和配置后,我们进入到获取 CEF 源码的阶段。对于 macOS 平台,CEF 的源码获取过程需要特别注意不同芯片架构(Intel 和 Apple Silicon)的区别以及版本管理。本文将详细介绍如何在 macOS 系统上获…

梳理你的思路(从OOP到架构设计)_设计模式Factory Method模式

目录 1、Factory Method模式 2、范例&#xff1a; Android FM(工厂)模式 3、Android里处处可见的FM模式的应用 1、Factory Method模式 誰來創建<T>的對象呢?例如&#xff0c; 剛才的Template Method模式內含一個EIT造形&#xff0c;那麼&#xff0c; 請問&#xff…

ESP8266 WiFi模块入门:搭建网络与测试实践

在物联网&#xff08;IoT&#xff09;应用中&#xff0c;设备联网是核心功能之一。而ESP8266串口WiFi ESP-01模块是一款低成本、功能强大的UART-WiFi透传模块&#xff0c;广泛应用于智能家居、工业控制等领域。本篇文章将从基础出发&#xff0c;讲解如何使用ESP8266模块进行WiF…

Java模拟Mqtt客户端连接Mqtt Broker

Java模拟Mqtt客户端基本流程 引入Paho MQTT客户端库 <dependency><groupId>org.eclipse.paho</groupId><artifactId>org.eclipse.paho.mqttv5.client</artifactId><version>1.2.5</version> </dependency>设置mqtt配置数据 …

springboot根据租户id动态指定数据源

代码地址 码云地址springboot根据租户id动态指定数据源: springboot根据租户id指定动态数据源,结合mybatismysql多数源下的事务管理 创建3个数据库和对应的表 sql脚本在下图位置 代码的执行顺序 先设置主数据库的数据源配置目标数据源和默认数据源有了主库的数据源&#xff…

C++简明教程(文章要求学过一点C语言)(3)

一、编程工具大揭秘——IDE 当我们准备踏入 C 编程的奇妙世界时&#xff0c;首先要认识一个重要的“魔法盒子”——集成开发环境&#xff08;IDE&#xff09;。IDE 就像是一个全能的编程工作室&#xff0c;它把我们写代码所需要的各种工具都整合到了一起&#xff0c;让编程这件…

达梦官方工具 SQLark数据迁移(oracle->达梦数据库)

应国产化需求需要,需将系统中涉及的各中间件替换成国产中间件,此文介绍了从Oracle迁移数据至达梦dm8的步骤,该文在windos环境下已验证测试过 1 SQLark介绍 SQLark是一款专为信创应用开发者设计的数据库开发和管理工具。它支持快速查询、创建和管理多种类型的数据库系统&#xf…

【JAVA】JAVA接口公共返回体ResponseData封装

一、JAVA接口公共返回体ResponseData封装&#xff0c;使用泛型的经典 例子 public class ResponseData<T> implements Serializable { /** * */ private static final long serialVersionUID 7098362967623367826L; /** * 响应状态码 */ …

AlipayHK支付宝HK接入-商户收款(PHP)

一打开支付宝国际版 二、点开商户服务 三、下载源码

nginx学习总结(不包含安装过程)

1. nginx常见配置 http服务上支持【若干虚拟主机】。每个虚拟主机对应一个server配置项&#xff0c;配置项里面包含该虚拟主机相关的配置。 server{listen 80 default;server_name www.yonqin.com;index index.html index.htm index.php;root /data/www;location ~ .*\.(gif|…

贪心算法在背包问题上的运用(Python)

背包问题 有n个物品,它们有各自的体积和价值,现有给定容量的背包,如何让背包里装入的物品具有最大的价值总和? 这就是典型的背包问题(又称为0-1背包问题),也是具体的、没有经过任何延伸的背包问题模型。 背包问题的传统求解方法较为复杂,现定义有一个可以载重为8kg的背…

【ArcGIS Pro微课1000例】0063:处理无人机数据(空三、生成DOM、DSM、DTM)

使用ArcGIS Pro 正射拼接处理无人机数据流程化工具,不需要额外产品许可的支持,只需要桌面是高级版许可即可支持。ArcGIS Pro处理无人机摄影测量数据主要内容有:空三、生成DOM、DSM、DTM。 文章目录 一、创建映射项目二、提交自由空三三、添加控制点优化四、提交产品生产一、…

人工智能ACA(四)--机器学习基础

零、参考资料 一篇文章完全搞懂正则化&#xff08;Regularization&#xff09;-CSDN博客 一、 机器学习概述 0. 机器学习的层次结构 学习范式&#xff08;最高层&#xff09; 怎么学 监督学习 无监督学习 半监督学习 强化学习 学习任务&#xff08;中间层&#xff0…

豆包MarsCode:小U的数字插入问题

问题描述 问题分析 问题的核心是找到将数字 b 插入到数字 a 的某个位置后&#xff0c;使形成的数字尽可能大。需要仔细分析以下几个要点&#xff1a; 1. 分析数字的特性 输入的两个数字&#xff1a; a 是一个正整数&#xff08;例如 76543&#xff09;。b 是一个非负整数&am…