SpringBoot的静态资源与Thymeleaf模板
静态资源
通过webjars访问
webjars资源网:https://www.webjars.org/
通过该网站导入的meven依赖会呈现固定结构。
以jQuery为例:
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>jquery</artifactId>
<version>3.6.0</version>
</dependency>
导入的依赖为如下结构:
浏览器页面可以通过/webjars路径替代该文件路径可以访问路径下的资源:
通过资源路径访问
SpringBoot有默认的资源路径,在该文件夹目录下的所有资源可以直接访问:
访问测试:
扫描优先级
在SpringBoot中扫描静态资源目录扫描优先级为:
resources > static > public
也就是说当相同名字的资源在多个目录下存在时,会优先访问扫描优先级高的资源。
自定义资源路径
通过配置文件自定义资源路径:
spring:
mvc:
static-path-pattern:
注意,自定义资源路径设置后,默认的资源路径将会失效。
Thymeleaf模板引擎
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
拓展
通过Ctrl+N快捷键查找类:ThymeleafPropertise
所有在SpringBoot框架集合中导入的模块都会有一个Propertise文件为配置文件!
可以看到如下视图解析器代码:
public class ThymeleafProperties {
private static final Charset DEFAULT_ENCODING;
public static final String DEFAULT_PREFIX = "classpath:/templates/";
public static final String DEFAULT_SUFFIX = ".html";
private boolean checkTemplate = true;
private boolean checkTemplateLocation = true;
private String prefix = "classpath:/templates/";
private String suffix = ".html";
private String mode = "HTML";
private Charset encoding;
private boolean cache;
private Integer templateResolverOrder;
private String[] viewNames;
private String[] excludedViewNames;
private boolean enableSpringElCompiler;
private boolean renderHiddenMarkersBeforeCheckboxes;
private boolean enabled;
private final ThymeleafProperties.Servlet servlet;
private final ThymeleafProperties.Reactive reactive;
public ThymeleafProperties() {
this.encoding = DEFAULT_ENCODING;
this.cache = true;
this.renderHiddenMarkersBeforeCheckboxes = false;
this.enabled = true;
this.servlet = new ThymeleafProperties.Servlet();
this.reactive = new ThymeleafProperties.Reactive();
}
可以发现,该引擎解析了templates目录下的文件。
置顶首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是首页</h1>
</body>
</html>
将首页放到templates目录下:
创建首页类:
package com.rsp2012.www.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class Index {
//使用根路径来指代首页
@RequestMapping("/")
public String index(){
//返回的index通过Thymeleaf加上后缀html,在templates目录中被找到
return "index";
}
}
测试访问:
后端传值给前端
后端传递消息:
package com.rsp2012.www.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class Index {
//使用根路径来指代首页
@RequestMapping("/")
//传一个Model对象进方法,Model是一个数据模型类
public String index(Model model){
//使用model的方法给前端传递一个“消息”,该消息的名字为msg,值为hello,springboot
model.addAttribute("msg","hello,springboot");
//返回的index通过Thymeleaf加上后缀html,在templates目录中被找到
return "index";
}
}
前端主页设置:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 导入中间件-->
<meta charset="UTF-8" xmlns:th="http://www.thymeleaf.org">
<title>Title</title>
</head>
<body>
<h1>这是首页</h1>
<!--使用th标签接管html的元素,使其可以使用thymeleaf的表达式-->
<div th:text="${msg}"></div>
</body>
</html>
通过thymeleaf的表达式来取消息名字为msg的值。
测试:
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)