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,读者可以通过切换分支来查看本文的示例代码