文章目录

1：认识Thymeleaf
2：Spring boot 集成 Thymeleaf
3：Thymeleaf语法

3.1 Thymeleaf 的标准表达式

3.1.1 标准变量表达式
3.1.2 选择变量表达式
3.1.3 URL表达式

3.2 Thymeleaf 的常见属性
3.3 Thymeleaf 字面量
3.4 Thymeleaf 字符串拼接
3.5 Thymeleaf 三元运算判断
3.6 Thymeleaf 运算和关系判断
3.7 Thymaleaf 表达式对象

4：Thymeleaf 在 SpringBoot 中的配置大全

1：认识Thymeleaf

Thymeleaf是一个流行的模板引擎，该模板引擎采用Java语言开发；
模板引擎是一个技术名词，是跨领域跨平台的概念，在Java语言体系下有模板引擎，在C#、PHP语言体系下也有模板引擎，甚至在JavaScript中也会用到模板引擎技术；
Java生态下的模板引擎有 Thymeleaf 、Freemaker、Velocity、Beetl（国产）等；
Thymeleaf模板既能用于web环境下，也能用于非web环境下，在非web环境下， 它能直接显示模板上的静态数据，在web环境下，它能像JSP一样从后台接收数据并替换掉模板上的静态数据；
Thymeleaf 它是基于HTML的，以HTML标签为载体，Thymeleaf 要寄托在HTML的标签下实现对数据的展示；
Spring boot 集成了thymeleaf模板技术，并且spring boot官方也推荐使用thymeleaf来替代JSP技术。
thymeleaf是另外的一种模板技术，它本身并不属于springboot，springboot只是很好地集成这种模板技术，作为前端页面的数据展示；

2：Spring boot 集成 Thymeleaf

Springboot使用thymeleaf作为视图展示，约定将模板文件放置在src/main/resource/templates目录下，静态资源放置在src/main/resource/static目录下

Spring boot 集成 Thymeleaf的步骤：
第一步：在Maven中引入Thymeleaf的依赖，加入以下依赖配置即可：
pom.xml

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

第二步：在Spring boot的核心配置文件application.properties中对Thymeleaf进行配置：

application.properties

#开发阶段，建议关闭thymeleaf的缓存（为热部署做准备）
spring.thymeleaf.cache=false

#使用遗留的html5以去掉对html标签的校验
spring.thymeleaf.mode=LEGACYHTML5

注意：1：在使用springboot的过程中，如果使用thymeleaf作为模板文件，则要求HTML格式必须为严格的html5格式，必须有结束标签，否则会报错；
:2：如果不想对标签进行严格的验证，使用spring.thymeleaf.mode=LEGACYHTML5（在application.properties中配置）去掉验证，去掉该验证，则需要引入如下依赖，否则会报错：

pom.xml

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

NekoHTML是一个Java语言的 HTML扫描器和标签补全器 ,这个解析器能够扫描HTML文件并“修正”HTML文档中的常见错误。NekoHTML能增补缺失的父元素、自动用结束标签关闭相应的元素，修复不匹配的内嵌元素标签等；

第三步：测试
写一个Controller去映射到模板页面（和SpringMVC基本一致），

@Controller
public class HelloController {

    @GetMapping("/thymeleaf")
    public String hello(Model model){
        model.addAttribute("msg","你好thymeleaf");
        return "success";
    }
}

在src/main/resources的templates下新建一个index.html页面用于展示数据：
success.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a th:text="${msg}">demo</a>
</body>
</html>

在这里插入图片描述

3：Thymeleaf语法

3.1 Thymeleaf 的标准表达式

3.1.1 标准变量表达式

语法：${…}
变量表达式用于访问容器（tomcat）上下文环境中的变量，功能和 JSTL 中的 ${} 相同；
Thymeleaf 中的变量表达式使用 ${变量名} 的方式获取其中的数据
举例：在Spring mvc 的 Controllar中使用map.put向前端传输数据，代码如下：

HelloController .java

@Controller
public class HelloController {

