SpringBoot-web开发(一): 静态资源的导入(源码分析)

向右看齐 2022-12-09 04:57 118阅读 0赞

--------------------

### 目录 ###

*  方式一：通过WebJars
 *   *  1. 什么是webjars?
     *  2. webjars的使用
     *  3. webjars结构
     *  4. 解析源码
     *  5. 测试访问
 *  方式二：放入静态资源目录
 *   *  1. 源码分析
     *  2. 测试访问
 *  自定义资源路径
 *  总结

--------------------

> 在web开发中，最基本的一项就是**导入静态资源**，那么在springboot中怎么导入静态资源呢？答案就在源码中，接下来我们来分析分析~

首先在IDEA中连按两次`shift`键搜索`WebMvcAutoConfugure`类，这是的webMvc的自动配置类，关于springboot静态资源处理的方法就在其中  
![image-20200921192255315][]  
我们往下滑，可以找到一个webMvc自动配置适配类`WebMvcAutoConfigurationAdapter`  
![image-20200921192234170][]  
其中有个`addResourceHandlers`方法，这就是我们springboot项目添加处理静态资源的方法

我们接下来分析一下这段代码，我们会首先解析橙色部分代码，再解析蓝色部分代码，分别对应导入静态资源的两种方法！  
![image-20200921191250400][]

--------------------

# 方式一：通过WebJars #

> 在`addResourceHandlers`方法中，上图标橙色的代码，里面提到了一个`webjars`的东西，这就是springboot导入静态资源的方式一，这是什么呢？

if (!registry.hasMappingForPattern("/webjars/**")) { 
       customizeResourceHandlerRegistration(registry.addResourceHandler("/webjars/**")
             .addResourceLocations("classpath:/META-INF/resources/webjars/")
             .setCachePeriod(getSeconds(cachePeriod)).setCacheControl(cacheControl));
    }

## 1. 什么是webjars? ##

