写在前面🔥

上几期，我们重点讲解了Spring Boot集成Swagger-UI实现在线API文档及美化UI界面，而这期，在 Web 应用中会都会涉及到大量的静态资源，例如图片、JS、CSS 和 HTML 等。我们知道，Spring MVC 导入静态资源文件时，就需要配置静态资源的映射，但在 Spring Boot 中则不再需要进行此项配置，因为 SpringBoot 已经默认完成了这一工作。

接下来我会重点给大家介绍Spring Boot如何进行静态资源的配置及使用，这将又会是干货满满的一期，全程无尿点不废话只抓重点教，具有非常好的学习效果，拿好小板凳准备就坐！希望学习的过程中大家认真听好好学，学习的途中有任何不清楚或疑问的地方皆可评论区留言或私信，bug菌将第一时间给予解惑，那么废话不多说，直接开整！Fighting！！

1.环境说明🔥

本地的开发环境：

开发工具：IDEA 2021.3
JDK版本： JDK 1.8
Spring Boot版本：2.3.1 RELEASE
Maven版本：3.8.2

2.前言🔥

在 Web 应用中会涉及到大量的静态资源，例如图片、JS、CSS 和 HTML 等。我们知道，Spring MVC 导入静态资源文件时，需要配置静态资源的映射；但在 Spring Boot 中则不再需要进行此项配置，因为 SpringBoot 已经默认完成了这一工作。

Spring Boot 默认为我们提供了以下 3 种静态资源映射规则，分别如下：

WebJar s 映射
默认资源映射
静态首页（欢迎页）映射

由此，我分别以这三种静态资源映射规则逐一进行讲解，辅助大家理解及运用。

3.正文🔥

3.1 WebJars 映射

3.1.1 WebJars概念

WebJars的出现其实就是为了解决Spring Boot 项目以 JAR 包的形式进行部署的且不存在 webapp 目录而生，它可以完美解决这个问题，实际也就是以jar包的形式去引入 jQuery，Backbone.js 和 Bootstrap 等。

WebJars 可以将 Web 前端资源（JS，CSS 等）打成一个个的 Jar 包，然后将这些 Jar 包部署到 Maven 中央仓库中进行统一管理，当 Spring Boot 项目中需要引入 Web 前端资源时，只需要从 WebJars 官网中找到所需资源的 pom 依赖，将其导入到项目中即可。

3.1.2 WebJars举例

我给大家举个例子，我们先从WebJars官网中随便引入一个Web 前端资源，比如我们引入如下的[ AjaxQ ],找到其对于的maven依赖，添加到我们的pom配置文件中。

3.1.3 引入AjaxQ

	
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>AjaxQ</artifactId>
    <version>0.0.2</version>
</dependency>

3.1.4 Jar 包结构

我们都知道，SpringBoot启动会默认加载很多xxxAutoConfiguration类(自动配置类)
其中SpringMVC的大都数功能都集中在WebMvcAutoConfiguration类中，根据条件ConditionalOnxxx注册类对象，从其中的addResourceHandlers()方法中有一段，写的特别清楚。

if(!registry.hasMappingForPattern("/webjars/**")){
        this.customizeResourceHandlerRegistration(
                registry.addResourceHandler(new String[]{"/webjars/**"})
                        .addResourceLocations(new String[]{"classpath:/META-INF/resources/webjars/"})
                        .setCachePeriod(this.getSeconds(cachePeriod))
                        .setCacheControl(cacheControl)
                        .setUseLastModified(this.resourceProperties.getCache().isUseLastModified()));
}

通过以上源码可知，WebJars 的映射路径为[ /webjars/** ]，即所有访问[/webjars/**]的请求，都会去[ classpath:/META-INF/resources/webjars/ ]查找 WebJars前端资源。

所以我们顺着路径在本项目中找，大家请看：

3.1.5 项目启动测试

启动 Spring Boot 项目，浏览器访问[ http://localhost:8080/webjars/jquery/3.6.0/jquery.js ]访问 jquery.js，结果如下图。

成功获取到了jquery 3.6.4.js源码，证明所有访问[/webjars/**]的请求都会去[ classpath:/META-INF/resources/webjars/ ]查找 WebJars前端资源。

再测试一下，我们引入的AjaxQ前端资源们是否也能获取到。

启动 Spring Boot 项目，浏览器访问[ http://localhost:8080/webjars/AjaxQ/0.0.2/ajaxq.js ]访问 AjaxQ.js，结果如下图。

也是成功获取到了AjaxQ.js源码。

3.2 默认资源映射

对于SpringBoot而言，它对静态资源映射提供了默认配置。

当访问项目中的任意资源（即“/**”）时，Spring Boot 会默认从以下路径中查找资源文件（优先级依次降低），具体如下：

目录	优先级
`classpath:/META-INF/resources/`	最高
`classpath:/resources/`	第二
`classpath:/static/`	第三
`classpath:/public/`	最低

这些路径又被称为静态资源文件夹，它们的优先级顺序为：classpath:/META-INF/resources/ > classpath:/resources/ > classpath:/static/ > classpath:/public/

当我们请求某个静态资源（即以“.html”结尾的请求）时，Spring Boot 会先查找优先级高的文件夹，再查找优先级低的文件夹，直到找到指定的静态资源为止。

此时，我们就来做个小测试，在 resources 目录下分别新建 public 、 resources 、 static 三个目录，并分别放入 1.jpg 、 2.jpg 、 3.jpg三张图片，演示截图如下：

浏览器分别访问以下三个请求：

http://localhost:8080/1.jpg
http://localhost:8080/2.jpg
http://localhost:8080/3.jpg

均能正常访问相应的图片资源，那么说明， Spring Boot 默认会挨个从 resources 、static 、 public 里面找是否存在相应的资源，如果有则直接返回，没有则返回404。

3.3 静态首页（欢迎页）映射

3.3.1 概述

静态资源文件夹下的所有 index.html 被称为静态首页或者欢迎页，它们会被被[ /** ]映射，换句话说就是，当我们访问[ / ]或者[ /index.html ]时，都会跳转到静态首页（欢迎页）。

注意：访问静态首页或欢迎页时，其查找顺序也遵循默认静态资源的查找顺序，即先查找优先级高的目录，在查找优先级低的目录，直到找到 index.html 为止。

3.3.2 创建index.html

接下来，我们在项目的 src/main/resources/public 目录中创建一个 index.html，index.html代码如下，仅供参考。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <p>这是项目首页</p>
    <h3>我是bug菌，一个爱分享技术的小博主！</h3>
</body>
</html>