最近开始使用Spring Boot开发轻量级服务器应用，由于jsp和Spring Boot兼容并不好，打包成Jar文件部署后，jsp不能一起打包进Jar包，导致无法生效。官方推荐使用模板（freemarker、thymeleaf等）作为页面展示，经过对比我觉得thymeleaf会更好，所以选择了thymeleaf来代替jsp。
文件路径
thymeleaf默认的存放目录是resources/templates，css和js文件默认的存放路径是resources/static。
├── build.gradle
├── settings.gradle
└── src
├── main
│ ├── kotlin
│ ├── resources
│ │ ├── application.properties
│ │ ├── static
│ │ │ ├── css
│ │ │ │ └── index.css
│ │ │ └── js
│ │ │ └── index.js
│ │ └── templates
│ │ └── index.html
│ └── webapp
无需启动服务即可预览
thymeleaf文件的是以.html结尾的。相对.jsp有个非常大的好处就是可以直接浏览器打开预览效果，而不需要启动服务。
关联CSS、JS资源文件
需要添加<html lang="en" xmlns:th="http://www.thymeleaf.org">标明 th标签，添加css需要填写href和th:href属性，href属性是为了能够在不启动服务的情况下预览html，也是默认值，th:href是为了使用时候替代href。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../static/css/index.css" th:href="@{~/css/index.css}">
<script src="../static/js/index.js" th:src="@{~/js/index.js}"></script>
</head>
<body>
<div th:text="${message}">Message</div>
</body>
基本用法
index.html
...
<body>
<div th:text="${user.name}">Wiki</div>
<a th:href="${user.link}">查看详情</a>
</body>
Controller类如下：
@Controller
class TestController {
@RequestMapping("/index")
fun index(map: MutableMap<String, Any>): String {
map["user"] = User(1, "Wiki","/user?id=1")
return "index"
}
}
结果：
Wiki
查看详情
其中查看详情是超链接http://localhost:8080/user?id=1
if判断标签
<!--当user.age小于18输出未成年-->
<span th:if="${user.age < 18}">未成年</span>
日期格式化
<span th:text="${#dates.format(user.created,'yyyy-MM-dd HH:mm:ss')}"></span>
遍历标签
<table border="1">
<tr>
<th>ID</th>
<th>NAME</th>
</tr>
<tr th:each="user : ${users}">
<td th:text="${user.id}">id</td>
<td th:text="${user.name}">name</td>
</tr>
</table>
<div th:each="user: ${users}">
<span th:text="${user.id}"></span>
<span th:text="${user.name}"></span>
</div>
th:include标签
footer.html文件内容：
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="copyright">
© 2016 xxx
</div>
</body>
</html>
index.html内容：
<body>
<div th:include="footer :: copyright"></div>
</body>
输出session的参数
<div th:text="${session.user.name}"></div>
转义问题
当我们的代码js中的包含&&等代码，需要转义，请直接这样用：
<script th:inline="javascript">
<![CDATA[
$(window).load(function(){
xxxx（其中包含了&&这种需要转义的字符）
});
]]>
</script>
[[]] 标签
当我们输出的内容不是标签或者内容，同样可以用[[]]来输出我们要的结果。
<p th:inline="text">Hello, [[${session.user.name}]]!</p>
等价：
<p>Hello, <span th:text="${session.user.name}">Wiki</span>!</p>
在javascript使用
<script th:inline="javascript">
var name = /*[[${user.name}]]*/ 'Wiki';
</script>
th:text和th:utext区别
当我们需要输出带有换行符\n的字符串的时候，通常我们希望
<h3 th:text="${message}"></h3>
<h3 th:utext="${message}"></h3>
当map["message"] = "我<br>是<br>Wiki"，输出的源码如下：
<h3>我<br>是<br>Wiki</h3>
<h3>我<br>是<br>Wiki</h3>
显示结果如下：
我<br>是<br>Wiki
我
是
Wiki
坑：
- 由于[[]]thymeleaf语法，我们在定义二维数据的时候必须
[ []]这样写，可以避免被识别成thymeleaf语法。 - &&也属于thymeleaf语法，必须通过包围，避免被转义。
- 当需要输出
<br>换行符时候要改用th:utext。
网友评论