在講Thymeleaf之前，我先給大家講講一個後端工程師所要了解的Web顯示層技術和架構的演變歷史。
一、顯示層技術及架構演變
說到Web頁面的展示技術，大家肯定知道是HTML、CSS和JavaScript，及一系列由它們三者派生出來的框架。但是我今天說的不是以上，而是說當一個用戶從他電腦上的客戶端發送一個請求到服務器，服務器是怎麼把一個頁面響應回瀏覽器的，這就牽扯一個顯示層的技術與架構的問題。
靜態網頁時代
20世紀九十年代中期，網景公司推出第一款商用瀏覽器，把萬維網推向了普通用戶，靜態網站隨之誕生，也就是利用HTML進行一些信息的頁面展示。但是很多人發現這樣滿足不了用戶需求，因爲大家想和網站進行交互。
CGI
這個時候動態網站應運而生，最開始是使用了CGI技術，CGI叫做公共網關接口，一般由C++等語言書寫，一個請求過來便由一個CGI進程處理，效率很慢。
Servelt
這個時候Sun推出了Servlet技術，一個請求過來對應一個線程，利用Servlet容器封裝了request和response對象，從效率上和簡化開發上一下子獲得了廣泛的開發受衆羣體。
當然回顧歷史來看，Servet對處理html是非常不友好的，因爲它是將html語法當做Java中的字符串來處理，如果要響應回覆雜的Html頁面，那將對於測試、排版來說，都是崩潰的。
PrintWriter out = response.getWriter();
out.print("<html><head></head><body><div>你好<div><body></html>");
JSP
因爲Servelt對Html的處理並不友好，所以JSP這種嵌入在HTML語言中後端渲染展示數據的腳本語言出現了，需要說明的是這並不是SUN公司的首創，而是微軟公司在ASP上率先進行的創新，JSP是拿來主義了。
同樣將上面輸出“你好”二字用JSP設計，當然得搭配Servlet做控制器，代碼如下：
request.setAttribute("message","你好");
<html>
<head></head>
<body>
<div><%=request.getAttribute("message")%></div>
</body>
</html>
EL表達式和JSTL標籤
當新技術出現的時候，人們趨之若鶩，當習以爲常後，又覺得它還是再改進改進，於是又出現了更新的技術。
以上使用JSP顯示，明顯優於Servelt，但Java代碼卻割裂了標籤語言HTML，加入有循環、判斷之類的操作，那閱讀jsp文件的是讓人感到頭疼的事情。這個時候將後端語言標籤化便是一種趨勢，Sun公司便推出了EL表達式和JSTL標籤技術，我們開發一個如下圖的表格，對比一下這兩種技術的區別，好處就不難言喻了。
JSP:
<%List<Employee> list = (List<Employee>) request.getAttribute("list");%>
<%for (int i = 0; i < list.size(); i++) {%>
<tr data-id="<%=list.get(i).getId()%>">
<td><%=list.get(i).getId()%>
</td>
<td><%=list.get(i).getName()%>
</td>
<td><%=list.get(i).getSex()%>
</td>
<td><%=list.get(i).getAge()%>
</td>
<td><%=list.get(i).getDep().getName()%>
</td>
<td>
<button type="button" class="btn btn-primary" data-id="<%=list.get(i).getId()%>" name="modify">修改
</button>
</td>
</tr>
<%}%>
EL+JSTL：
<c:forEach items="${list}" var="obj">
<tr data-id="<%=list.get(i).getId()%>">
<td>${obj.id}
</td>
<td>${obj.name}
</td>
<td>${obj.sex}
</td>
<td>${obj.age}
</td>
<td>${obj.dep.name}
</td>
<td>
<button type="button" class="btn btn-primary" data-id="${obj.id}" name="modify">修改
</button>
</td>
</tr>
</c:forEach>
FreeMarker、Velocity 、Thymeleaf等一衆模板引擎
因爲JSTL本質上是翻譯成jsp，JSP又會被翻譯成Servlet，這就導致了該模板引擎效率較慢，又因爲SUN公司的一貫傲嬌，拒絕修改。所以有一衆公司推出了自己的模板引擎，通過類來解析成HTML文檔，提高了效率。大家項目中所接觸到的模板引擎都是這種理念。不同的是語法上的不同，和一些特別的小優勢方面的不同。
以FreeMarker爲例，語法上跟JSTL沒什麼大的區別，也是提供一套自己的標籤，而Thymeleaf卻不一樣了，它是通過提供一系列的HTML屬性來進行數據渲染，同樣展示上圖表格數據：
<tr th:each="emp:${list}">
<td th:text="${emp.id}"></td>
<td th:text="${emp.name}"></td>
<td th:text="${emp.sex}"></td>
<td th:text="${emp.age}"></td>
</tr>
大家知道，HTML是一門很寬鬆的語言，裏面的屬性可以隨便自定義，瀏覽器只解釋認識的屬性，其他的不會處理，這樣前端人員在看我們的代碼的時候也會不管我們定義的th:text之類的屬性，看我們代碼便會更加舒服。而且Thymeleaf的文件後綴名直接是html，這樣的好處是前端人員也可直接訪問，不再像是jsp或freemaker還有特殊的後綴名，必須要訪問後端，後端轉發給前端才能正常顯示。
至此模板引擎技術發展仿似至臻之境，但前後端分離的開發技術業已出現，在很多公司，現在起步的項目都是前後端分離了，後端項目只需要提供返回json的接口即可，模板引擎技術也開始越來越少使用，技術的發展層出不迭，模板引擎的衰落代表一個時代的落幕。
前後端分離架構的演變，等我講vue的時候再講，今天先講Thymeleaf。
二、Thymeleaf講解
其實筆者認爲，當前行業有不少前後端分離的項目也是跟風之作，第一是項目規模沒有那麼大，第二是前端頁面複雜程度也沒有那麼大，完全沒有必要前後端分離開發和部署，徒增開發、部署的複雜度和人員成本。合理的利用模板引擎技術+ajax通信，完全可以應付很多中小型互聯網項目、及幾乎所有的企業應用項目。
所以說掌握了Thyemeleaf還是當前一個Java開發工程師的必須技能。
pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
yml 頁面修改後刷新看到效果的熱部署
thymeleaf:
cache: false
mode: HTML5
IDEA默認會檢查HTML語法錯誤，可以在這裏設置忽略：
文件存放位置
SpringMVC的Controller中通過“emp”即可找到emp.html頁面：
ModelAndView mv = new ModelAndView("emp");
HTML頁面中配置
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
語法
完成以上步驟，便可以使用Thymeleaf語法，將數據渲染成頁面。模板引擎語法很多，但是常見語法無非是變量表達式、輸出顯示、判斷與循環，掌握這幾個語法基本上便完全可以應付項目開發工作，其他特殊的情況再對應查詢即可。
1.變量
${}，在HTML中在元素上使用th:xx = “${}”
2.輸出顯示
${}，在HTML中在元素上使用th:xx = “${}”
<div th:text="${name}">
</div>
便可以在頁面顯示出name的值
如果想要在js中輸出變量，則需要：
var name="[[${name}]]";
3.選擇分支
<div th:if="${name eq '小明'}">
小明
</div>
<div th:switch="${role.code}">
<p th:case="1">管理員</p>
<p th:case="2">經理</p>
<p th:case="3">員工</p>
</div>
4.循環
<tr th:each="emp:${list}">
<td th:text="${emp.id}"></td>
<td th:text="${emp.name}"></td>
<td th:text="${emp.sex}"></td>
<td th:text="${emp.age}"></td>
</tr>
5.片段代碼
引入公用文件之類：
<th:block th:insert="comm/linkcss"/>