Spring Boot：jsp的替代品thymeleaf简单使用-原创手记-慕课网

最近开始使用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 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。

作者：ImWiki
链接：https://www.jianshu.com/p/810ace1aeeae