模版引擎原理
- 模版引擎是为了让数据与界面相互分离而出现的工具，使用模版引擎进行开发，能够提高相应的开发效率，同时对代码复用率的提升效果也非常显著。一般来说，模版引擎有自己相应的标记语言。模版引擎会解析相应的标记语言，然后将数据渲染进生成的html页面之中。
模版文件 + 渲染的数据 = 最终页面内容
thymeleaf模版引擎实例
- 在我们的项目迭代中，前端代码所采用的模版引擎就是themyleaf,themyleaf是一个开源的java模版引擎库。
- themyleaf相对于其他模版引擎的区别在于，themyleaf基于相关xml标签和属性去定义模版的处理逻辑，而不是直接在模版中编辑相关的代码。
- 因为themyleaf的上述优势，所以themyleaf的文本文件本身也是格式良好的html文件，并且可以直接被浏览器打开进行相关内容的浏览。
thymeleaf在phyweb项目中的应用实例
- 帮助后端同学和新加入的同学熟悉项目中相关内容的使用。
- 首先项目前端的整体结构为
-resources
--static
----css
----js
----script
----......
--templates
----*.html
- 从上述代码结构中可以看出，前端模块中，主要将相关的代码文件存放在static和templates文件中。
- templates文件夹中存放的为相关的前端内容页面，而static文件夹中存放的是相关的css和js文件，以及alpha阶段迭代的物理实验脚本内容。
- 一般开发新的前端页面之时，可以在templates的html中写好相应的模版内容，然后再与后端的同学对接相应的接口，将后端获取的数据再渲染到相应的html模版文件之中。
- thymeleaf获取数据实例
<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>
<!-- 该段代码在thymeleaf中属于相应的循环标记，后端传入的reportTemplates属于相应的Collections类，通过thymeleaf的each标记语句可以对集合类的内容进行遍历，通过该段代码可以生成所有实验报告操作栏和展示栏。 -->
phyweb在原有的基础上，如何开发新页面：
- 首先，因为我们的前端页面基本都有相同的页脚与导航栏等相关内容，通过themyleaf将导航栏与页脚提取出来，抽象成了base.html的内容。
- base.html中的内容主要为页面导航栏与页脚的相关内容，在开发其余页面之时，可以不用进行重写。开发新页面之时，只要在新页面进行相应的导入即可。导入方式为
<!-- 在html开头声明时，加入layout:decorator="base"来导入相应的base页面 -->
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml" layout:decorator="base">
- 在写页面中的具体内容之时，可以通过在新页面中重写base.html文件的相应模块的到相关内容,具体操作为：
<!-- 重写该块相关内容来进行展示 -->
<th:block layout:fragment="content">
....
.....
.....
....
</th:block>
- 写好之后，新的前端页面就此产生了。同时要查看相应效果的话，并不是很推荐用浏览器直接查看相关html页面，最好能够在后台起一个相关的控制器，然后访问相应的路径，自己进行测试页面的展示效果。
