SpringBoot页面跳转访问css、js等静态资源引用无效解决.docx

【SpringBoot页面跳转访问css、js等静态资源引用无效解决】 解释：SpringBoot项目默认访问根目录有三个分别是： /resources ：系统默认的根路径 /static ：所有静态资源文件如js、css、jpg、html等文件是可以直接访问的 /templates ：此目录下的文件是不可以直接访问的，需要经过控制器才可以跳转的 在SpringBoot应用中，开发人员经常遇到一个常见问题，即在尝试访问页面时，CSS、JavaScript等静态资源引用失效。这通常是因为SpringBoot的默认资源配置导致的。在本篇文章中，我们将深入探讨这个问题的原因以及解决方案。 SpringBoot为开发者提供了一个快速开发的框架，它简化了许多配置，包括对静态资源的处理。在SpringBoot项目中，有三个默认的根目录用于存储不同的资源： 1. `/resources`：这是系统默认的根路径，一般用于存放项目的资源文件，如Java源码、配置文件等。 2. `/static`：这个目录专门用来存放所有可以直接被浏览器访问的静态资源，如JavaScript（js）、CSS样式表（css）、图片（jpg、png等）以及HTML页面。 3. `/templates`：这个目录下的文件不能直接被浏览器访问，它们通常用于存放模板引擎生成动态HTML页面所需的模板文件。这些文件需要通过控制器进行处理和转发才能被访问。 当遇到静态资源引用无效的问题时，我们可以按照以下步骤进行解决： 1. **添加模板引擎依赖**：SpringBoot默认支持Thymeleaf作为模板引擎，可以处理动态页面。为了使用Thymeleaf，我们需要在`pom.xml`或`build.gradle`文件中添加相应的依赖。例如，对于Maven项目，可以添加以下依赖： ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> ``` 2. **配置应用配置**：在`application.yml`或`application.properties`文件中，我们需要配置视图解析器（View Resolver）和静态资源的位置。对于YAML格式，配置如下： ```yaml mvc: view: prefix: /page/ suffix: .html resources: static-locations: classpath:/static/,classpath:/page/ ``` 这样，SpringBoot会知道去哪里寻找视图和静态资源。 3. **调整目录结构**：根据配置，我们需要将HTML页面放在`templates`目录下，而静态资源如CSS和JS文件应放在`static`目录下。 4. **引用资源的方式**：在HTML页面中，我们需要使用Thymeleaf的语法来引用资源。例如，引用CSS文件的方式应改为： ```html <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/> ``` 这里的`@{/css/bootstrap.min.css}`表示Thymeleaf会根据配置的`prefix`和`suffix`来生成实际的URL。 5. **控制器配置**：在SpringBoot的控制器类中，我们需要配置处理请求的方法。例如，一个简单的重定向到首页的配置可能如下： ```java @GetMapping("/") public String home() { return "index"; } ``` 这里，"index"是`templates`目录下对应的HTML模板文件名。 SpringBoot官方推荐使用模板引擎（如Thymeleaf、Freemarker等）而不是传统的JSP页面，因为模板引擎更易于集成，且与Spring Boot的约定优于配置理念相吻合。通过以上步骤，你应该能够成功解决SpringBoot项目中页面跳转访问CSS、JS等静态资源引用无效的问题。记住，理解SpringBoot的默认配置以及如何对其进行自定义是解决问题的关键。