Thymeleaf

作者: 巨子联盟 | 来源:发表于2018-05-04 18:50 被阅读0次

SpringBoot & Thymeleaf项目实战
SpringBoot系列（六）集成thymeleaf详解版
Thymeleaf模板引擎和Webjars联合使⽤
thymeleaf教程
第5章集成Thymeleaf模版引擎
Thymeleaf模板和Webjars的联合使用
Thymeleaf 模板引擎
Java Springboot 整合Thymeleaf(Spri
引入模板引擎thymeleaf
Spring Boot 集成 Thymeleaf 模板引擎

标签
th:text

引用properties文件,国际化用的
后台配置文件配置
index.welcome=热烈欢迎
前台引用:
Welcome Message
th:utext ,不转换html标签
后台值如:utext.index.welcome=Welcome to SpringMVC
前台引用:Welcome Message
如果用th:text则显示为Welcome to SpringMVC
如果用th:utext则为:Welcome to SpringMVC,转换成了我们想要的html标签
显示变量,${}
后台:request.setAttribute("name", name);
前台:

标准表达式语法

语法	名称	描述	作用
${…}	Variable Expressions	变量表达式	取出上下文变量的值
*{…}	Selection Variable Expressions	选择变量表达式	取出选择的对象的属性值
#{…}	Message Expressions	消息表达式	使文字消息国际化，I18N
@{…}	Link URL Expressions	链接表达式	用于表示各种超链接地址
~{…}	Fragment Expressions	片段表达式	引用一段公共的代码片段

消息

后台配置文件使用占位符:
index.welcome.param=热烈欢迎2{0}
前台:Welcome message
${message} 是一个变量,引用后台传过来的值

变量

后台:

        List<Department> departments = new ArrayList<>();
        for(int i=0;i<5;i++) {
            Department department1 = new Department();
            department1.setName("name"+i);
            department1.setId(""+i);
            departments.add(department1);
        }
        request.setAttribute("departments",departments);

前台:

    <!-- 获取所有 departments -->
    <p th:text="'获取所有 departments:'+${departments}"></p>
    <!-- 获取 departments 的第一个元素 -->
    <p th:text="${'获取 departments 的第一个元素:'+departments[0]}"></p>
    <!-- 获取第一个 department 对象的 name 属性 -->
    <p th:text="${'获取第一个 department 对象的 name 属性:' + departments[0].name}"></p>
    <!-- 也可以用 ['name'] 来获取第一个 department 对象的 name 属性 -->
    <p th:text="${'也可以用 [''name''] 来获取第一个 department 对象的 name 属性:'+departments[0]['name']}"></p>
    <!-- 甚至可以调用方法! -->
    <p th:text="${'甚至可以调用方法.getId!:' +departments[0].getId()}"></p>
    <p th:text="${'甚至可以调用方法name.substring!:' +departments[0]['name'].substring(0, 1)}"></p>

选择变量表达式

    <div th:object="${departments[1]}">
        <p th:text="*{name}"></p>
        <p th:text="*{id}"></p>
    </div>
    <p>等价于</p>
    <p th:text="${departments[1].id}"></p>
    <p th:text="${departments[1].name}"></p>

    <p>#object用法,以下三种用法是等效的</p>
    <div th:object="${departments[1]}">
        <p th:text="${#object.id}"></p>
        <p th:text="*{id}"></p>
        <p th:text="${departments[1].id}"></p>
    </div>

URL表达式
链接 URL 表达式语法是 @{...}

有不同类型的 URLs:

绝对路径 URLs: http://localhost:8888/demo/index
相对路径 URLs:
- 页面相对: user/login.html
- 上下文相对: /employee/emps 注意用 / 打头, 会自动把上下文路径(比如 http://localhost:8888/demo) 路径加上去.
- 服务器相对(不重要)
- 协议相对(不重要)

<!-- Common styles and scripts -->
<link rel="stylesheet" type="text/css" media="all" th:href="@{/assets/css/base.css}">
<!-- http://localhost:8083/assets/ext/jquery-3.1.1-min.js  -->
<script type="text/javascript" th:src="@{/assets/ext/jquery-3.1.1-min.js}"></script>
<!-- http://localhost:8083/assets/js/codergege.js  -->
<script type="text/javascript" th:src="@{/assets/js/codergege.js}"></script>

    <a href="#" th:href="@{/}">返回首页</a>
    <br/>
    <a href="#" th:href="@{/test.html}">去 demo1 页面</a>
    <!-- 会生成 url: http://localhost:8083/thymeleaf/demo1?username=name0&id=0 -->
        <a href="#" th:href="@{/thymeleaf/demo1(username=${departments[0].name}, id=${departments[0].id})}">去 demo1 页面, 带参数</a> <br/>
    <!-- 会生成 url: http://localhost:8083/demo/thymeleaf/demo1/1/name1 RESTful 风格的 url -->
    <a href="#" th:href="@{/thymeleaf/demo1/{empId}/{name}(empId=${departments[1].id},name=${departments[1].name})}">去 demo1 页面, 带 RESTful 风格参数</a> <br/>

目录结构:

image.png

判断if

<div th:if="${departments.size() > 0} == true">条件是真, div 内会被解析, 内容会显示
    <div>
        <div th:if="${departments.size() > 0} == false">条件是假, 这个 div 元素不会被解析, 所以不会显示
            <div>
                <div th:if="${(departments.size() > 0) == true}">
                    == 可以放在 {} 内部, 这种情况下, 表达式计算用的是 ognl/spel 引擎. 条件是真, div 内会被解析, 内容会显示
                </div>
            </div>
        </div>
    </div>
</div>

boolean 类型并且值是 true, 返回 true
数值类型并且值不是 0, 返回 true
字符类型(Char)并且值不是 0, 返回 true
String 类型并且值不是 "false", "off", "no", 返回 true
不是 boolean, 数值, 字符, String 的其他类型, 返回 true
值是 null, 返回 false

字符串连接

<span th:text="'Some literal text and ' + ${departments[0].name}"></span>

变量替换

<p th:text="|一共有 ${departments.size()} 个部门|"></p>
<!-- 等价于下面 -->
<p th:text="'一共有 ' + ${departments.size()} + ' 个部门'"></p>
<!--还可以混合使用-->
<p th:text="'一共有 ' + |${departments.size()} 个部门|"></p>

算术运算符

<div th:with="isEven = (${departments.size()} % 2 == 0)">
    <div th:text="${departments.size()} % 2"></div>
    <div th:text="${isEven}"></div>
</div>

<!-- 也可以包含在 {} 内, 那么 {} 内的整体就是一个 ognl/spel 表达式, 由 ognl/spel 引擎负责计算 -->
<div th:with="isOdd = ${departments.size() % 2 == 1}">
    <span th:if="${isOdd}">是奇数</span>
    <span th:if="!${isOdd}">是偶数</span>
</div>

比较运算符

<!-- >, <, 必须转意才能用 -->
<div th:if="${departments.size()} &gt; 1">
    <span th:text="|部门数量是 ${departments.size()}|"></span>
</div>
<!-- 可以用 gt, lt, ge, le 来代替, 这种比较好 -->
<div th:if="${departments.size()} ge 7">
    <span>至少有7 个部门</span>
</div>

条件表达式与默认表达式
No-Op 操作符(_)
No-Op 操作符指明期待的表达式结果不做任何事情. 比如说 th:text 中最后计算结果是 _
那么 th:text 元素根本就不会生成.

<p th:text="_">这里的内容不会被 th:text 替换</p>
<p th:text="${employees[0].email}?: _">没有指定电子邮箱</p>

追加属性

<p class="row" th:classappend="odd">aaaaa</p>
<p class="row" th:classappend="${employees[0].id % 2 == 0} ? 'odd'">aaaaa</p>

布尔属性

<form action="#" th:object="${employees[0]}">
    男 <input type="radio" name="gender" th:checked="*{gender % 2} == 1">
    女 <input type="radio" name="gender" th:checked="*{gender % 2} == 0">
</form>

迭代

<ul>
    <li>
        <span class="list">编号</span>
        <span class="list">姓名</span>
        <span class="list">性别</span>
        <span class="list">生日</span>
        <span class="list">部门</span>
        <span class="list">编辑</span>
        <span class="list">删除</span>
    </li>
    <li th:each="emp : ${employees}">
        <span class="list" th:text="${emp.id}"></span>
        <span class="list" th:text="${emp.name}"></span>
        <span class="list" th:text="${emp.gender == 1} ? '男': '女'"></span>
        <span class="list" th:text="${emp.birthday}"></span>
        <span class="list" th:text="${emp.department.name}"></span>
        <span class="list"><a href="#">编辑</a></span>
        <span class="list"><a href="#">删除</a></span>
    </li>
</ul>

保存迭代状态

th:each 还提供了一个变量可以保存迭代状态. 用法是 th:each="emp, status: ${employees}"

状态变量保存了以下数据:

index 属性, 0 开始的索引值
count 属性, 1 开始的索引值
size 属性, 集合内元素的总量
current 属性, 当前的迭代对象
even/odd 属性, boolean 类型的, 用来判断是否是偶数个还是奇数个
first 属性, boolean 类型, 是否是第一个
last 属性, boolean 类型, 是否是最后一个

<ul>
    <li>
        <span class="list">编号</span>
        <span class="list">姓名</span>
        <span class="list">性别</span>
        <span class="list">生日</span>
        <span class="list">部门</span>
        <span class="list">编辑</span>
        <span class="list">删除</span>
        <span class="list status">当前迭代状态</span>
    </li>
    <li th:each="emp, status: ${employees}" th:class="${status.odd} ? 'odd': 'even'">
        <span class="list" th:text="${emp.id}"></span>
        <span class="list" th:text="${emp.name}"></span>
        <span class="list" th:text="${emp.gender == 1} ? '男': '女'"></span>
        <span class="list" th:text="${{emp.birthday}}"></span>
        <span class="list" th:text="${emp.department.name}"></span>
        <span class="list"><a href="#">编辑</a></span>
        <span class="list"><a href="#">删除</a></span>
        <span class="list status" th:text="|index: ${status.index}; count: ${status.count}; size: ${status.size}; first: ${status.first}|"></span>
    </li>
</ul>

if 和 unless

th:unless 是 th:if 的相反条件, 所以只用 th:if 就可以了.

th:if 如果返回 true, 其所在的 html 元素会被 thymeleaf 解析. 返回 false, 就当这
个 html 元素不存在了.

不只是布尔值的 true 和 false, th:if 表达式返回其他值时也会被认为是 true 或 false.

规则如下:

值是非 null:

<div th:if="${employees}">
    todo 显示 employees 列表
</div>
<div th:if="not ${employees}">
    这里不会显示
</div>

switch

<div th:switch="${employees.size()}">
    <p th:case="1">1 个</p>
    <p th:case="2">2 个</p>
    <p th:case="3">3 个</p>
    <p th:case="*">很多个</p>
</div>

内置基本对象

对象	描述
#ctx	上下文对象
#vars	同 #ctx，表示上下文变量
#locale	上下文本地化（特定的地理区域）变量，可参考 java.util.Locale
#request	HttpServletRequest 对象，可参考 javax.servlet.http.HttpServletRequest
#response	HttpServletResponse 对象，可参考 javax.servlet.http.HttpServletResponse
#session	HttpSession 对象，可参考 javax.servlet.http.HttpSession
#servletContext	ServletContext 对象，可参考 javax.servlet.ServletContext


<p th:text="${#ctx.getLocale()}"></p>
<p th:text="${#locale}"></p>
<p th:text="${#vars.getLocale()}"></p>

<!-- HTTP/1.1 -->
<p th:text="${#request.protocol}"></p>
<!-- http -->
<p th:text="${#request.scheme}"></p>
<!-- localhost -->
<p th:text="${#request.serverName}"></p>
<!-- 8080 -->
<p th:text="${#request.serverPort}"></p>
<!-- GET -->
<p th:text="${#request.method}"></p>
<!-- /standard-expression-syntax/variables -->
<p th:text="${#request.requestURI}"></p>
<!-- http://localhost:8080/standard-expression-syntax/variables -->
<p th:text="${#request.requestURL}"></p>
<!-- /standard-expression-syntax/variables -->
<p th:text="${#request.servletPath}"></p>
<!-- java.util.Collections$3@203646fe -->
<p th:text="${#request.parameterNames}"></p>
<!-- {q=[Ljava.lang.String;@3308c69f} -->
<p th:text="${#request.parameterMap}"></p>
<!-- q=expression -->
<p th:text="${#request.queryString}"></p>
<!--取参数-->
<p th:text="${param.usrname}"></p>

<!-- 200 -->
<p th:text="${#response.status}"></p>
<!-- 8192 -->
<p th:text="${#response.bufferSize}"></p>
<!-- UTF-8 -->
<p th:text="${#response.characterEncoding}"></p>
<!-- text/html;charset=UTF-8 -->
<p th:text="${#response.contentType}"></p>

<!-- 2BCB2A0EACFF2D9D249D9799431B5127 -->
<!--<p th:text="${#session.id}"></p>-->
<!-- 1499786693244 -->
<!--<p th:text="${#session.lastAccessedTime}"></p>-->
<!-- fanlychie -->
<!--<p th:text="${#session.getAttribute('user').name}"></p>-->

工具类

对象	描述
#messages	消息工具类，与＃{…} 作用相同
#uris	地址相关的工具类
#conversions	对象转换工具类
#dates	日期时间工具类
#calendars	日历工具类
#numbers	数字工具类
#strings	字符串工具类
#objects	对象工具类
#bools	布尔工具类
#arrays	数组工具类
#lists	List 工具类
#sets	Set 工具类
#maps	Map 工具类

<p th:text="${#strings.isEmpty(message)}"></p>
<p th:text="${#strings.substring('200',1)}"></p>
<!-- 2017-07-12 00:37:25 -->
<p th:text="${#dates.format(now, 'yyyy-MM-dd HH:mm:ss')}"></p>

二元运算符：(value) ?: (defaultValue)。
其中，value非空（null）即真，条件为真时输出value，否则输出defaultValue。假设token = null，user.email = fanlychie@gmail.com

<!-- 你还没有登录，请先登录 -->
<p th:text="${token} ?: '你还没有登录，请先登录'"></p>
<!-- fanlychie@gmail.com -->
<p th:text="${user.email} ?: '你还没有绑定邮箱'"></p>

无操作符
当模板运行在服务器端时，Thymeleaf 会解析th:*属性的具体值替换标签体的内容。无操作符（_）则允许你使用原型标签体的内容作为默认值：

<!-- 你还没有登录，请先登录 -->
<p th:text="${token} ?: _">你还没有登录，请先登录</p>

定义局部变量

<p th:with="name='fanlychie'">
    <span th:text="${name}"></span>
</p>

SpringBoot & Thymeleaf项目实战
web模板语言-thymeleaf thymeleaf[https://www.thymeleaf.org/] 项...
SpringBoot系列（六）集成thymeleaf详解版
SpringBoot系列（六）集成thymeleaf详解版目录 thymeleaf简介 thymeleaf特点 ...
Thymeleaf模板引擎和Webjars联合使⽤
添加Thymeleaf依赖 1、添加Thymeleaf依赖
thymeleaf教程
目录 thymeleaf的定义spring boot整合thymeleaf语法参考文档thymeleaf笔记thy...
第5章集成Thymeleaf模版引擎
5.1、Thymeleaf 5.1.1、Thymeleaf 简介模板引擎：Thymeleaf 是一种用于Web和...
Thymeleaf模板和Webjars的联合使用
一、Thymeleaf 1.thymeleaf是什么? Thymeleaf 是一个跟 Velocity、FreeM...
Thymeleaf 模板引擎
一、Thymeleaf 的概念和用法 1.Thymeleaf 介绍 Thymeleaf 是用于 Web 和独立环境...
Java Springboot 整合Thymeleaf(Spri
thymeleaf使用详解 Thymeleaf 是个什么？简单说， Thymeleaf 是一个跟 Veloci...
引入模板引擎thymeleaf
1、pom.xml 注入模板引擎thymeleaf依赖，切换thymeleaf版本为3.0 2、thymeleaf...
Spring Boot 集成 Thymeleaf 模板引擎
Thymeleaf 模板引擎 1. Thymeleaf 介绍 Thymeleaf 是适用于 Web 和独立环境的现...