   @RequestMapping("/hello")
   public String hello(Map<Object,Object> map){
       Student student=new Student("zzz",14,"90");
       map.put("msg",student);
        return "sucess";
   }
}

前端接受代码
sucess.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
<a th:text="${msg.getName()}">ad</a>
<a th:text="${msg.getAge()}">ad</a>
<a th:text="${msg.getCore()}">ad</a>
</body>
</html>

在这里插入图片描述

3.1.2 选择变量表达式

语法：{…}
选择变量表达式，也叫星号变量表达式，使用 th:object 属性来绑定对象，

选择表达式首先使用th:object来邦定后台传来的User对象，然后使用 * 来代表这个对象，后面 {} 中的值是此对象中的属性；

举例：
HelloController .java

@Controller
public class HelloController {

   @RequestMapping("/hello")
   public String hello(Map<Object,Object> map){
       Student student=new Student("zzz",14,"90");
       map.put("msg",student);
        return "sucess";
   }
}

sucess.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
<p>选择变量表达式，也叫星号变量表达式，使用 th:object 属性来绑定对象，比如：</p>
<div th:object="${msg}">
<a th:text="*{getName()}">ad</a>
<a th:text="*{getAge()}">ad</a>
<a th:text="*{getCore()}">ad</a>
</div>
<p>也可以不使用 th:object 进行对象的选择，而直接使用 *{...} 获取数据，比如：</p>
<a th:text="*{msg.getCore()}"></a>
<a th:text="*{msg.getAge()}"></a>
<a th:text="*{msg.getName()}"></a>
<p>标准变量表达式和选择变量表达式可以混合一起使用，比如：：</p>
<div th:object="${msg}">
<a th:text="${msg.getName()}"></a>
    <a th:text="*{getAge()}"></a>
    <!---->
    <a th:text="*{getCore()}"></a>
</div>

</body>
</html>

在这里插入图片描述

选择变量表达式 *{…} 是另一种类似于变量表达式 ${…} 表示变量的方法；（通过 th:object 属性指明选择变量表达式的求解对象；）
选择变量表达式在执行时是在选择的对象上求解，而${…}是在上下文的变量Model上求解；

3.1.3 URL表达式

语法：@{…}
URL表达式可用于

 < script src="...">、<link href="...">、
 <a href="...">等

绝对URL，比如：

<a href="info.html" th:href="@{'http://localhost:8080/boot/user/info?id='+${user.id}}">查看</a>

相对URL，相对于页面，比如：

<a href="info.html" th:href="@{'user/info?id='+${user.id}}">查看</a>

相对URL，相对于项目上下文，比如：

<a href="info.html" th:href="@{'/user/info?id='+${user.id}}">查看</a> （项目的上下文名会被自动添加）

3.2 Thymeleaf 的常见属性

th:action
定义后台控制器的路径，类似标签的action属性

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

th:each
这个属性非常常用，比如从后台传来一个对象集合那么就可以使用此属性遍历输出，此属性既可以循环遍历集合，也可以循环遍历数组及Map，比如：
举例：

HelloController .java

@Controller
public class HelloController {

   @RequestMapping("/hello")
   public String hello(Map<Object,Object> map){
       Student student=new Student("zzz",14,"90");
       Student student1=new Student("zlj",19,"88");
       ArrayList arrayList=new ArrayList();
       Map<String,String> map1=new HashMap<String, String>();
       map.put("k1","v1");
       map.put("k2","v2");

       arrayList.add(student);
       arrayList.add(student1);
       map.put("msg",arrayList);
       map.put("msg1",map1);
        return "sucess";
   }
}

sucess.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
<p>循环遍历数组</p>
<tr th:each="a,interStat : ${msg}">
    <td th:text="${a.id}"></td>
    <td th:text="${a.age}"></td>
    <td th:text="${a.core}"></td>
</tr>
<p>map演示</p>
<tr>
    <th></th>
    ....
