Thymeleaf是一种用于Java Web应用程序的模板引擎，它可以将数据渲染到HTML页面中。下面是Thymeleaf的基本语法和使用：
- 引入Thymeleaf依赖
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> - 在HTML页面中使用Thymeleaf
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf Example</title>
</head>
<body>
<h1 th:text="${message}">Hello World!</h1>
</body>
</html>
在上面的例子中，使用了Thymeleaf的th:text属性来将message变量的值渲染到HTML页面中。
3.在Java代码中使用Thymeleaf
@GetMapping("/")
public String home(Model model) {
model.addAttribute("message", "Hello World!");
return "index";
}
Thymeleaf常用标签（示例代码）：
Thymeleaf 常用标签
Thymeleaf为变量所在域提供了一些内置对象，如下
#ctx：上下文对象
#vars：上下文变量
#locale：上下文区域设置
#request：（仅限Web Context）HttpServletRequest对象
#response：（仅限Web Context）HttpServletResponse对象
#session：（仅限Web Context）HttpSession对象 #servletContext：（仅限Web Context）ServletContext对象
Thymeleaf 在Spring Boot 中的使用
1、 在Spring Boot项目中使用Thymeleaf模板，必须保证引入Thymeleaf依赖。
2、 其次在全局配置文件中配置Thymeleaf模板的一些参数。如设置模板缓存、模板编码、模板样式、指定模板页面存放路径、指定模板页面名称的后缀
静态资源的访问
Spring Boot 中静态资源的访问路径
Spring Boot默认将/**所有访问映射到以下目录：
classpath：/META-INF/resources/：项目类路径下的META-INF文件夹下 的resources文件夹下的所有文件。
classpath：/resources/：项目类路径下的resources文件夹下的所有文件。
classpath：/static/：项目类路径下的static文件夹下的所有文件
classpath：/public/：项目类路径下的public文件夹下的所有文件。
使用 Thymeleaf 完成数据的页面展示
搭建步骤：
1.创建Spring Boot项目，引入Thymeleaf依赖
2.编写配置文件，对Thymeleaf模板的页面数据缓存进行设置
3.创建控制类：@Controller
4.创建模板页面并引入静态资源文件
5.效果测试
使用 Thymeleaf 完成数据的页面展示
1.创建Spring Boot项目，引入Thymeleaf依赖
2.编写配置文件，设置页面数据缓存
thymeleaf页面缓存设置（默认为true），开发中方便调试应设置为false，上线稳定后应保持默认true
spring.thymeleaf.cache=false
3.创建控制类
创建一个用于前端模板页面动态数据替换效果测试的访问实体类LoginController
4.创建模板页面并引入静态资源文件
创建一个用户登录的模板页面login.html,部分参考代码如下
在body标签中通过th:text引入了后台动态传递过来的当前年份currentYear。
5.整合效果测试
启动项目进行测试，在浏览器上访问http://localhost:8080/toLoginPage，在页面底部动态显示了当前日期2019-2020，而不是文件中的静态数字2018-2019
Thymeleaf学习
传统WEB前端基础知识
⽹页设计
HTML
CSS
JS
1 / 13
HTTP协议
HTTP 协议是 Hyper Text Transfer Protocol（超⽂本传输协议）的缩写，是⽤于从万维⽹（ WWW:World Wide
Web ）服务器传输超⽂本到本地浏览器的传送协议。 HTTP 是⼀个基于 TCP/IP 通信协议来传递数据（HTML ⽂
件、图⽚⽂件、查询结果等）。
HTTPS 经由 HTTP 进⾏通信，但利⽤ SSL/TLS 来加密数据包，HTTPS 开发的主要⽬的，是提供对⽹站服务器的
⾝份认证，保护交换资料的隐私与完整性。
前端浏览器会向后端服务器发送请求，请求包括URL、Header、内容、Cookies。后端服务器程序监听端⼝，在
接收请求后进⾏处理，处理完毕后给前端响应，响应包括状态码、Header、内容、Cookies。访问者与⽹站的
交互，实际上就是前端与后端的HTTP通信。
HTTP1.0 定义了三种请求⽅法︓ GET, POST 和 HEAD ⽅法。 HTTP1.1 新增了六种请求⽅法︓OPTIONS、
PUT、PATCH、DELETE、TRACE 和 CONNECT ⽅法。
下⾯是常见的 HTTP 状态码︓ 200 - 请求成功 301 - 资源（⽹页等）被永久转移到其它URL 404 - 请求的
资源（⽹页等）不存在 500 - 内部服务器错误
参考⽹站
Bootstrap
Bootstrap 是全球最受欢迎的前端组件库，⽤于开发响应式布局（响应式布局就是做⼀个⽹站同时能兼容多个终
端,由⼀个⽹站转变成多个⽹站,为我们⼤⼤节省了资源）、移动设备优先的 WEB 项⽬。Bootstrap5 ⽬前是
Bootstrap 的最新版本，是⼀套⽤于 HTML、CSS 和 JS 开发的开源⼯具集。Bootstrap ⼀个做⽹页的框架，就是
说你只需要写HTML标签调⽤它的类你就可以很快速的做⼀个⾼⼤上的⽹页，你不⽤担⼼兼容问题，提供了很
多样式供你选择︕
参考⽹站
jQuery
Thymeleaf.md
2022/10/12
2 / 13
jQuery是⼀个JavaScript框架，封装了原⽣的JavaScript函数，极⼤简化了JavaScript操作，⽬前已经成为集
JavaScript、CSS、DOM编程和AJAX于⼀体的强⼤框架。
参考⽹站
AJAX
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语⾔，⽽是⼀种
使⽤现有标准的新⽅法。 AJAX 最⼤的优点是在不重新加载整个页⾯的情况下，可以与服务器交换数据并更新
部分⽹页内容。 AJAX 不需要任何浏览器插件，但需要⽤户允许JavaScript在浏览器上执⾏。
参考⽹站
JAVAWEB开发
Servlet
Servlet 为创建基于 web 的应⽤程序提供了基于组件、独⽴于平台的⽅法，可以不受 CGI（公共⽹关接⼝
（Common Gateway Interface，CGI）是Web 服务器运⾏时外部程序的规范，按CGI 编写的程序可以扩展服务
器功能）程序的性能限制。Servlet 有权限访问所有的 Java API，包括访问企业级数据库的 JDBC API。
Servlet对HTML的处理不够友好，将数据与HTML拼接，对于复杂的HTML页⾯令⼈崩溃（JAVA⾥写HTML）。
Java Servlet 是运⾏在 Web 服务器或应⽤服务器上的程序，它是作为来⾃ Web 浏览器或其他 HTTP 客户端的请
求和 HTTP 服务器上的数据库或应⽤程序之间的中间层。
参考⽹站
JSP
JSP 与 PHP、ASP、ASP.NET 等语⾔类似，运⾏在服务端的语⾔，是⼀种动态⽹页开发技术。它使⽤JSP标签在
HTML⽹页中插⼊Java代码（HTML⾥写Java）。
JSP是⼀种Java servlet，主要⽤于实现Java web应⽤程序的⽤户界⾯部分。⽹页开发者们通过结合HTML代码、
XHTML代码、XML元素以及嵌⼊JSP操作和命令来编写JSP。
JSP通过⽹页表单获取⽤户输⼊数据、访问数据库及其他数据源，然后动态地创建⽹页。
JSP标签有多种功能，⽐如访问数据库、记录⽤户选择信息、访问JavaBeans组件等，还可以在不同的⽹页中传
递控制信息和共享信息。
以下列出了使⽤JSP带来的其他好处︓
与ASP相⽐︓JSP有两⼤优势。⾸先，动态部分⽤Java编写，⽽不是VB或其他MS专⽤语⾔，所以更
加强⼤与易⽤。第⼆点就是JSP易于移植到⾮MS平台上。
与纯 Servlet 相⽐︓JSP可以很⽅便的编写或者修改HTML⽹页⽽不⽤去⾯对⼤量的println语句。
与SSI相⽐︓SSI⽆法使⽤表单数据、⽆法进⾏数据库链接。
与JavaScript相⽐︓虽然JavaScript可以在客户端动态⽣成HTML，但是很难与服务器交互，因此不
能提供复杂的服务，⽐如访问数据库和图像处理等等。
与静态HTML相⽐︓静态HTML不包含动态信息。
Thymeleaf.md
2022/10/12
3 / 13
JSP经历了纯JSP开发，JSP+JavaBean开发，以及⽬前常⽤的MVC模式，即使⽤Servlet充当控制器，JSP充当显
⽰层的开发模式。
参考⽹站
Thymeleaf基础
官⽅⽂档
模板引擎
当页⾯复杂时，JSP的阅读使⼈头疼，模板引擎的作⽤就是提供⼀套与HTML语法相近的语⾔，其能够和HTML
代码很好的融合在⼀起。Sun公司推出的JSTL本质上需要解析成JSP，JSP⼜需要解析成Servlet，导致开发效率较
低，且必须依赖于Web容器。很对第三⽅公司推出了⾃⼰的模板引擎，如FreeMarker，Thymelef，它们通过将
Java对象解析成HTML⽂档，⼤⼤提⾼了开发效率。
为什么不直接前后端分离︖当项⽬规模不⼤，前端页⾯复杂度也不⼤时，没必要使⽤前后端分离的技
术，会额外增加开发、部署复杂度。在实际⽣产中，往往还是会遇到这种混合模板开发的项⽬，甚⾄还
要维护⼀些Jsp的⽼项⽬。
Thymeleaf
Thymeleaf⽬前是Spring家族⾸推的模板引擎。
动静结合，⽀持在浏览器中查看静态效果，在程序处理后也可以查看包含完整数据的动态页⾯。
常⽤标签
关键字
功能介绍
案例
th:id
替换id
<input th:id="'xxx' + ${collect.id}"/>
th:text
⽂本替换
<p
th:text="${collect.description}">description</p>
th:utext⽀持html的⽂本替换
<p th:utext="${htmlcontent}">conten</p>
th:object替换对象
<div th:object="${session.user}">
th:value属性赋值
<input th:value="${user.name}" />
th:with
变量赋值运算
<div th:with="isEven=${prodStat.count}%2==0">
</div>
th:style
设置样式
th:style="'display:' + @{(${sitrue} ? 'none' :
'inline-block')} + ''"
th:onclick点击事件
th:οnclick="'getCollect()'"
th:each属性赋值
tr th:each="user,userStat:${users}">
th:if
判断条件
<a th:if="${userId == collect.userId}" >
Thymeleaf.md
2022/10/12
关键字
功能介绍
案例
th:unless和th:if判断相反
<a th:href="@{/login}" th:unless=${session.user
!= null}>Login</a>
th:href
链接地址
<a th:href="@{/login}" th:unless=${session.user
!= null}>Login</a>
th:switch多路选择配合th:case 使⽤<div th:switch="${user.role}">
th:case
th:switch的⼀个分⽀
<p th:case="'admin'">User is an
administrator</p>
th:fragment
布局标签，定义⼀个代码⽚
段，⽅便其它地⽅引⽤
<div th:fragment="alert">
th:include
布局标签，替换内容到引⼊
的⽂件
<head th:include="layout :: htmlhead"
th:with="title='xx'"></head>
th:replace
布局标签，替换整个标签到
引⼊的⽂件
<div th:replace="fragments/header :: title">
</div>
th:selectedselected选择框选中
th:selected="(${xxx.id} == ${configObj.dd})"
th:src
图⽚类地址引⼊
<img class="img-responsive" alt="App Logo"
th:src="@{/img/logo.png}" />
th:inline定义js脚本可以使⽤变量
<script type="text/javascript"
th:inline="javascript">
th:action表单提交的地址
<form action="subscribe.html"
th:action="@{/subscribe}">
th:remove删除某个属性
<tr th:remove="all">
可见课本表4-1
标准表达式
变量表达式︓${...}使⽤${…}括起来的表达式，称为变量表达式。该表达式的内容会显⽰在HTML标签
体⽂本处。该表达式⼀般都是通过th:text标签属性进⾏展⽰的。
选择表达式: *{...}选择表达式，也称为星号表达式，其是使⽤*{…}括起来的表达式。⼀般⽤于展⽰对
象的属性。该表达式的内容会显⽰在HTML标签体⽂本处。但其需要与th:object标签属性联⽤，先使⽤
th:object标签选择了对象，再使⽤*{…}选择要展⽰的对象属性。该表达式可以有效降低页⾯中代码的冗
余。
URL表达式: @{...}使⽤@{…}括起来，并且其中只能写⼀个绝对URL或相对URL地址的表达式，称为URL
表达式。这个绝对/相对URL地址中⼀般是包含有动态参数的，需要结合变量表达式${…}进⾏字符串拼
接。
表达式的语法︓#{...}⽤于从消息源中提取消息内容实现国际化,通常称为⽂本外部化，国际化，允许
从外部源（如︓.properties）⽂件中检索特定语⾔环境的消息。
⽚段表达式︓~{...}⽚段表达式是使⽤th:insert th:replace插⼊⽚段，⽤于将标记⽚段移动到模板中。
简单案例
1. 创建项⽬，引⼊依赖注意引⼊Spring web和Thymeleaf：
2. 基本配置由于使⽤的阿⾥云镜像创建，基本配置已配好，主要注意以下配置：
#开启模板缓存（默认值： true,开发环境下设为false，否则每次更改HTML都需要重启主程序，需
要配置热部署）
spring.thymeleaf.cache=true
# 模板编码
spring.thymeleaf.encoding=UTF-8
# 要运⽤于模板之上的模板模式。( 默认值： HTML)
# 此处与课本版本不同HTML5字段即将不在使用，详见
(https://www.thymeleaf.org/apidocs/thymeleaf/3.0.0.BETA02/org/thymeleaf/templatemo
de/TemplateMode.html)
spring.thymeleaf.mode=HTML
# 在构建 URL 时添加到视图名称前的前缀（默认值： classpath:/templates/ ）
spring.thymeleaf.prefix=classpath:/templates/
# 在构建 URL 时添加到视图名称后的后缀（默认值： .html ）
spring.thymeleaf.suffix=.html
热部署配置（更新html⽂件不需要重启程序）：
3. 编写控制类
@Controller
publicclassIndexController{
@GetMapping("/index")
//后台要从控制层直接返回前端所需的数据
public String index(Model model){
model.addAttribute("hello", "你好");
return"index";
}
}
4. 新建模板⽂件新建HTML⽂件，注意引⼊Thymeleaf的命名空间。为了⽅便使⽤，可以创建新的⽂件模板
（类似mybatis课程中创建mybatis mapper xml模板）
新建Thymeleaf⽂件：
<!DOCTYPE html>
<htmllang="en"xmlns:th="http://www.thymeleaf.org">
<head>
<metacharset="UTF-8">
<title>Title</title>
</head>
<body>
<pth:text="${hello}">hello Thymeleaf</p>
</body>
</html>
可以直接使⽤浏览器打开本地html⽂件查看，thymeleaf标签不影响静态资源展⽰。使⽤Thymeleaf标签时如果
没有补全，注意下载插件：
简单练习
练习基本使⽤
@Controller
publicclassIndexController{
@GetMapping("/index")
public String index(Model model){
Student student = new Student();
student.setId(123);
student.setName("张三");
student.setSex(0);
List<String> hobby = new ArrayList<>();
hobby.add("sleep");
hobby.add("play");
hobby.add("football");
student.setHobby(hobby);
//student.setHobby(Arrays.asList("sleep","play","football"));
model.addAttribute("student", student);
model.addAttribute("hello", "你好");
return"index";
}
}
<!DOCTYPE html>
<htmllang="en"xmlns:th="http://www.thymeleaf.org">
<head>
<metacharset="UTF-8">
<title>Title</title>
<linkrel="stylesheet"th:href="@{app.css}">
</head>
<body>
<pth:text="|你好,${student.getName()}|">hello Thymeleaf</p>
<pth:text="|你好,${student.name}|">hello Thymeleaf</p>
<ath:href="@{lzzy.jpeg}">lzzy</a>
<divth:object="${student}"class="app">
<pth:text="*{name}"></p>
<pth:text="*{id}"></p>
<pth:text="*{sex}"></p>
</div>
<pth:if="!${student.sex}">男</p>
<pth:if="${student.sex}">女</p>
<ul>
<lith:each="hobby:${student.hobby}"th:text="${hobby}"></li>
</ul>
<!--替换标签-->
<divth:replace="~{component::frag1}"></div>
<!--保留标签-->
<divth:insert="~{component::frag2}"></div>
<p>当前国家：<spanth:text="${#locale.country}">US</span></p>
<pth:text="${#dates.createToday()}"></p>
</body>
<scriptth:inline="javascript">
var message = [[${hello}]];
console.log(message);
</script>
</html>
@Controller
publicclassArticleController{
@Autowired
ArticleService articleService;
@GetMapping("/article")
public String article(Model model){
List<Article> articleList = articleService.findAll();
model.addAttribute("articles", articleList);
return"article";
}
}
<!DOCTYPE html>
<htmllang="en"xmlns:th="http://www.thymeleaf.org">
<head>
<metacharset="UTF-8">
<title>文章信息</title>
</head>
<body>
<table>
<tr>
<th>序号</th>
<th>标题</th>
<th>内容</th>
</tr>
<trth:each="article:${articles}">
<tdth:text="${article.id}"></td>
<tdth:text="${article.title}"></td>
<tdth:text="${article.content}"></td>
</tr>
</table>
</body>
</html>
简单登录页⾯
@Controller
publicclassLoginController{
@GetMapping("/login")
public String login(){
return"login";
}
@PostMapping("/logincheck")
public String loginIn(@RequestParam("username") String username,
@RequestParam("password") String password){
if (username.equals("xxx") && password.equals("123"))
return"redirect:/index";
else
return"login";
}
}
<!DOCTYPE html>
<htmllang="en"xmlns:th="http://www.thymeleaf.org">
<head>
<metacharset="UTF-8">
<title>用户登录界面</title>
</head>
<body>
<!-- 用户登录form表单 -->
<formth:action="@{/logincheck}"method="post">
<imgth:src="@{lzzy.jpeg}"width="72"height="72">
<h1>请登录</h1>
<inputtype="text"name="username"
th:placeholder="用户名"required=""autofocus="">
<inputtype="password"name="password"
th:placeholder="密码"required="">
<buttontype="submit">登录</button>
<p><spanth:text="${#dates.createNow()}"></span></p>
</form>
</body>
</html>
引⼊⽅法：
CDN引⼊
<!-- 新 Bootstrap5 核心 CSS 文件 -->
<linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-
bootstrap/5.1.1/css/bootstrap.min.css">引⼊⽅法
CDN引⼊
<!-- 新 Bootstrap5 核心 CSS 文件 -->
<linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-
bootstrap/5.1.1/css/bootstrap.min.css">引⼊webjars，以jar包的形式加⼊项⽬。
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>版本号</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>版本号</version>
</dependency>
398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
