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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../static/js/index.js" th:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{~/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
共同学习，写下你的评论
评论加载中...
作者其他优质文章