**参考博文**：[https://www.jianshu.com/p/ca568526f0bd][https_www.jianshu.com_p_ca568526f0bd]  
 [https://blog.coding.net/blog/spring-static-resource-process][https_blog.coding.net_blog_spring-static-resource-process]

> 通常对于`web开发`而言，我们常常需要导入一些静态资源，然而像`js`、`css`、`images`等静态资源版本管理是比较混乱的
> 
>  *  比如`Jquery`、`Bootstrap`、`Vue.js`等各个前端框架所依赖的各自组件的版本都不尽相同
>  *  平时我们是将这些Web资源拷贝到Java的目录下，这种通过人工方式拷贝可能会产生版本误差，拷贝版本错误，前端页面就无法正确展示
> 
> 所以，是否有一种像后端管理`jar`包一样的解决方案呢？这就引入了今天要介绍`WebJars`

*  `WebJars`是以Jar形式为Web项目提供资源文件，然后借助Maven这些依赖库的管理，保证这Web资源版本唯一性
 *  `Webjars`多应用于基于`Spring Boot`创建微服务项目，需要打包所有资源为可执行的jar

## 2. webjars的使用 ##

关于`WebJars`资源，官网：[https://www.webjars.org/][https_www.webjars.org]  
![image-20200921121150290][]  
我们到该网站上找到自己所需资源，每个资源都有自己的maven坐标，在自己的工程中添加入maven依赖，即可直接使用这些资源了。  
比如这里，导入`jquery`的maven依赖，同时可以在左边查看导入的`jquery`资源  
![image-20200921121830938][]

## 3. webjars结构 ##

> 开始使用前，我们看下`Jquery`的`webjars`，了解下`webjars`包的目录结构

META-INF
        └─maven
            └─org.webjars
                └─jquery
                    └─pom.properties
                    └─pom.xml
        └─resources
            └─webjars
                └─jquery
                    └─3.5.1
                           └─(静态文件及源码)

## 4. 解析源码 ##

对以下代码进行分析：

//如果静态资源符合"/webjars/**"的格式
    if (!registry.hasMappingForPattern("/webjars/**")) { 
        //添加资源注册到"/webjars/**"
       customizeResourceHandlerRegistration(registry.addResourceHandler("/webjars/**")
             .addResourceLocations("classpath:/META-INF/resources/webjars/")
             .setCachePeriod(getSeconds(cachePeriod)).setCacheControl(cacheControl));
    }

如果静态资源名符合`/webjars/**`，则映射到`classpath:/META-INF/resources/webjars/`路径下去寻找，添加资源注册到`/webjars/**`路径，这两个路径就是一个对应关系：

/webjars/**  --->  classpath:/META-INF/resources/webjars/

以后直接通过该注册路径的格式通过浏览器进行访问，就可以直接访问到静态资源；

而我们`Webjars`所有资源都符合这个路径结构，所以只需要通过maven的方式引入这个坐标，都是可以找到识别的，这就是我们导入静态资源的方式一  
![image-20200921122039544][]

## 5. 测试访问 ##

接下来我们启动一下，测试能否访问到静态资源，源码中规定了访问格式`/webjars/**`就对应`classpath:/META-INF/resources/webjars/**`路径，这里是：

http://localhost:8080/webjars/jquery/3.5.1/jquery.js

就可以看到导入的`juery`的js静态文件  
![image-20200921123135697][]

--------------------

# 方式二：放入静态资源目录 #

> 在`addResourceHandlers`方法中，上图标蓝色的代码，是springboot导入静态资源的第二个方式  
> ![image-20200921191250400][]

## 1. 源码分析 ##

> 接下来我们通过源码分析找到静态资源目录

//获取staticPathPattern
    String staticPathPattern = this.mvcProperties.getStaticPathPattern();
    //如果静态资源路径符合staticPathPattern的格式
    if (!registry.hasMappingForPattern(staticPathPattern)) { 
        customizeResourceHandlerRegistration(registry.addResourceHandler(staticPathPattern)
                                             .addResourceLocations(getResourceLocations(this.resourceProperties.getStaticLocations()))
                                             .setCachePeriod(getSeconds(cachePeriod)).setCacheControl(cacheControl));
    }

同样，首先获取了`staticPathPattern`，然后添加资源注册到该路径，那么这个路径是什么呢？

我们点入`getStaticPathPattern`  
![image-20200921194643300][]  
再点入`staticPathPattern`  
![image-20200921194714793][]  
发现了这个路径就是`/**`：也就是我们通过`/**`这个格式的url访问，都可以访问到静态资源，那么这个路径映射到的真实路径是什么呢?

点击代码中的`getStaticLocations()`，可以看到四个路径  
![image-20200921230923841][]

"classpath:/META-INF/resources/":就是上述的webjars
    "classpath:/resources/":reources目录下的resources目录，不存在自己新建
    "classpath:/static/":resources目录下的static目录
    "classpath:/public/":resources目录下的public目录，不存在自己新建

`resources`、`static`、`public`目录位置在项目中的位置如下图所示  
![image-20200921200824407][]  
`META-INF/resources`目录就是导入webjars资源的目录

## 2. 测试访问 ##

> 我们在静态目录之一`public`目录下，新建一个静态`1.js`文件
> 
> ![image-20200921203423657][]

hello

然后我们启动主程序进行测试

访问`localhost:8080/1.js`，成功显示了我们的静态资源  
![image-20200927112501815][]

# 自定义资源路径 #

> 在`addResourceHandlers`方法的最开始，有这样一个判断

//如果静态资源已经被自定义
    if (!this.resourceProperties.isAddMappings()) { 
        logger.debug("Default resource handling disabled");
        return;
    }

可以在`application.properties`中自定义静态资源的路径，默认是`/**`

spring.mvc.static-path-pattern=/zsr/**

一般不建议这么做，设置了上述的方式二就失效了（除非显式定义为`/**`）

--------------------

# 总结 #

> SpringBoot有四个静态资源目录，在SpringBoot中导入静态资源，只需要将其放在四个静态资源目录中的任意一个即可！

`classpath:/META-INF/resources/`：webjars资源的目录
    `classpath:/resources/`：reources目录下的resources目录，不存在自己新建
    `classpath:/static/`：resources目录下的static目录
    `classpath:/public/`：resources目录下的public目录，不存在自己新建

归根到底，方式一本质上和方式二是一种方式，通过webjars引入的资源也符合SpringBoot规定的静态资源目录形式；

*  通过webjars，`localhost:8080/webjars/**`格式的所有请求，映射到`classpath:/META-INF/resources/webjars/`（webjars资源结构目录）寻找并显示；
 *  通过放入静态资源目录，`localhost:8080/**`格式的所有请求，都映射这四个静态资源目录寻找并显示

我们可以进行测试，当有多个同名静态文件存在上述不同目录中时，优先级：`resources`>`static`>`public`

此外，我们还可以自定义静态资源路径，但一般不建议这样做

--------------------

[image-20200921192255315]: /images/20221123/a1291a9bfcfa40268c4042cee39f39ca.png
[image-20200921192234170]: /images/20221123/79b532dadd9d40bfae31239323a7b0e5.png
[image-20200921191250400]: /images/20221123/d22fb52eba004f7cb821da72795fd547.png
[https_www.jianshu.com_p_ca568526f0bd]: https://www.jianshu.com/p/ca568526f0bd
[https_blog.coding.net_blog_spring-static-resource-process]: https://blog.coding.net/blog/spring-static-resource-process
[https_www.webjars.org]: https://www.webjars.org/
[image-20200921121150290]: /images/20221123/03a81f6a4cb64dddbe2d0fc9cd2b15e7.png
[image-20200921121830938]: /images/20221123/577e7bb0ebb84d43a7519961565cc651.png
[image-20200921122039544]: /images/20221123/86582ddaa24d462da32b49b2863d5ebb.png
[image-20200921123135697]: /images/20221123/f361ac708ddc4c63b29f2e7faeeacc3b.png
[image-20200921194643300]: /images/20221123/8853cd1c0cb64e8fa99ef2d0fc1860ff.png
[image-20200921194714793]: /images/20221123/dd4fdb32349b406a817a2cbd94f102af.png
[image-20200921230923841]: /images/20221123/138b3962e76a4a298e4062792b927830.png
[image-20200921200824407]: /images/20221123/025937c220b44c3cb3f5898bfa61a5d1.png
[image-20200921203423657]: /images/20221123/3164a4b0cf7f429fa70cedd4c86f2e82.png
[image-20200927112501815]: /images/20221123/70fafcb8234e4dc5be58a57ef415ea87.png