Thymeleaf简单使用

Thymeleaf简介

Thymeleaf是一个流行的模板引擎，该模板引擎采用Java语言开发，模板引擎是一个技术名词，是跨领域跨平台的概念，在Java语言体系下有模板引擎，在C#、PHP语言体系下也有模板引擎。
Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。使用thymeleaf创建的html模板可以在浏览器里面直接打开（展示静态数据），这有利于前后端分离。需要注意的是thymeleaf不是spring旗下的。这里我们使用thymeleaf 3版本。

使用方法

1.添加thymeleaf依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2.添加thymeleaf依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

3.修改spring boot配置文件
在开发阶段，建议关闭thymeleaf的缓存

spring.thymeleaf.cache=false

thymeleaf会对html中的标签进行严格校验，如果html标签缺少结束标签的话，thymeleaf会报错，我们可以通过下面方式去除thymeleaf的校验，添加依赖：

 <dependency>
      <groupId>net.sourceforge.nekohtml</groupId>
      <artifactId>nekohtml</artifactId>
      <version>1.9.22</version>
  </dependency>

4.在spring boot配置文件中添加下面内容：

spring.thymeleaf.mode=LEGANCYHTML5

5.创建controller准备数据

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ThymeleafController {
    @RequestMapping("/hello")
    public String helloThymeleaf(Model model) {
        model.addAttribute("name", "jack");
        return "index";
    }

}

6.创建html页面
在resources/templates里面创建一个index.html，填写下面内容，注意添加这个xmlns:th=“http://www.thymeleaf.org”：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Spring boot集成 Thymeleaf</title>
</head>
<body>
<p th:text="${name}">Spring boot集成 Thymeleaf</p>
</body>
</html>

常见用法和标签

在这里插入图片描述

变量表达式

<html lang="zh" xmlns:th="http://www.thymeleaf.org">
${attr} -> 用法和jstl一致，获取model中携带的参数

选择表达式

*{attr} -> 方式一，获取model中携带的参数
<div th:object="${user}"> -> 方式二，获取变量中的属性
    <input type="text" th:field="*{username}"/><br/>
    <input type="text" th:field="*{password}"/><br/>
</div>

地址表达式

@{/static/image/image.jpg} ->  localhost:8080/static/image/image.jpg
资源表达式
在资源根目录下配置国际化文件
messages.properties -> attr = Default
messages_en_US.properties -> attr = English
messages_zh_CN.properties -> attr = Chinese
<span th:text="#{attr}">attr</span> -> 示例

基本表达式对象

＃ctx -> context
＃locale：contextScope
＃vars：contextVar
＃request -> HttpServletRequest
＃session -> HttpSession
＃servlet -> ContextServletContext
＃response -> HttpServletResponse

工具表达式对象

＃dates -> java.util.Date 
<span th:text="${#dates.format(date,'yyyy-MM-dd')}">2019-01-01</span>
＃calendars -> java.util.Calendar
＃numbers 数字格式化对象,参数1:格式化对象,参数2:保留整数位,参数3:保留小数位
<span th:text="${#numbers.formatDecimal(200,1,2)}">180.00</span>
＃strings -> java.lang.String
＃objects -> object
＃bools -> boolean
＃arrays -> array
＃lists -> list
＃sets -> set
＃maps -> map
＃aggregates 创建数组或集合的聚合的工具方法
＃messages 变量表达式内部获取外化消息
＃ids 处理id重复出现

片段表达式

<div th:insert="~{header :: header}"></div> -> 页面引入页眉

th:each 循环迭代

<ul>
    <li -> integerStat意为状态,命名规则是*Stat，*意为循环变量integer
        th:each="integer,integerStat:${integers}">
        <span th:text="${integer}"/><br/>
    </li>
</ul>

th:text 普通文本

<span th:text="${span}">span</span>

th:utext 富文本

<span th:utext="${utext}"></span>

th:value 属性值

<input th:value="${value}"/>

th:href 超链接

<a href="/async" th:href="@{thymeleaf}">thymeleaf</a>

th:action 表单请求地址,th:method 表单请求方式

