springboot访问templates下的html页面,css,js失效

Spring Boot 是一个非常适合构建微服务应用程序的 Java 框架，它为我们提供了诸如自动配置、自动装配等功能，使得开发者可以更加专注于业务代码的编写而不必花费大量时间和精力在繁琐的配置上。在 Spring Boot 中，我们可以使用 Thymeleaf 模板引擎来渲染我们的 HTML 页面，而且还可以方便地引入 CSS 文件和 JS 文件，使得我们的页面更加美观并增强用户交互体验。

但是有些开发者在使用 Spring Boot 访问 templates 下的 HTML 页面时，可能会遇到 CSS 和 JS 失效的情况，这是为什么呢？

首先，我们需要明确 Thymeleaf 模板引擎会将我们的 HTML 页面解析成可执行的 Java 代码，然后通过执行这段代码来生成最终的 HTML 页面，所以我们需要在头部添加以下代码来引入 CSS 和 JS 文件：

<!-- 引入 CSS 文件 -->
<link rel="stylesheet" th:href="@{/css/style.css}"/>

<!-- 引入 JS 文件 -->
<script th:src="@{/js/main.js}"></script>

其中，@{} 中的 “/” 表示根目录，th:href 和 th:src 是 Thymeleaf 的语法，表示将表达式的值填入到 href 和 src 中。

如果我们直接通过浏览器打开 HTML 页面，CSS 和 JS 是可以正常加载的，但是如果将 HTML 页面放在 Spring Boot 项目中作为一个模板来使用，我们需要将其放入到 templates 目录下，并且使用 Thymeleaf 模板引擎来进行渲染，因此我们需要按照以下方法来引入 CSS 和 JS：

<!-- 引入 CSS 文件 -->
<link rel="stylesheet" th:href="@{css/style.css}"/>

<!-- 引入 JS 文件 -->
<script th:src="@{js/main.js}"></script>

注意，这里的表达式中的 “/” 是不需要的，直接使用文件夹名和文件名即可。如果还是发现 CSS 和 JS 失效，可以开启浏览器的开发者工具，查看控制台中的错误信息，通常是 URL 地址不正确或者文件路径不正确的问题。此外，还要确保文件路径的大小写和文件名的大小写完全一致，否则也可能会出现 CSS 和 JS 失效的情况。

综上所述，Spring Boot 访问 templates 下的 HTML 页面时，CSS 和 JS 失效通常是因为路径不正确或者大小写不一致导致的，我们只需要按照正确的方法来正确引入 CSS 文件和 JS 文件即可。