01月09, 2020

thymeleaf模板入门

基本

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

内置对象

Thymeleaf

对象 作用
#ctx 获取Thymeleaf自己的Context对象

web程序

对象 作用
#requset 获取HttpServletRequest对象
#response 获取HttpServletReponse对象
#session 获取HttpSession对象
#servletContext 获取HttpServletContext对象

全局对象

对象 作用
#dates 处理java.util.date的工具对象
#calendars 处理java.util.calendar的工具对象
#numbers 用来对数字格式化的方法
#strings 用来处理字符串的方法
#bools 用来判断布尔值的方法
#arrays 用来护理数组的方法
#lists 用来处理List集合的方法
#sets 用来处理set集合的方法
#maps 用来处理map集合的方法
${#dates.createNow()}
${#dates.createToday()}
${#dates.format(date, 'dd/MMM/yyyy HH:mm')}

<span th:text="${#dates.format(today,'yyyy-MM-dd')}">2018-04-25</span>
${#strings.isEmpty(name)}
${#strings.randomAlphanumeric(count)}
${#strings.equals(str)}
${#strings.equalsIgnoreCase(str)}
${#strings.startsWith(name,'Don')}
${#strings.endsWith(name,endingFragment)}


<span th:text="'欢迎您:' + ${user.name} + '!'"></span>
<span th:text="|欢迎您:${user.name}|"></span>
<span th:text="${user.age}%2 == 0"></span>  //false
<span th:text="${user.sex} ? '男':'女'"></span>
<span th:text="${user.name} ?: '默认值'"></span>

URL

<a href="info.html" th:href="@{/user/info(id=${user.id})}">参数拼接</a>
<a href="info.html" th:href="@{/user/info(id=${user.id},phone=${user.phone})}">多参数拼接</a>
<a href="info.html" th:href="@{/user/info/{uid}(uid=${user.id})}">restful风格</a>
<a href="info.html" th:href="@{/user/info/{uid}/abc(uid=${user.id})}">restful风格</a>

对象

通过 *{属性名}的方式,来获取user中的属性
<table>
    <tr th:object="${user}">
        <td th:text="*{id}">1</td>
        <td th:text="*{name}">a</td>
        <td th:text="*{phone}">137</td>
    </tr>
</table>

循环

<tr th:each="user,stat : ${users}">
    <td th:text="${user.name}">Onions</td>
    <td th:text="${user.age}">2.41</td>
</tr>
stat对象包含以下属性:
index,从0开始的角标
count,元素的个数,从1开始
size,总元素个数
current,当前遍历到的元素
even/odd,返回是否为奇偶,boolean值
first/last,返回是否为第一或最后,boolean值

分支switch

<div th:switch="${user.role}">
  <p th:case="'admin'">用户是管理员</p>
  <p th:case="'manager'">用户是经理</p>
  <p th:case="*">默认放最后</p>
</div>

JS模板

语法结构:const user = /*[[Thymeleaf表达式]]*/ "静态环境下的默认值";且User对象会被直接处理为json格式。

<script th:inline="javascript">
    const user = /*[[${user}]]*/ {};
    const age = /*[[${user.age}]]*/ 20;
    console.log(user);
    console.log(age)
</script>

本文链接:https://blog.jnliok.com/post/thymeleaf.html

-- EOF --

Comments