对静态资源的映射

在web开发中,对静态资源映射是必不可少的,而所谓的静态资源映射,通俗来说,就是给项目导入图片,js,css等资源,同时可以进行访问。

 

首先我们来看一下新建好的项目目录结构:

springboot程序中静态文件的相对路径怎么表示 springboot静态文件映射_静态资源映射

我们要关注的就是resource文件夹中各个路径,现在是项目初始化时候静态资源存放的位置,而我们来介绍一下static和templates两个文件夹先:

  • static保存所有的静态资源,比如:js,css,images。
  • templates保存所有的模板页面,比如Spring Boot默认jar包使用的嵌入式的tomcat,默认不支持JSP页面;还有可以使用模板引擎(freemarker,thymeleaf之类的)

 

 

而spring boot中默认的静态资源映射应该为:

  • classpath:/META-INF/resources
  • classpath:/resources
  • classpath:/static
  • classpath:/public

对应于项目中是未创建的文件夹,我来创建一下:

springboot程序中静态文件的相对路径怎么表示 springboot静态文件映射_jquery_02

其中上面的几个静态资源的映射路径的优先级是:”/META-INF/resources” 大于/resources” 大于/static” 大于/public”

 

(1)然后我在路径/META-INF/resources中导入部分静态资源:

springboot程序中静态文件的相对路径怎么表示 springboot静态文件映射_webjars_03

要访问其中的资源feather.min.js(假设),只需要访问路径http://localhost:8080/asserts/js/feather.min.js即可:

springboot程序中静态文件的相对路径怎么表示 springboot静态文件映射_静态资源_04

 

 

(2)而spring boot也十分友好的建立的欢迎页(也就是我们访问该网址时的初始界面),我们只需要将欢迎页命名为index.html,然后将它放在静态资源文件夹下,访问localhost:8080/即可得到:

springboot程序中静态文件的相对路径怎么表示 springboot静态文件映射_静态资源_05

springboot程序中静态文件的相对路径怎么表示 springboot静态文件映射_jar_06

 

 

(3)如果我们想修改网址的图标,即:

springboot程序中静态文件的相对路径怎么表示 springboot静态文件映射_静态资源_07

中红圈中图标,也只需要将图标图片命名为favicon.ico导入到静态资源文件夹下即可。

 

 

(4)如果我们想要修改静态资源文件夹的位置的话,我们仅需要在配置文件中加入:

spring.resources.static-locations=classpath:/XXXX/,classpath:/YYYY/

要注意的是其中可以加入很多条路径,每条路径加个逗号区分即可,而原本默认的静态资源文件夹的那些文件会失效

 

 

 

补充:

  由于spring boot是以jar打包的方式存储,而如何以jar包方式(webjars)引入静态资源,则我们需要考虑的。

 

  以前导入webjars,比如jquery,bootstrap等前端框架都是直接放在web.app文件夹中即可,而现在以jar包方式导入的话,我们则只需要导入相关依赖即可,我们上webjars官网,观察:

                             

springboot程序中静态文件的相对路径怎么表示 springboot静态文件映射_jquery_08

比如导入jquery,我们就仅需要将里面maven中的依赖注入到pom文件中:

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.3.1-1</version>
</dependency>

然后我们观察依赖:

springboot程序中静态文件的相对路径怎么表示 springboot静态文件映射_静态资源映射_09

所有的webjars都可以直接去classpath:/META-INF/resource/webjars/下直接寻找,比如我们要访问jquery.js只需要访问localhost:8080/webjars/jquery/3.3.1-1/jquery.js即可:

springboot程序中静态文件的相对路径怎么表示 springboot静态文件映射_jquery_10