SpringBoot_集成Thymeleaf模板

认识Thymeleaf【读音同 thyme leaf英 [taim li:f] 美 [ta?m lif]】

Thymeleaf是一个流行的模板引擎，该模板引擎采用Java语言开发；

模板引擎是一个技术名词，是跨领域跨平台的概念，在Java语言体系下有模板引擎，在C#、PHP语言体系下也有模板引擎，甚至在JavaScript中也会用到模板引擎技术；

Java生态下的模板引擎有 Thymeleaf 、Freemaker、Velocity、Beetl（国产） 等；

Thymeleaf模板既能用于web环境下，也能用于非web环境下，在非web环境下，它能直接显示模板上的静态数据，在web环境下，它能像JSP一样从后台接收数据并替换掉模板上的静态数据；

Thymeleaf 它是基于HTML的，以HTML标签为载体，Thymeleaf 要寄托在HTML的标签下实现对数据的展示；

Thymeleaf的官方网站：http://www.thymeleaf.org；

Spring boot 集成了thymeleaf模板技术，并且spring boot官方也推荐使用thymeleaf来替代JSP技术；

thymeleaf是另外的一种模板技术，它本身并不属于springboot，springboot只是很好地集成这种模板技术，作为前端页面的数据展示；

Spring boot 集成 Thymeleaf

Spring boot 集成 Thymeleaf

1、第一步：在Maven中引入Thymeleaf的依赖，加入以下依赖配置即可：

<dependency>

    <groupId>org.springframework.boot</groupId>

    <artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

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

#开发阶段，建议关闭thymeleaf的缓存

spring.thymeleaf.cache=false

#使用遗留的html5以去掉对html标签的校验

spring.thymeleaf.mode=LEGACYHTML5

在使用springboot的过程中，如果使用thymeleaf作为模板文件，则要求HTML格式必须为严格的html5格式，必须有结束标签，否则会报错；

如果不想对标签进行严格的验证，使用spring.thymeleaf.mode=LEGACYHTML5去掉验证，去掉该验证，则需要引入如下依赖，否则会报错：

 <dependency>

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

             <artifactId>nekohtml</artifactId>

</dependency>

<dependency>

             <groupId>org.unbescape</groupId>

             <artifactId>unbescape</artifactId>

             <version>1.1.5.RELEASE</version>

</dependency>

NekoHTML是一个Java语言的 HTML扫描器和标签补全器 ,这个解析器能够扫描HTML文件并“修正”HTML文档中的常见错误。

NekoHTML能增补缺失的父元素、自动用结束标签关闭相应的元素，修复不匹配的内嵌元素标签等；

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

@RequestMapping("/index")

public String index (Model model) {

    model.addAttribute("data", "恭喜，Spring boot集成 Thymeleaf成功！");

    //return 中就是你页面的名字（不带.html后缀）

    return "index";

}

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

HTML页面的<html>元素中加入以下属性：<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="${data}">Spring boot集成 Thymeleaf</p>

</body>

</html>

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

Thymeleaf 的标准表达式

Thymeleaf 的标准表达式主要有如下几类：

1、标准变量表达式

语法：${...}

变量表达式用于访问容器（tomcat）上下文环境中的变量，功能和 JSTL 中的 ${} 相同；

Thymeleaf 中的变量表达式使用 ${变量名} 的方式获取其中的数据

比如在Spring mvc 的 Controllar中使用model.addAttribute向前端传输数据，代码如下：

@RequestMapping(value="/userinfo")

public String userinfo (Model model) {

    User user = new User();

    user.setId(1);

    user.setNick("昵称");

    user.setPhone("13700020000");

    user.setAddress("北京大兴");

    model.addAttribute("user", user);

    model.addAttribute("hello", "helloworld");

    return "user";

}

前端接收代码：

<span th:text="${user.nick}">x</span>

<span th:text="${user.phone}">137xxxxxxxx</span>

<span th:text="${user.email}">[email protected]</span>

<span th:text="${user.address}">北京.xxx</span>

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

其中，th:text="" 是Thymeleaf的一个属性，用于文本的显示；

2、选择变量表达式

语法：*{...}

选择变量表达式，也叫星号变量表达式，使用 th:object 属性来绑定对象，比如：

@RequestMapping(value="/userinfo")

public String userinfo (Model model) {

    User user = new User();

    user.setId(1);

    user.setNick("昵称");

    user.setPhone("13700020000");

    user.setAddress("北京大兴");

    model.addAttribute("user", user);

    model.addAttribute("hello", "helloworld");

    return "user";

}

前端接收代码

  <div th:object="${user}" >

    <p>nick: <span th:text="*{nick}">张</span></p>

    <p>phone: <span th:text="*{phone}" >三</span></p>

    <p>email: <span th:text="*{email}" >北京</span></p>

    <p>address: <span th:text="*{address}" >北京</span></p>

</div>

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

选择变量表达式 *{...} 是另一种类似于变量表达式 ${...} 表示变量的方法；

选择变量表达式在执行时是在选择的对象上求解，而${...}是在上下文的变量Model上求解；

通过 th:object 属性指明选择变量表达式的求解对象；

