Springboot 静态文件两种引入方式

博客介绍了Thymeleaf模式和非Thymeleaf模式的配置方法。Thymeleaf模式需在依赖中引入,通过controller层转向view层,在yml中做相应配置;非Thymeleaf模式要去掉依赖,删除controller指向view层,yml配置可实现直接访问根目录下text文件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.thymeleaf 模式

依赖中引入

<!-- 渲染静态页面 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

---------可选配置--------

如果你有

WebMvcConfigurationSupport 的一些类引用. 你需要放行他们

如果你引用了 springSecurity

 你也需要放行他们

thymeleaf 需要通过controller层转向view 层  

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

/**
 * @ClassName:
 * @Descripton:
 * @Author: sansy
 * @Date: 2019/5/16 10:12
 * @Version: 2.0
 */
@RestController
public class IndexController {
    @RequestMapping(value = "/index", method = RequestMethod.GET)
    public ModelAndView index() {
        System.out.println("/index进入controller控制器");
        ModelAndView mav = new ModelAndView();
        mav.setViewName("index");
        return mav;
    }
    @RequestMapping(value = "/home", method = RequestMethod.GET)
    public ModelAndView home() {
        System.out.println("/home进入controller控制器");
        ModelAndView mav = new ModelAndView();
        mav.setViewName("index");
        return mav;
    }
    @RequestMapping(value = "/error", method = RequestMethod.GET)
    public ModelAndView error() {
        System.out.println("/error进入controller控制器");
        ModelAndView mav = new ModelAndView();
        mav.setViewName("index");
        return mav;
    }
    @RequestMapping(value = "/login", method = RequestMethod.GET)
    public ModelAndView login() {
        System.out.println("/login进入controller控制器");
        ModelAndView mav = new ModelAndView();
        mav.setViewName("index");
        return mav;
    }
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public ModelAndView indexs() {
        System.out.println("/ 进入controller控制器");
        ModelAndView mav = new ModelAndView();
        mav.setViewName("index");
        return mav;
    }
    @RequestMapping(value = "/404", method = RequestMethod.GET)
    public ModelAndView error404() {
        System.out.println("/404 进入controller控制器");
        ModelAndView mav = new ModelAndView();
        mav.setViewName("index");
        return mav;
    }
}

yml 做如下配置

构架这样构架

 

===========================================================================

非thymeleaf 模式

首先去掉依赖

删除controller 的 指向 view 层

如果你想带控制器也是可以的   (带的话 指向index. 不带的话 默认指向index .可以理解成一个绝对路径,一个相对路径)

yml 文件中 这样配置  是为了能够直接访问 根目录下的text文件 

构架如下

完成.

如有疑问,加我微信,共同解决,共同进步

