Thymeleaf 模板引擎用法

学习、改良、极致

• 博客园
• 首页
• 新随笔
• 联系
• 管理
• 订阅

随笔- 31  文章- 0  评论- 50 

Thymeleaf 常用属性

 

文章主目录

• th:action
• th:each
• th:field
• th:href
• th:id
• th:if
• th:include
• th:fragment
• th:object
• th:src
• th:replace
• th:text
• th:value

 

如需了解Thymeleaf 基本表达式，请参考《Thymeleaf基本表达式》一文

回到顶部

th:action

定义后台控制器路径，类似<form>标签的action属性。

例如：

<form id="login-form" th:action="@{/login}">...</form>

回到顶部

th:each

对象遍历，功能类似jstl中的<c:forEach>标签。

例如：

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) {...}

<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初始化一个值，即:

List<Student > stus = new ArrayList<Student >();

stus .add(new Student ());

StudentRequestBean.setStudents(stus );

注意3：stuIter代表students的迭代器

回到顶部

th:field

常用于表单字段绑定。通常与th:object一起使用。 属性绑定、集合绑定。

如：

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) {..}

<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}

例如：

<a th:href="@{/logout}" class="signOut"></a>

回到顶部

th:id

div id声明，类似html标签中的id属性。

例如：

<div class="student" th:id = "stu+(${rowStat.index}+1)"></div>

回到顶部

th:if

条件判断。

例如：

<div th:if="${rowStat.index} == 0">... do something ...</div>

回到顶部

th:include

见th:fragment

回到顶部

th:fragment

声明定义该属性的div为模板片段，常用与头文件、页尾文件的引入。常与th:include，th:replace一起使用。

例如：

声明模板片段/WEBINF/templates/footer. html

<div th: fragment=" copy" >

© 2011 The Good Thymes Virtual Grocery

</div>

引入模板片段

<div th: include=" /templates/footer : : copy" ></div>

<div th: replace=" /templates/footer : : copy" ></div>

回到顶部

th:object

用于表单数据对象绑定，将表单绑定到后台controller的一个JavaBean参数。常与th:field一起使用进行表单数据绑定。

例如：

public class LoginBean implements Serializable{...}

@RequestMapping(value = "/login", method = RequestMethod.POST)

public String login(@ModelAttribute(value = "loginBean") LoginBean loginBean，ModelMap model) {...}

<form id="login-form" th:action="@{/login}" th:object="${loginBean}">...</form>

回到顶部

th:src

用于外部资源引入，类似于<script>标签的src属性，常与@{}一起使用。

例如：

<script th:src="@{/resources/js/jquery/jquery.json-2.4.min.js}"

回到顶部

th:replace

见th:fragment

回到顶部

th:text

文本显示。

例如：

<td class="text" th:text="${username}" ></td>

回到顶部

th:value

用于标签复制，类似<option>标签的value属性。

例如：

<option th:value="Adult">Adult</option>

<input  id="msg" type="hidden" th:value="${msg}" />

---

作者：ITPSC

出处：http://www.cnblogs.com/hjwublog/

温馨提示：当您看到这篇文章时，我可能在很久之前就已经准备了，如果您觉得阅读本文能让你有所收获，请点一下“推荐”按钮或者“关注我”按钮，您的肯定将是我写作的动力！欢迎转载，转载请注明出处！

---

 

分类: thymeleaf

 

好文要顶 关注我 收藏该文  

ITPSC
关注 - 7
粉丝 - 128

 

 

+加关注

9

3

 

 

快速评论

 

«上一篇：thymeleaf 基本表达式
»下一篇：socket-详细分析No buffer space available

posted @ 2015-12-16 17:18 ITPSC 阅读(85530) 评论(7) 编辑 收藏

 

评论

 

  回复引用

#1楼 2018-10-23 09:56 | 测试5454 

我不知道你写这些意义在哪里？

支持(0)反对(0)

  回复引用

#2楼[楼主] 2018-10-23 10:06 | ITPSC 

@ 天德社区
这位老师有何看法，交流交流？

支持(0)反对(0)

  回复引用

#3楼 2018-10-24 16:17 | 测试5454 

@ ITPSC
不，我只是感觉你写的太简洁，会有很多人看不懂

支持(0)反对(0)

  回复引用

#4楼 2018-10-24 16:19 | 测试5454 

@ ITPSC
引用@天德社区
这位老师有何看法，交流交流？
并没有其他的意思

支持(0)反对(0)

  回复引用

#5楼[楼主] 2018-10-24 17:20 | ITPSC 

@ 天德社区
引用@ITPSC
不，我只是感觉你写的太简洁，会有很多人看不懂
结合前面几篇文章，顺着看应该能看懂吧，这篇常用属性了解html的都应该能看懂。

支持(0)反对(0)

  回复引用

#6楼 2018-11-13 15:33 | 昨日的世界 

我正好要用，看到这篇，当作入门手册，很不错！

