学习笔记 : Thymeleaf的常用语法
简介 : Thymeleaf是一种用于Web和独立环境的现代服务器端的Java模板引擎. Thymeleaf的主要目标是将优雅的自然模板带到开发工作流程中,并将HTML在浏览器中正确显示,并且可以作为静态原型,让开发团队能更容易地协作. Thymeleaf能够处理HTML,XML,JavaScript,CSS甚至纯文本 .
基础语法
变量表达式 ${}
使用方法 : 直接使用th:xx = "${}"
获取对象属性
1 | <form id="userForm"> |
选择变量表达式 *{}
使用方法 : 首先通过th:object
获取对象,然后使用th:xx = "*{}"
获取对象属性
1 | <form id="userForm" th:object="${user}"> |
链接表达式 @{}
使用方法 : 通过链接表达式@{}
直接拿到应用路径,然后拼接静态资源路径
1 | <!-- 访问项目路径下的user并传递id,name等参数 --> |
片段表达式 ~{}
~{viewName}
: 表示引入完整页面~{viewName ::selector}
: 表示在指定页面寻找片段,其中selector
可为片段名、jquery选择器等~{::selector}
: 表示在当前页寻找
使用方法 : 首先通过th:fragment
定制片段,然后通过th:replace
填写片段路径和片段名
1 | <!-- /views/common/head.html--> |
- 注意 : 由于默认拼接的路径为
spring.thymeleaf.prefix = classpath:/templates/
,所以在使用替换路径th:replace
开头请勿添加斜杠,避免部署运行的时候出现路径报错 !
消息表达式 #{}
即通常的国际化属性 : #{msg}
,用于获取国际化语言翻译值
1 | <title th:text="#{user.title}"></title> |
其它表达式
在基础语法中,默认支持字符串连接、数学运算、布尔逻辑和三目运算等..
1 | <input name="name" th:value="${'I am '+(user.name!=null?user.name:'NoBody')}"/> |
常用语法
迭代循环
想要遍历List集合很简单,配合th:each
即可快速完成迭代
1 | <div th:each="user:${userList}"> |
在集合的迭代过程还可以获取状态变量,只需在变量后面指定状态变量名即可,状态变量可用于获取集合的下标/序号、总数、是否为单数/偶数行、是否为第一个/最后一个
1 | <div th:each="user,stat:${userList}" th:class="${stat.even}?'even':'odd'"> |
如果缺省状态变量名,则迭代器会默认帮我们生成以变量名开头的状态变量 xxStat
1 | <div th:each="user:${userList}" th:class="${userStat.even}?'even':'odd'"> |
条件判断
if语句
其语法为 : th:if
,通常用于动态页面的初始化
1 | <div th:if="${userList}"> |
如果想取反则可以使用unless
1 | <div th:unless="${userList}"> |
switch语句
其语法中需要th:switch
与th:case
结合使用,通常用于动态页面的初始化
1 | <div th:switch="${num}"> |
日期格式化
使用默认的日期格式(toString方法)并不是我们预期的格式 : Mon Dec 03 23:16:50 CST 2018
1 | <input type="text" th:value="${user.createTime}"/> |
此时可以通过时间工具类#dates
来将日期进行格式化为 : 2018-12-03 23:16:50
1 | <input type="text" th:value="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm:ss')}"/> |
内联写法
- 内联写法 : 解决 JS无法获取服务端返回的变量的尴尬 ~
- 使用方法 : 标准格式为:
[[${xx}]]
,其可以读取服务端变量,也可以调用内置对象的方法.例如获取用户变量和应用路径:1
2
3
4
5<script th:inline="javascript">
var user = [[${user}]];`
var APP_PATH = [[${#request.getContextPath()}]];
var LANG_COUNTRY = [[${#locale.getLanguage()+'_'+#locale.getCountry()}]];
</script>
内置对象
七大基础对象
${#ctx}
: 上下文对象,可用于获取其它内置对象${#vars}
: 上下文变量${#locale}
: 上下文区域设置${#request}
: HttpServletRequest对象${#response}
: HttpServletResponse对象${#session}
: HttpSession对象${#servletContext}
: ServletContext对象
常用的工具类
#strings
:字符串工具类#lists
: List工具类#arrays
: 数组工具类#sets
: Set工具类#maps
: 常用Map方法#objects
: 一般对象类,通常用来判断非空#bools
: 常用的布尔方法#execInfo
: 获取页面模板的处理信息#messages
: 在变量表达式中获取外部消息的方法,与使用#{...}
语法获取的方法相同#uris
: 转义部分URL / URI的方法#conversions
: 用于执行已配置的转换服务的方法#dates
: 时间操作和时间格式化等#calendars
: 用于更复杂时间的格式化#numbers
: 格式化数字对象的方法#aggregates
: 在数组或集合上创建聚合的方法#ids
: 处理可能重复的id属性的方法
- 🙂thanks a lot : https://www.jianshu.com/p/908b48b10702
All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
Comment