</tr>
<tr th:each="b,interStat : ${msg1}">
    <td th:text="${b.getKey()}"></td>
    <td th:text="${b.getValue()}"></td>
    <td th:text="${interStat.count}"></td>
    <td th:text="${interStat.index}"></td>
    <td th:text="${interStat.size}"></td>
    <td th:text="${interStat.first}"></td>
    <td th:text="${interStat.last}"></td>
    <td th:text="${interStat.odd}"></td>
    <td th:text="${interStat.even}"></td>
    <td th:text="${interStat.current}"></td>
</tr>
</body>
</html>

interStat是循环体的信息，通过该变量可以获取如下信息：index、size、count、even、odd、first、last，其含义如下：

在这里插入图片描述

th:href
定义超链接，比如：

<a  class="login" th:href="@{/login}">登录</a>

th:id
类似html标签中的id属性，比如：

<span th:id="${hello}">aaa</span>

th:if
条件判断，比如后台传来一个变量，判断该变量的值，1为男，2为女：
th:unless

th:unless是th:if的一个相反操作，上面的例子可以改写为：

ThIfAndUnless .java

@Controller
public class ThIfAndUnless {

    @RequestMapping("/hellos")
    public String demo(Map<String,Object> map){

         map.put("sex",1);

        return "thif";
    }
}

thif.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>th:if的演示</p>
<div th:if="${sex}==1">
    <a th:value="男"></a>
</div>
<div th:if="${sex}==2">
    <a th:value="女"></a>
</div>

<p>th:unless的演示</p>
<div th:unless="${sex}==1">
    <a th:value="女"></a>
</div>
<div th:unless="${sex}==2">
    <a th:value="男"></a>
</div>
</body>
</html>

在这里插入图片描述

th:switch/th:case
switch，case判断语句：

Thswitchcase.java

@Controller
public class Thswitchcase {

    @RequestMapping("/demo")
    public String demo(Map<String,Object> map){

        map.put("sex",1);
        return "thswitchcase";
    }
}

thswitchcsase.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:switch="${sex}">
    <p th:case="1">男</p>
    <p th:case="2">女</p>
    <p th:case="*">未知</p>

</div>
<div th:switch="${sexs}">
    <p th:case="1">男</p>
    <p th:case="2">女</p>
    <p th:case="*">未知</p>

</div>
</body>
</html>

一旦某个case判断值为true，剩余的case则都当做false，“*”表示默认的case，前面的case都不匹配时候，执行默认的case；

在这里插入图片描述

th:object

用于数据对象绑定，通常用于选择变量表达式（星号表达式）

th:src
用于外部资源引入，比如< script >标签的src属性，< img >标签的src属性，常与@{}表达式结合使用；

<script th:src="@{/static/js/jquery-2.4.min.js}"></script>
<img th:src="@{/static/image/logo.png}"/>

th:text
用于文本的显示

<input type="text" id="realName" name="reaName" th:text="${realName}">

th:value

类似html标签中的value属性，能对某元素的value属性进行赋值，比如：

<input type="hidden" id="userId" name="userId" th:value="${userId}">

th:attr

该属性也是用于给HTML中某元素的某属性赋值，但该方式写法不够优雅，比如上面的例子可以写成如下形式：

<input type="hidden" id="userId" name="userId" th:attr="value=${userId}" >

3.3 Thymeleaf 字面量

文本字面量

用单引号’…'包围的字符串为文本字面量，比如：

<a th:href="@{'api/getUser?id=' + ${user.id}}">修改</a>

数字字面量

<p>今年是<span th:text="2017">1949</span>年</p>
<p>20年后, 将是<span th:text="2017 + 20">1969</span>年</p>

boolean字面量

<p th:if="${isFlag} == false">false在花括号外面，解析识别由Thymleaf自身完成</p>

<p th:if="${isFlag == true}">false写在花括号里面，解析识别由SpringEL完成</p>

null字面量

<p th:if="${userlist == null}">userlist为空</p>
<p th:if="${userlist != null}">userlist不为空</p>

3.4 Thymeleaf 字符串拼接

一种是字面量拼接：

<a href="#" th:text="'第'+${sex}+'页 ,共'+${sex}+'页'"></a>

另一种更优雅的方式，使用“|”减少了字符串的拼接：

