最近学习了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"即可成功访问啦。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