上述代码等价于：

 <div>

    <p>nick: <span th:text="${user.nick}">张</span></p>

    <p>phone: <span th:text="${user.phone}" >三</span></p>

    <p>email: <span th:text="${user.email}" >北京</span></p>

    <p>address: <span th:text="${user.address}" >北京</span></p>

</div>

标准变量表达式和选择变量表达式可以混合一起使用，比如：

  <div th:object="${user}" >

    <p>nick: <span th:text="*{nick}">张</span></p>

    <p>phone: <span th:text="${user.phone}" >三</span></p>

    <p>email: <span th:text="${user.email}" >北京</span></p>

    <p>address: <span th:text="*{address}" >北京</span></p>

</div>

也可以不使用 th:object 进行对象的选择，而直接使用 *{...} 获取数据，比如：

<div>

    <p>nick: <span th:text="*{user.nick}">张</span></p>

    <p>phone: <span th:text="*{user.phone}" >三</span></p>

    <p>email: <span th:text="*{user.email}" >北京</span></p>

    <p>address: <span th:text="*{user.address}" >北京</span></p>

</div>

3、URL表达式

语法：@{...}

URL表达式可用于 <script src="...">、<link href="...">、<a href="...">等

1、绝对URL，比如：

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

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

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

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

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

Thymeleaf 的常见属性

Thymeleaf 的常见属性

如下为thymeleaf的常见属性：

th:action

定义后台控制器的路径，类似<form>标签的action属性，比如：

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

th:each

这个属性非常常用，比如从后台传来一个对象集合那么就可以使用此属性遍历输出，它与JSTL中的<c: forEach>类似，此属性既可以循环遍历集合，也可以循环遍历数组及Map，比如：

<tr th:each="user, interStat : ${userlist}">

    <td th:text="${interStat.index}"></td>

    <td th:text="${user.id}"></td>

    <td th:text="${user.nick}"></td>

    <td th:text="${user.phone}"></td>

    <td th:text="${user.email}"></td>

    <td th:text="${user.address}"></td>

</tr>

以上代码解读如下：

th:each="user, iterStat : ${userlist}" 中的 ${userList} 是后台传来的Key，

user是${userList} 中的一个数据，

iterStat 是 ${userList} 循环体的信息，

其中user及iterStat自己可以随便写；

interStat是循环体的信息，通过该变量可以获取如下信息：

index、size、count、even、odd、first、last，其含义如下：

　　index: 当前迭代对象的index（从0开始计算）

　　count: 当前迭代对象的个数（从1开始计算）

　　size: 被迭代对象的大小

　　current: 当前迭代变量

　　even/odd: 布尔值，当前循环是否是偶数/奇数（从0开始计算）

　　first: 布尔值，当前循环是否是第一个

　　last: 布尔值，当前循环是否是最后一个

注意：循环体信息interStat也可以不定义，则默认采用迭代变量加上Stat后缀，即userStat

Map类型的循环：

<div th:each="myMapVal : ${myMap}">

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

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

</div>

${myMapVal.key} 是获取map中的key，${myMapVal.value} 是获取map中的value；

数组类型的循环：

<div th:each="myArrayVal : ${myArray}">

     <div th:text="${myArrayVal}"></div>

</div>

th:href

定义超链接，比如：

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

th:id

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

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

th:if

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

<span th:if="${sex} == 1" >

          男：<input type="radio" name="se"  th:value="男" />

</span>

<span th:if="${sex} == 2">

          女：<input type="radio" name="se" th:value="女"  />

</span>

th:unless

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

<span th:unless="${sex} == 1" >

         女：<input type="radio" name="se"  th:value="女" />

</span>

<span th:unless="${sex} == 2">

         男：<input type="radio" name="se" th:value="男"  />

</span>

th:switch/th:case

switch，case判断语句，比如：

<div th:switch="${sex}">

      <p th:case="1">性别：男</p>

      <p th:case="2">性别：女</p>

      <p th:case="*">性别：未知</p>

</div>

一旦某个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}" >

Thymeleaf 字面量

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字面量

                  true和false

                  <p th:if="${isFlag} == false">

false在花括号外面，解析识别由Thymleaf自身完成

                  <p th:if="${isFlag == true}">

false写在花括号里面，解析识别由SpringEL完成

　　null字面量

 <p th:if="${userlist == null}">

userlist为空

</p>

<p th:if="${userlist != null}">

userlist不为空

</p>

Thymeleaf 字符串拼接

Thymeleaf 字符串拼接

一种是字面量拼接：

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

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

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

Thymeleaf 三元运算判断

Thymeleaf 三元运算判断

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

Thymeleaf 运算和关系判断

Thymeleaf 运算和关系判断

算术运算：+ , - , * , / , %

关系比较: > , < , >= , <= ( gt , lt , ge , le )

相等判断：== , != ( eq , ne )

Thymaleaf 表达式基本对象

Thymaleaf 表达式基本对象

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

2、官方手册：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

#ctx：上下文对象

#vars：上下文变量

#locale: 上下文语言环境.

