一、什么是模板引擎
我们看一下百度百科怎么介绍的:
模板引擎是为了使程序实现界面与数据分离,业务代码与逻辑代码的分离,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。
我的理解就是我们获取到接口的数据后,通过规定的模板进行填充,生成 HTML 等格式代码,Thymeleaf 既可以直接使用浏览器打开,查看页面的静态效果,也可以通过 Web 应用程序进行访问,查看动态页面效果。
JAVA中常见的模板引擎有以下几种:
- FreeMarker:FreeMarker是一款流行的模板引擎,它使用简单,支持多种数据源,能够生成HTML、XML等多种格式的文档。
- Thymeleaf:Thymeleaf是一款自然模板语法的模板引擎,能够处理HTML、XML、JavaScript、CSS等多种格式,支持国际化。
- Velocity:Velocity是一款快速而灵活的模板引擎,具有高性能和可扩展性。
- JSP:JSP是Java应用程序中广泛使用的模板技术,它使用Java代码和HTML混合的方式生成动态页面。
基本使用
我们要使用 thymeleaf 需要在html 标签中声明名称空间:
<html lang="en" xmlns:th="http://www.thymeleaf.org">
二、Thymeleaf语法规则
1、表达式语法
Thymeleaf 模板引擎支持多种表达式
1.1 变量表达式:$
变量表达式一般用于获取我们的对象及属性。
比如我们有一个 user 对象如下:
{
"username": "snow",
"age": 18
}
我们可以通过变量表达式来获取对象的属性值
<h5>${user.username}</h5>
${ }
表达式还可以获取ctx,vars,locale,request,response,session,servletContext内置对象。
例如:
${#session.getAttribute('map')}
${session.map}
1.2 选择变量表达式:*
与变量表达式类似,不过可以配置 th:object
使用, th:object
存储一个对象后,我们可以在其后代中使用选择变量表达式({...})获取该对象中的属性,其中,“”即代表该对象。
<form action="#" th:action="@{/user/save}" th:object="${user}" method="post">
<input type="text" th:field="*{username}" />
<input type="text" th:field="*{age}" />
<button type="submit">保存</button>
</form>
1.3 链接表达式:@
不管是静态资源的引用,form表单的请求,凡是链接都可以用@{…}
。它可以自动根据当前的上下文环境,生成相对或绝对的URL地址,即便项目名变了,依然可以正常访问。
可以引入css、调用接口等操作:
<link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet">
<a th:href="@{/user/list}">用户列表</a>
<!-- 还可以携带参数 -->
<a th:href="@{/user/edit(id=${user.id})}">编辑用户</a>
1.4 国际化表达式:#
一般用于国际化的场景。
1.5 片段引用表达式:~
片段引用表达式用于在模板页面中引用其他的模板片段
<div th:insert="fragments/header :: navigation"></div>
2、th属性
thymeleaf提供了很多的 th 属性,可以实现各种功能。这里就列举一下常用的 th 属性。
属性 | 描述 | 示例 |
---|---|---|
th:text | 文本替换 | <h1 th:text="hello,bianchengbang" >hello</h1> |
th:value | 替换 value 属性 | <input th:value = "${user.name}" /> |
th:if | 根据条件判断是否需要展示此标签 | <a th:if ="${userId == 1}"> |
th:each | 遍历,支持 Iterable、Map、数组等 | |
th:src | 替换 src 属性 | <img th:src="@{/asserts/img/bootstrap-solid.svg}" src="asserts/img/bootstrap-solid.svg" /> |
th:action | 替换表单提交地址 | <form th:action="@{/user/login}" th:method="post"></form> |
三、SpringBoot整合Thymeleaf
SpringBoot整合Thymeleaf比较方便,我们只需要引入 thymeleaf 依赖即可。
<!-- thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
thymeleaf 源码中默认html存储路径为resources/templates
目录,我们可以在 yaml 文件中进行配置
spring:
thymeleaf:
prefix: classpath:/static/
suffix: .html
参考链接:
https://c.biancheng.net/spring_boot/thymeleaf.html