Spring Boot：jsp的替代品thymeleaf简单使用

2018-05-27 本文已影响69人 ImWiki

最近开始使用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>我&lt;br&gt;是&lt;br&gt;Wiki</h3>
<h3>我<br>是<br>Wiki</h3>

显示结果如下：

我<br>是<br>Wiki
我
是
Wiki

坑：

由于[[]]thymeleaf语法，我们在定义二维数据的时候必须[ []]这样写，可以避免被识别成thymeleaf语法。
&&也属于thymeleaf语法，必须通过包围，避免被转义。
当需要输出<br>换行符时候要改用th:utext。