<a href="#" th:text="|第${sex}页，共${sex}页|"></a>

3.5 Thymeleaf 三元运算判断

<span th:text="${sex eq '1'} ? '男' : '女'">未知</span>

3.6 Thymeleaf 运算和关系判断

算术运算：+ , - , * , / , %
关系比较: > , < , >= , <= ( gt , lt , ge , le )
相等判断：== , != ( eq , ne )

3.7 Thymaleaf 表达式对象

基本对象

模板引擎提供了一组内置的对象，这些内置的对象可以直接在模板中使用，这些对象由#号开始引用

#ctx：上下文对象
#vars：上下文变量
#locale: 上下文语言环境.
#httpServletRequest： (仅在web上下文)相当于HttpServletRequest 对象，这是2.x版本，若是3.x版本使用 #request；
#httpSession： (仅在web上下文)相当于HttpSession 对象，这是2.x版本，若是3.x版本使用#session； 需要在后台controller中设置了session

功能对象
- 模板引擎提供的一组功能性内置对象，可以在模板中直接使用这些对象提供的功能方法：
- 工作中常使用的数据类型，如集合，时间，数值，可以使用thymeleaf的提供的功能性对象来解析他们；
- 内置功能对象前都需要加#号，内置对象一般都以s结尾；

#dates: java.util.Date对象的实用方法，

<span th:text="${#dates.format(curDate, 'yyyy-MM-dd HH:mm:ss')}"></span>

#calendars: 和dates类似, 但是 java.util.Calendar 对象；
#numbers: 格式化数字对象的实用方法；
#strings: 字符串对象的实用方法： contains, startsWith, prepending/appending等；
#objects: 对objects操作的实用方法；
#bools: 对布尔值求值的实用方法；
#arrays: 数组的实用方法；
#lists: list的实用方法，比如<span th:text="${#lists.size(datas)}"></span>
#sets: set的实用方法；
#maps: map的实用方法；
#aggregates: 对数组或集合创建聚合的实用方法；

4：Thymeleaf 在 SpringBoot 中的配置大全

Thymeleaf的配置文件说明：

#spring.thymeleaf.cache = true ＃启用模板缓存。
#spring.thymeleaf.check-template = true ＃在呈现模板之前检查模板是否存在。
#spring.thymeleaf.check-template-location = true ＃检查模板位置是否存在。
#spring.thymeleaf.content-type = text/html ＃Content-Type值。
#spring.thymeleaf.enabled = true ＃启用MVC Thymeleaf视图解析。
#spring.thymeleaf.encoding = UTF-8 ＃模板编码。
#spring.thymeleaf.excluded-view-names = ＃应该从解决方案中排除的视图名称的逗号分隔列表。
#spring.thymeleaf.mode = HTML5 ＃应用于模板的模板模式。另请参见StandardTemplateModeHandlers。
#spring.thymeleaf.prefix = classpath:/templates/ ＃在构建URL时预先查看名称的前缀。
#spring.thymeleaf.suffix = .html ＃构建URL时附加到查看名称的后缀。
#spring.thymeleaf.view-names = ＃可以解析的视图名称的逗号分隔列表。
#spring.thymeleaf.template-resolver-order = ＃链中模板解析器的顺序。

福建选手阿俊

发布了186 篇原创文章 · 获赞 189 · 访问量 3万+

私信关注

Thymeleaf学习总结——前后端的桥梁

文章目录

1：认识Thymeleaf

2：Spring boot 集成 Thymeleaf

3：Thymeleaf语法

3.1 Thymeleaf 的标准表达式

3.1.1 标准变量表达式

3.1.2 选择变量表达式

3.1.3 URL表达式

3.2 Thymeleaf 的常见属性

3.3 Thymeleaf 字面量

3.4 Thymeleaf 字符串拼接

3.5 Thymeleaf 三元运算判断

3.6 Thymeleaf 运算和关系判断

3.7 Thymaleaf 表达式对象

4：Thymeleaf 在 SpringBoot 中的配置大全

猜你喜欢