web 开发-静态资源规则于定制化
# 170.web 开发-静态资源规则于定制化
本节课就动手实践静态资源目录
# 静态资源目录
在 4.7.1 章节中，文档是这样说：
Static Content
By default, Spring Boot serves static content from a directory called /static (or /public or /resources or /META-INF/resources) in the classpath or from the root of the ServletContext.
默认情况下，SpringBoot 支持静态资源访问，只需将资源放到这些目录即可：
- resources
- resources/static
- resources/public
- /META-INF/resources
然后访问项目根路径 + 静态资源名，就能访问到这些静态资源。我们知道 resources 目录打包时会放到类路径下，因此这些只要在类路径下有这些目录，就可以访问。
我们来实践下，新建这 4 个目录，并放一些图片：
重启，然后分别访问 4 个图片，均能访问：
# 访问原理
By default, resources are mapped on
/**, but you can tune that with the spring.mvc.static-path-pattern property. For instance, relocating all resources to /resources/** can be achieved as follows:spring.mvc.static-path-pattern=/resources/**1
原理：静态资源，默认映射的路径是 /**。当收到一个请求，先去找 Controller 看能不能处理，不能处理的所有请求又都交给静态资源处理器。静态资源也找不到则响应 404 页面
我们可以在 HelloController 类中加一个方法：
@RequestMapping("/1.jpg")
public String img() {
return "图片";
}
2
3
4
此时访问 localhost: 8888/1.jpg (opens new window)，就不是图片了，而是请求：
# 配置访问前缀和目录
除此之外，我们还可以配置静态资源的前缀，只需在加个配置：
spring.mvc.static-path-pattern=/resources/**
在后续的开发中，有可能一些资源得登录后才能访问，因此得配置拦截器；给静态资源加前缀后，也方便我们拦截器配置。
在 yml 中，可以这样配置：
spring:
mvc:
static-path-pattern: /res/**
2
3
以后我们访问静态资源的时候，得加上 res 前缀，这样才是静态资源请求。
配置后，重启，再访问，就可以访问图片了：
小结：访问路径为 当前项目路径 + static-path-pattern + 静态资源名
除了配置前缀，还能配置静态资源文件夹的名字：
You can also customize the static resource locations by using the spring.resources.static-locations property (replacing the default values with a list of directory locations). The root Servlet context path, "/", is automatically added as a location as well.
例如，我们在 resources 目录下新建 haha 目录，作为静态资源目录，并放一个图片进去，然后配置：
spring:
mvc:
static-path-pattern: /res/**
resources:
static-locations: classpath:/haha/
2
3
4
5
ps：
- 也可以添加多个目录，用逗号分隔即可
- 配置后，之前的静态资源目录就不生效了
重启，能访问图片：
# webjars
简单来说，webjars (opens new window) 技术，就是将一些常见的前端框架打成了 jar 包，然后我们可以在项目中引入该依赖
例如，引入 JQuery：
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.5.1</version>
</dependency>
2
3
4
5
可以看到其包结构：
可以看到，这是一个静态目录（/META-INF/resources），
因此我们访问：http://localhost: 8080/项目目录/webjars/jquery/3.5.1/jquery.js，就能访问到（注意要重启）
其他 webjars 同理，会自动映射 /webjars/**目录。
# 欢迎页
文档：
Spring Boot supports both static and templated welcome pages. It first looks for an index.html file in the configured static content locations. If one is not found, it then looks for an index template. If either is found, it is automatically used as the welcome page of the application.
SpringBoot 支持两种方式的欢迎页：静态和模板方式。
如果是第一种，则将 index.html 放到静态资源目录即可。如果没有，则会找 index 模板
我们在 resources/haha 目录下新建一个 index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Hi, PeterJXL</h1>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
注意，不可以配置静态资源的访问前缀，否则导致 index.html 不能被默认访问，这里先注释掉。
然后访问 localhost: 8888 (opens new window)：
# 图标 favicon.ico
文档：
As with other static resources, Spring Boot looks for a favicon.ico in the configured static content locations. If such a file is present, it is automatically used as the favicon of the application.
我们只需将该文件，放到静态资源目录即可。这里随便找个网站的图标，例如 百度 AI (opens new window) 的，通过浏览器控制台查找 favicon.ico 的请求，然后下载文件
由于浏览器缓存的问题，建议重启项目后，换个浏览器访问
# 源码
已将本文源码上传到 Gitee (opens new window) 或 GitHub (opens new window) 的分支 demo10，读者可以通过切换分支来查看本文的示例代码
