模版引擎是为了让数据与界面相互分离而出现的工具，使用模版引擎进行开发，能够提高相应的开发效率，同时对代码复用率的提升效果也非常显著。一般来说，模版引擎有自己相应的标记语言。模版引擎会解析相应的标记语言，然后将数据渲染进生成的html页面之中。
模版文件 + 渲染的数据 = 最终页面内容
-resources
--static
----css
----js
----script
----......
--templates
----*.html<div class="profile-info-value">
<span th:text="${user.getSex() != null} ? ${user.getSex().getValue()} : '暂未设置'">Sex</span>
</div>
<!-- 该段内容为user-center页面中的相关内容，从后端获取到user对象后，通过调用user对象的方法，判断如果不为null，则显示user.getSex().getValue()的内容，否则则会显示暂未设置的内容 -->
<tbody>
<tr th:each="rept : ${reportTemplates}">
<td class="center aligned" th:text="${rept.getExperiment_id()}">Experiment ID</td>
<td class="center aligned" th:text="${rept.getExperiment_name()}">Experiment Name</td>
<td class="center aligned">
<div class="ui buttons mini" th:id="${'experiment-data-' + rept.getExperiment_id()}" th:attr="
data-prepare-pdf=${rept.getPrepare_link()},
data-experiment-id=${rept.getExperiment_id()},
data-db-id=${rept.getId()}">
<button class="ui green basic button btn-view-pdf" style="padding: .45em .8em">查看文档</button>
<button class="ui blue basic button btn-input-data" style="padding: .45em .8em">录入数据</button>
<button class="ui red basic button disabled btn-gen-report" style="padding: .45em .8em">生成报告</button>
</div>
</td>
</tr>
</tbody>
<!-- 该段代码在themyleaf中属于相应的循环标记，后端传入的reportTemplates属于相应的Collections类，通过themyleaf的each标记语句可以对集合类的内容进行遍历，通过该段代码可以生成所有实验报告操作栏和展示栏。 --><!-- 在html开头声明时，加入layout:decorator="base"来导入相应的base页面 -->
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml" layout:decorator="base"><!-- 重写该块相关内容来进行展示 -->
<th:block layout:fragment="content">
....
.....
.....
....
</th:block>原文：https://www.cnblogs.com/mizhiniurou/p/10859727.html