来自于官方文档翻译!!
Thymeleaf是一个Java库。它是一个XML / XHTML / HTML5模板引擎,能够将一组转换应用于模板文件,以显示应用程序生成的数据和/或文本。
它更适合在Web应用程序中提供XHTML / HTML5,但它可以处理任何XML文件,无论是在Web中还是在独立应用程序中。
Thymeleaf的主要目标是提供一种优雅且格式良好的创建模板的方法。为了实现这一点,它基于XML标签和属性,它们定义了DOM(文档对象模型)上预定义逻辑的执行,而不是在模板中显式地将该逻辑写为代码。
其架构允许快速处理模板,依赖于已解析文件的智能缓存,以便在执行期间使用尽可能少的I / O操作。
最后但并非最不重要的是,Thymeleaf从一开始就设计了XML和Web标准,如果您需要,可以创建完全验证的模板。
th:action
定义后台控制器路径,类似<form>标签的action属性。
例如:
1 |
<form id="login-form" th:action="@{/login}">...</form> |
th:each
对象遍历,功能类似jstl中的<c:forEach>标签。
例如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
public class StudentRequestBean { private List<Student> students; ... } public class Student implements Serializable{ private String firstName; private String school; ...} @RequestMapping(value = "/addStudent", method = RequestMethod.POST) public String addStudent(@ModelAttribute(value = "stuReqBean") StudentRequestBean stuReqBean,ModelMap model) {...} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<form id="login-form" th:action="@{/addStudent}" th:object="${stuReqBean}" method="POST"> <div class="student" th:each="stuIter,rowStat:${stuReqBean.students}"> <input type="text" class="firstName" value="" th:field="*{students[__${rowStat.index}__].firstName}"></input> <input type="text" class="school" value="" th:field="*{students[__${rowStat.index}__].school}"></input> ... </div> </form> |
上面的例子中通过选择表达式*{}既能将表单绑定到后台的StudentRequestBean中的集合属性students,也能将Servlet上下文中的StudentRequestBean中的List类型的students变量回显,回显时通过th:each进行遍历。
注意1:绑定集合属性元素下标的用法*{students[__${rowStat.index}__].firstName}
注意2:如果List<Student> students为null,页面将无法显示表单,后台必须给students初始化一个值,即:
1 2 3 4 5 |
List<Student > stus = new ArrayList<Student >(); stus .add(new Student ()); StudentRequestBean.setStudents(stus ); |
注意3:stuIter代表students的迭代器
th:field
常用于表单字段绑定。通常与th:object一起使用。 属性绑定、集合绑定。
如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
public class LoginBean implements Serializable{... private String username; private List<User> user; ...} public class User implements Serializable{... private String username;; ...} @RequestMapping(value = "/login", method = RequestMethod.POST) public String login(@ModelAttribute(value = "loginBean") LoginBean loginBean,ModelMap model) {..} |
1 2 3 4 5 6 7 |
<form id="login-form" th:action="@{/login}" th:object="${loginBean}">... <input type="text" value="" th:field="*{username}"></input> <input type="text" value="" th:field="*{user[0].username}"></input> </form> |
th:href
定义超链接,类似<a>标签的href 属性。value形式为@{/logout}
例如:
1 |
<a th:href="@{/logout}" class="signOut"></a> |
th:id
div id声明,类似html标签中的id属性。
例如:
1 |
<div class="student" th:id = "stu+(${rowStat.index}+1)"></div> |
th:if
条件判断。
例如:
1 |
<div th:if="${rowStat.index} == 0">... do something ...</div> |
th:include
见th:fragment
th:fragment
声明定义该属性的div为模板片段,常用与头文件、页尾文件的引入。常与th:include,th:replace一起使用。
例如:
声明模板片段/WEBINF/templates/footer. html
1 2 3 4 5 |
<div th: fragment=" copy" > © 2011 The Good Thymes Virtual Grocery </div> |
引入模板片段
1 2 3 |
<div th: include=" /templates/footer : : copy" ></div> <div th: replace=" /templates/footer : : copy" ></div> |
th:object
用于表单数据对象绑定,将表单绑定到后台controller的一个JavaBean参数。常与th:field一起使用进行表单数据绑定。
例如:
1 2 3 4 5 6 |
public class LoginBean implements Serializable{...} @RequestMapping(value = "/login", method = RequestMethod.POST) public String login(@ModelAttribute(value = "loginBean") LoginBean loginBean,ModelMap model) {...} |
1 |
<form id="login-form" th:action="@{/login}" th:object="${loginBean}">...</form> |
th:src
用于外部资源引入,类似于<script>标签的src属性,常与@{}一起使用。
例如:
1 |
<script th:src="@{/resources/js/jquery/jquery.json-2.4.min.js}" |
th:replace
见th:fragment
th:text
文本显示。
例如:
1 |
<td class="text" th:text="${username}" ></td> |
th:value
用于标签复制,类似<option>标签的value属性。
例如:
1 2 3 |
<option th:value="Adult">Adult</option> <input id="msg" type="hidden" th:value="${msg}" /> |
Thank you for your attention. I’ll keep trying
Made it myself. Ha Ha