最近开始使用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。
作者:ImWiki
链接:https://www.jianshu.com/p/810ace1aeeae
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。