在讲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"/>
扫一扫
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
