SpringBoot 访问web中的静态资源

向右看齐 2022-01-30 01:19 435阅读 0赞

**总体来讲 SpringBoot 访问web中的静态资源，有两个方式：**

1、classpath 类目录 (src/mian/resource)

classpath 即 WEB-INF 下面的 classes 目录 ，在 SpringBoot  项目中是 src/main/resource 目录。

2、ServletContext 根目录下( src/main/webapp )

### 一、SpringBoot 访问web中的静态资源 ###

SpringBoot默认指定了一些固定的目录结构，静态资源放到这些目录中的某一个，系统运行后浏览器就可以访问到。

**1、SpringBoot 默认指定的可以存放静态资源的目录有哪些？**

*        classpath:/META-INF/resources/      \#\# 需创建/META-INF/resources/ 目录
 *         classpath:/resources/                        \#\# 需创建/resources/目录
 *         classpath:/static/                               \#\# 工具自动生成的static目录，也是用的最多的目录
 *         classpath:/public/                              \#\# 需创建/public/ 目录
 *         /                                     \#\# 指的是 src/main/webapp/ 需创建/webapp/ 目录

查看源码可以找到静态资源拦截的自动化的配置信息：在 WebMvcAutoConfiguration 类中的 addResourceHandlers方法。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 1][]

**2、在全局配置文件中自定义--修改这些默认的目录**

**注意：** 修改后，除配置的目录以外其他目录就不可以再访问静态资源了（SpringBoot 2.1.4 试了好像可以）

**方式一：配置文件修改**

YAML 文件：

server:
      port: 80
    spring:
      resources:
        static-locations:
          - classpath:resources
          - classpath:static
      mvc:
        static-path-pattern: /**

properties 文件

server.port=80
    spring.resources.static-locations=classpath:resources,classpath:static
    spring.mvc.static-path-pattern=/**

第一行配置表示定义资源位置，第二行配置表示定义请求 URL 规则。

**方式二：配置类修改**

@Configuration
    public class WebMVCConfig implements WebMvcConfigurer {
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            registry.addResourceHandler("/**").addResourceLocations("classpath:/static/","classpath:/aa");
        }
    }

访问的时候就需要写完整路径 http://127.0.0.1:8080/static/abc23.jpg。

**3、SpringBoot 默认的首页是放在任一个静态资源目录下的index.html   **

**4、SpringBoot 默认的web页面图标是放在任一静态资源目录下的favicon.ico**

**index.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h4>SpringBoot访问web中的静态资源</h4>
        <img src="abc23.jpg" width="300px" height="250px">
    </body>
    <script src="jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function () {
            alert("hello 首页！");
        })
    </script>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 2][]    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 3][]

将静态资源放在上面指定的目录中，即可访问 index.html

### 二、把静态资源打成jar包引入系统后供访问 ###

常用的静态资源jar包的maven依赖网站：[http://www.webjars.org ][http_www.webjars.org]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 4][]

把依赖配置到maven的pom.xml中，就可以在网站根目录/webjars/jquery/1.12.4/jquery.js访问到资源！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 6][]

index.html 正常引用 js，也正常访问到。

参考文章：[Spring Boot 静态资源访问原理解析][Spring Boot]

ends ~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70]: /images/20220130/4c0ab8b3114a4b8296ea2c02779da66a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 1]: /images/20220130/e6d0d93360a14dc4b0f536db194204aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190518222429806.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 3]: /images/20220130/e120f2fc96774dc0b09a0b1916586357.png
[http_www.webjars.org]: http://www.webjars.org
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 4]: /images/20220130/7456020694464174803e1d2c4896b8a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 5]: /images/20220130/f6c3954f9bf14e8aaf10e9b1b6099087.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 6]: /images/20220130/4c40becdc8324eab9e526cda29b78e97.png
[Spring Boot]: https://www.cnblogs.com/hujunzheng/p/9682960.html