SpringBoot中Thymeleaf访问不到静态资源的问题

本文详细介绍了在SpringBoot中遇到的静态资源加载问题,如CSS和JS无法正常引入。通过分析项目结构和配置,解释了SpringBoot访问静态资源的原理,并提供了两种解决方案:一是修改静态资源匹配路径,二是调整HTML中引用资源的路径。通过实例说明了正确配置和路径写法,使读者理解SpringBoot如何处理静态资源请求。最后,探讨了默认路径和自定义路径的区别,强调了路径前缀的重要性。
摘要由CSDN通过智能技术生成

最近学习了springboot,跟着视频做了了个项目,用到了thymeleaf。就在我跟着视频一步一步做的时候,我发现我的页面怎么都加载不出css和js这些静态资源。


1.失败案例

举例:
1.这是项目的html网页为止位置:login.html,直接就是在resources的templates文件夹下。在这里插入图片描述
2.这是静态资源的位置:style.css在resources的static文件夹下
在这里插入图片描述
3.这是html中静态资源路径的写法:

    <link href="css/style.css" rel="stylesheet">

(没有配置springboot的静态资源匹配路径)
4.结果:
login.html访问不到style.css

2.改进

1.在springboot中配置静态资源匹配路径(后面会讲其实可以不配):

spring:
  mvc:
    static-path-pattern: /static/**

2.改变访问静态资源路径的写法:

    <link href="/static/css/style.css" rel="stylesheet">
    或:
    <link href="../static/css/style.css" rel="stylesheet">  
    都是一个意思,一个是绝对路径一个是相对路径

3.结果成功访问到style.css资源

3.原理结论

1.springboot访问静态资源的方式为:将访问路径拿去与静态资源匹配路径匹配,若匹配成功,则会将访问路径拼接上静态资源类路径形成最终路径然后用最终路径去访问服务器的静态资源。
其中:

  • 访问路径即html中访问静态资源的路径href=“/static/css/style.css”
  • 静态资源匹配路径默认为/**,后由我们改为:
spring:
  mvc:
    static-path-pattern: /static/**
  • 静态资源类路径在springboot源码中规定了四个:在这里插入图片描述

2.按照上面的访问方式,springboot会拿/static/css/style.css去与/static/**匹配,结果是匹配成功(因为/static下的所有路径都能与/static/**匹配)。接下来springboot会拿后半段的css/style.css拼接上类路径/static/得到最终访问路径:/static/css/style.css,易的这个路径确实可以访问到style.css资源。

3.扩展,还记不记得springboot是有默认匹配路径的?即/**(意思是所有请求都能匹配上)。那为什么我们最开始的href=“css/style.css"匹配不上呢?原因很简单,因为这个路径最开头没有“/”。将其改为href=”/css/style.css"即可成功访问啦。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值