#httpServletRequest： (仅在web上下文)相当于HttpServletRequest 对象，这是2.x版本，若是3.x版本使用 #request；

用法：

${#request.getContentextPath()}

${#request.getAttribute(“name”)}

控制器中：

页面中：

也可以这样显示：

#httpSession： (仅在web上下文)相当于HttpSession 对象，这是2.x版本，若是3.x版本使用#session； 需要在后台controller中设置了session

Thymaleaf 表达式功能对象

Thymaleaf 表达式功能对象

1、模板引擎提供的一组功能性内置对象，可以在模板中直接使用这些对象提供的功能方法：

2、工作中常使用的数据类型，如集合，时间，数值，可以使用thymeleaf的提供的功能性对象来解析他们；

3、内置功能对象前都需要加#号，内置对象一般都以s结尾；

4、官方手册：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

         #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: 对数组或集合创建聚合的实用方法；

Thymeleaf 在 SpringBoot 中的配置大全：

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.template-resolver-order = ＃链中模板解析器的顺序。

         #spring.thymeleaf.view-names = ＃可以解析的视图名称的逗号分隔列表。

原文地址：https://www.cnblogs.com/Tunan-Ki/p/11774279.html

时间： 2024-11-08 18:24:06

SpringBoot_集成Thymeleaf模板的相关文章

在Spring MVC和Spring Boot中使用thymeleaf模板

Spring MVC: POM: <!-- thymeleaf模板 --> <!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf --> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf</artifactId> <version>3.0.7.RELEA

Spring Boot学习记录(二)--thymeleaf模板

Spring Boot学习记录(二)–thymeleaf模板 标签(空格分隔): spring-boot 自从来公司后都没用过jsp当界面渲染了,因为前后端分离不是很好,反而模板引擎用的比较多,thymeleaf最大的优势后缀为html,就是只需要浏览器就可以展现页面了,还有就是thymeleaf可以很好的和spring集成.下面开始学习. 1.引入依赖 maven中直接引入 <dependency> <groupId>org.springframework.boot</gr

Thymeleaf模板引擎+Spring整合使用方式的介绍

尊重原创,原文地址为:https://www.cnblogs.com/jiangchao226/p/5937458.html 前言 这个教程介绍了Thymeleaf与Spring框架的集成,特别是SpringMvc框架. 注意Thymeleaf支持同Spring框架的3.和4.版本的集成,但是这两个版本的支持是封装在thymeleaf-spring3和thymeleaf-spring4这两个独立的库中,项目中需要根据实际情况分别引用. 样例代码针对的是spring4.,但一般情况下,spring

SpringBoot系列之集成Thymeleaf用法手册

目录 1.模板引擎 2.Thymeleaf简介 2.1).Thymeleaf定义 2.2).适用模板 3.重要知识点 3.1).th:text和th:utext 3.2).标准表达式 3.3).Thymeleaf遍历 3.4).公共模块抽取 3.5).行内写法介绍 3.6).Thymeleaf语法规则 4.SpringBoot集成 4.1).Springboot集成Thymeleaf简介 4.2).Thymeleaf自动配置源码简单分析 SpringBoot系列之Thymeleaf语法简单介绍

Spring Boot入门——thymeleaf模板使用

使用步骤 1.在pom.xml中引入thymeleaf <!-- thymeleaf插件 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> <version>1.5.3.RELEASE</version> </dependen

Thymeleaf模板引擎使用

Thymeleaf模板引擎使用 什么是Thymeleaf Thymeleaf是一个Java库.它是一个XML / XHTML / HTML5模板引擎,能够在模板文件上应用一组转换,将程序产生的数据或者文本显示到模板文件上. Thymeleaf依赖的jar包 要使用Thymeleaf,需要在我们的web应用的classpath路径中引入相关的jar,如下: thymeleaf-2.1.3.RELEASE.jarognl-3.0.6.jarjavassist-3.16.1-GA.jarunbesca

Thymeleaf模板引擎的初步使用

在springboot中,推荐使用的模板引擎是Thymeleaf模板引擎,它提供了完美的Spring MVC的支持.下面就简单的介绍一下Thymeleaf模板引擎的使用. 在controller层中,使用在类上使用@controller注解,注意的是,这里不是@restController注解,因为@restController注解是将结果作为json字符串进行返回的,并不是调用模板. 方法中,注入参数,Model model.然后同springmvc中的modelandview一样,model

spring boot Thymeleaf模板引擎 最简单输出例子

spring boot  Thymeleaf模板引擎  最简单输出例子 控制器代码如下: @GetMapping(value = "/test")public String test(Model model){ List<Boy> boy = new ArrayList<Boy>(); boy.add(new Boy("xx",11)); boy.add(new Boy("yy",22)); boy.add(new Boy

jdbcTemplate 和 Thymeleaf模板引擎 查询 到模板赋值例子

二.  jdbcTemplate 和 Thymeleaf模板引擎  最简单输出例子 控制器代码 @GetMapping(value = "/test2") public String test2(Model model){ sql = "SELECT * FROM boy "; List queryList = jdbcTemplate.queryForList(sql); model.addAttribute("boy", queryList)