<think>我们正在处理用户在SpringBoot项目中引入CSS文件到HTML页面的问题。根据引用资料,我们需要区分HTML文件存放的位置(static目录还是templates目录)以及如何正确引用。关键点总结:1.静态资源(如CSS、JS、图片)应放在`src/main/resources/static`目录下。例如,CSS文件可以放在`static/css`文件夹中。2.HTML文件有两种存放位置:-如果放在`static`目录下(比如`static`下的某个子目录),那么可以直接像传统web项目一样使用相对路径引用。-如果放在`templates`目录下(通常用于模板文件,如Thymeleaf、Freemarker等),则需要使用模板引擎的语法来引用,不能使用普通的相对路径。根据引用[2]和[4]:当HTML文件在templates目录下时,直接引入CSS会失效。需要两个步骤:a.确保静态资源在static目录下。b.在HTML中使用模板引擎的语法(如Thymeleaf)来引用。引用[5]给出了一个使用Thymeleaf的示例:-在HTML头部添加命名空间:`xmlns:th="http://www.thymeleaf.org"`-使用`th:href`来引用CSS:`<linkth:href="@{~/static/css/empower.css}"rel="stylesheet">`注意:在Thymeleaf中,`@{}`用于处理URL,`~`表示上下文路径(可以省略,因为SpringBoot默认上下文是根路径)。所以也可以写成:`th:href="@{/css/empower.css}"`(假设CSS文件放在static/css目录下)。另外,引用[3]也指出:静态资源放在static下,HTML放在templates下,这是SpringBoot的默认扫描路径。引用[5]还特别提醒:不要使用`@RestController`来返回HTML页面,因为`@RestController`会将返回结果作为字符串直接输出,而不是渲染视图。应该使用`@Controller`。因此,解决方案如下:1.将CSS文件放在`src/main/resources/static/css`目录下(假设CSS文件名为styles.css)。2.将HTML文件放在`src/main/resources/templates`目录下。3.在HTML文件中使用Thymeleaf模板引擎来引入CSS(需要添加Thymeleaf命名空间并使用`th:href`)。4.使用`@Controller`注解的控制器来返回该HTML视图。示例:HTML文件(位于templates目录,例如index.html):```html<!DOCTYPEhtml><htmllang="en"xmlns:th="http://www.thymeleaf.org"><head><metacharset="UTF-8"><title>Title</title><linkth:href="@{/css/styles.css}"rel="stylesheet"></head><body><h1>Hello,SpringBoot!</h1></body></html>```控制器示例:```java@ControllerpublicclassMyController{@GetMapping("/")publicStringindex(){return"index";//返回templates/index.html}}```如果用户没有使用模板引擎,而是将HTML放在static目录下,那么可以直接使用相对路径引入,但这样就不能使用动态模板功能了。所以,根据用户需求,我们推荐使用模板引擎(如Thymeleaf)的方式,因为这样更灵活,且符合SpringBoot对模板文件的管理。相关问题:1.在SpringBoot中,如何配置静态资源的访问路径?2.除了Thymeleaf,SpringBoot还支持哪些模板引擎?如何配置?3.如何解决SpringBoot中静态资源访问不到的问题?</think>### Spring Boot中HTML引入CSS文件的正确方法 在Spring Boot项目中,正确引入CSS文件取决于HTML文件的存放位置和是否使用模板引擎。以下是详细解决方案: #### 1. **HTML文件位于`static`目录(纯静态资源)** 当HTML文件放在`src/main/resources/static`目录时,直接使用传统方式引入: ```html <!DOCTYPE html> <html> <head> <!-- 直接使用相对路径 --> <link rel="stylesheet" href="css/styles.css"> </head> <body>...</body> </html> ``` - ✅ 文件结构: ``` src/main/resources/ └── static/ ├── css/styles.css └── index.html ``` #### 2. **HTML文件位于`templates`目录(需模板引擎)** 当使用Thymeleaf等模板引擎时(文件在`src/main/resources/templates`),必须通过模板语法引入[^3][^5]: ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <!-- 添加命名空间 --> <head> <!-- 使用Thymeleaf的URL语法 --> <link th:href="@{/css/styles.css}" rel="stylesheet"> </head> <body>...</body> </html> ``` - ✅ 文件结构: ``` src/main/resources/ ├── static/ │ └── css/styles.css └── templates/ └── index.html ``` #### 3. **关键注意事项** - **控制器注解**:返回HTML视图的控制器必须使用`@Controller`而非`@RestController`[^5]: ```java @Controller // 正确 public class MyController { @GetMapping("/") public String home() { return "index"; // 返回templates/index.html } } ``` - **路径原则**: - `@{/css/...}`中的`/`指向`static`目录根路径 - 无需包含`static`字眼(Spring Boot自动映射) - **缓存问题**:开发阶段建议关闭缓存(`application.properties`): ```properties spring.thymeleaf.cache=false ``` #### 4. **常见问题解决** - **404错误**: 1. 确认CSS文件在`static/css`目录下 2. 检查是否误用`@RestController` 3. 清除浏览器缓存(强制刷新Ctrl+F5) - **路径错误示例**: ```html <!-- 错误:多写了static目录名 --> <link th:href="@{/static/css/styles.css}" ...> ❌ ``` > **总结选择方案**: > - 纯静态页面 → 放`static`目录 + 传统`<link>`引入 > - 动态模板页面 → 放`templates`目录 + Thymeleaf语法`th:href="@{/css/...}"`
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值