支持(0)反对(0)

  回复引用

#7楼[楼主] 2018-11-13 15:42 | ITPSC 

@ 昨日的世界
感谢支持

支持(0)反对(0)

 

 

刷新评论刷新页面返回顶部

发表评论

昵称：

评论内容：

     

 

退出 订阅评论

 

[Ctrl+Enter快捷键提交]

 

【推荐】超50万VC++源码: 大型组态工控、电力仿真CAD与GIS源码库！
【活动】华为云12.12会员节 云产品1折起 满额送Mate20 点击抢购
【推荐】服务器100%基准CPU性能，1核1G首年168元，限时特惠！

 

相关博文：
· Thymeleaf_内置属性
· thymeleaf的url属性
· Thymeleaf 常用th标签基础整理
· thymeleaf的属性优先级
· thymeleaf常用标签

最新新闻：
· 生鲜便利店会消灭菜市场吗？全方位真实对比
· 安全人员：黑客可绕过双重认证 盗取Gmail或Yahoo账户
· 小米支付Mi Pay将在印度推出 正在邀请测试
· 抖音无自由
· 最新化学合成技术为研制天然抗生素带来了希望
» 更多新闻...

 

昵称：ITPSC
园龄：3年5个月
粉丝：128
关注：7

+加关注

<

2018年12月

>

日

一

二

三

四

五

六

25

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

搜索

 

 

常用链接

• 我的随笔
• 我的评论
• 我的参与
• 最新评论
• 我的标签

 

随笔分类

• dubbo(2)
• java(3)
• linux(1)
• memcached(5)
• mybatis(4)
• network(1)
• oracle：sql基础(5)
• redis(5)
• thymeleaf(4)
• web
• zookeeper(1)

最新评论

• 1. Re:mybatis基础系列（四）——关联查询、延迟加载、一级缓存与二级缓存
• @等待是一生最初的苍老@等待是一生最初的苍老引用@ITPSC引用引用@等待是一生最初的苍老 mybatis竟然提供了缓存的功能，肯定是有用的。如果你没用第三方缓存技术（如redis），我认为它就有必要......
• --ITPSC
• 2. Re:mybatis基础系列（四）——关联查询、延迟加载、一级缓存与二级缓存
• @ITPSC引用@等待是一生最初的苍老 mybatis竟然提供了缓存的功能，肯定是有用的。如果你没用第三方缓存技术（如redis），我认为它就有必要。MyBatis 利用本地缓存机制（Local Ca......
• --等待是一生最初的苍老
• 3. Re:mybatis基础系列（四）——关联查询、延迟加载、一级缓存与二级缓存
• @等待是一生最初的苍老 mybatis竟然提供了缓存的功能，肯定是有用的。如果你没用第三方缓存技术（如redis），我认为它就有必要。MyBatis 利用本地缓存机制（Local Cache），也就是......
• --ITPSC
• 4. Re:mybatis基础系列（四）——关联查询、延迟加载、一级缓存与二级缓存
• 楼主觉得他的缓存有必要吗? 一级缓存有没有全局禁用的方法
• --等待是一生最初的苍老
• 5. Re:Thymeleaf 常用属性
• @昨日的世界感谢支持...
• --ITPSC

阅读排行榜

• 1. Thymeleaf 常用属性(85526)
• 2. socket-详细分析No buffer space available(30224)
• 3. 分布式缓存技术redis系列（四）——redis高级应用（集群搭建、集群分区原理、集群操作）(22395)
• 4. 分布式缓存技术redis系列（二）——详细讲解redis数据结构（内存模型）以及常用命令(21684)
• 5. thymeleaf 基本表达式(13547)

评论排行榜

• 1. 分布式缓存技术redis系列（五）——redis实战（redis与spring整合，分布式锁实现）(14)
• 2. Thymeleaf 常用属性(7)
• 3. 分布式缓存技术redis系列（三）——redis高级应用（主从、事务与锁、持久化）(5)
• 4. 分布式缓存技术memcached学习系列（四）—— 一致性hash算法原理(4)
• 5. mybatis基础系列（四）——关联查询、延迟加载、一级缓存与二级缓存(4)

推荐排行榜

• 1. 分布式缓存技术redis系列（四）——redis高级应用（集群搭建、集群分区原理、集群操作）(18)
• 2. 分布式缓存技术redis系列（五）——redis实战（redis与spring整合，分布式锁实现）(13)
• 3. 分布式缓存技术redis系列（三）——redis高级应用（主从、事务与锁、持久化）(13)
• 4. Thymeleaf 常用属性(9)
• 5. socket-详细分析No buffer space available(7)

 

 

Copyright ©2018 ITPSC

 

 

• 1. th:action
• 2. th:each
• 3. th:field
• 4. th:href
• 5. th:id
• 6. th:if
• 7. th:include
• 8. th:fragment
• 9. th:object
• 10. th:src
• 11. th:replace
• 12. th:text
• 13. th:value