<form th:action="@{thymeleaf}" th:method="post">
    <input type="text" />
    <button type="submit" />
</form>

th:object 数据模型

<div th:object="${user}">
    <input type="text" th:field="*{username}"/>
    <input type="text" th:field="*{password}"/>
</div>

th:if 条件成立显示标签

<span th:if="${200 gt 100}">compare</span>

if-then -> true?true:false;

if-then-else -> true?(true?true:false):false
th:unless 条件不成立显示标签
<span th:unless="${200 lt 100}">compare</span> 
th:switch 显示条件成立的分支标签
<td th:switch="1">
    <input th:case="2" value="2"/>
    <input th:case="3" value="3"/>
    <input th:case="*" value="1"/> -> * as default
</td>

th:src 超链接地址

<img th:src="@{/static/image/image.jpg}" />

th:selected 下拉选择框

<select>
    <option>全部</option>
    <option th:selected="true">选中</option> -> 条件成立选中
    <option th:selected="false">不选中</option> -> 条件不成立不选中
</select>

th:attr 标签属性

<input th:attr="value=value,name=name"/> -> 设置属性
<input th:attrprepend="id=id"> -> 前追加属性
<input th:attrappend="class=class"> -> 后追加属性
th:checked 单选框或复选框选中
<input type="checkbox" th:checked="${true}"/>

th:id 标签唯一标识

<input th:id="id"/>

th:class 标签类名

<input th:class="class"/> -> 添加类名
<input th:classappend="append"/> -> 追加类名

th:with 局部变量

<div th:with="attr=${span}"> -> 定义局部变量
    <span th:text="${attr}"></span> -> 获取局部变量
</div>

th:style 标签样式

th:remove 标签移除

body:移除ul包含的标签|all:移除ul及其包含的标签|all-but-first：只保留第一个li
none:无效果|tag:删除当前标签(ul)
<ul th:remove="tag">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

th:block 控制标签显示

<th:block th:if="true">
    <span>block</span> -> 条件成立显示，不成立不显示
</th:block>

th:insert 插入页面

<div th:insert="~{header :: header}"></div> -> 第一个参数是页面名

th:include 包含页面

<div th:include="footer :: footer"></div> -> 第二个参数是页面片段名

th:replace 替代页面

<div th:replace="center :: center"></div> -> 同上

th:inline 内联

<script type="text/javascript" th:inline="javascript">
   var span = [[${span}]]; -> JS内联,获取后台数据
</script>
<span th:inline="text">[[${span}]]</span> -> 文本内联,获取后台数据
<span th:inline="none">[[${span}]]</span> -> 取消内联,标签体显示原文本

th:fragment 页面片段

<div th:fragment="header">
    thymeleaf header ! -> 作为页面片段被引入到主页面
</div>

|…| 字符串合并

<span th:text="${'*'+span}">pin</span> -> 方式一
<span th:text="|abc ${span}|">jie</span> -> 方式二

表达式支持的语法

字面（Literals）
文本文字（Text literals）:'one text', 'Another one!',…
数字文本（Number literals）: 0, 34, 3.0, 12.3,…
布尔文本（Boolean literals）: true, false
空（Null literal）: null
文字标记（Literal tokens）: one, sometext, main,…
文本操作（Text operations）
字符串连接(String concatenation):+
文本替换（Literal substitutions）:|The name is ${name}|
算术运算（Arithmetic operations）
二元运算符（Binary operators）: +, -, *, /, %
减号（单目运算符）Minus sign (unary operator):-
#######布尔操作（Boolean operations）

二元运算符（Binary operators）:and, or
布尔否定（一元运算符）Boolean negation (unary operator):!, not
比较和等价(Comparisons and equality)
比较（Comparators）: >, <, >=, <= (gt, lt, ge, le)
等值运算符（Equality operators）:==, != (eq, ne)

条件运算符（Conditional operators）
If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
Default: (value) ?: (defaultvalue)

所有这些特征可以被组合并嵌套：

'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))

尚宇园

发布了75 篇原创文章 · 获赞 12 · 访问量 850

私信关注

使用方法

常见用法和标签

表达式支持的语法

猜你喜欢