SpringBoot第五谈（SpringBoot集成Thymeleaf）

在这里插入图片描述

本人是一名物联网工程专业的学生，即将进入大三，写博客即是为了记录自己的学习历程，又希望能够帮助到很多和自己一样处于起步阶段的萌新。
临渊羡鱼，不如退而结网。一起加油！
博客主页:https://blog.csdn.net/qq_44895397

什么是Thymeleaf

Thymeleaf 是一个流行的模板引擎，该模板引擎采用 Java 语言开发
模板引擎是一个技术名词，是跨领域跨平台的概念，在 Java 语言体系下有模板引擎，在 C#、PHP 语言体系下也有模板引擎，甚至在 JavaScript 中也会用到模板引擎技术，Java 生态下的模板引擎有 Thymeleaf 、Freemaker、Velocity、Beetl（国产）等。
Thymeleaf 对网络环境不存在严格的要求，既能用于 Web 环境下，也能用于非 Web 环境下。在非 Web 环境下，他能直接显示模板上的静态数据；在 Web 环境下，它能像 Jsp 一样从后台接收数据并替换掉模板上的静态数据。它是基于 HTML 的，以 HTML 标签为载体，
Thymeleaf 要寄托在 HTML 标签下实现。
SpringBoot 集成了 Thymeleaf 模板技术，并且 Spring Boot 官方也推荐使用 Thymeleaf 来替代 JSP 技术，Thymeleaf 是另外的一种模板技术，它本身并不属于 Spring Boot，Spring Boot只是很好地集成这种模板技术，作为前端页面的数据展示，在过去的 Java Web 开发中，我们往往会选择使用 Jsp 去完成页面的动态渲染，但是 jsp 需要翻译编译运行，效率低

SpringBoot集成Thymeleaf

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

1、创建 Spring Boot 项目,添加 web 和 Thymeleaf 依赖

在这里插入图片描述
按照这种方式创建后，pom.xml 文件下会自动添加如下依赖

如果只是创建了spring boot工程没有选者thymeleaf模板，在pom.xml加入依赖即可：

<!--SpringBoot 集成 Thymeleaf 的起步依赖-->
<dependency>
 	<groupId>org.springframework.boot</groupId>
 	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!--SpringBoot 开发 web 项目的起步依赖-->
<dependency>
 	<groupId>org.springframework.boot</groupId>
 	<artifactId>spring-boot-starter-web</artifactId>
</dependency>

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

#thymeleaf 页面的缓存开关，默认 true 开启缓存
#关闭缓存后在启动项里面勾选Update resources可以实现热部署
spring.thymeleaf.cache=false

#设置访问前缀和后缀，可以不写，使用默认值即可
spring.thymeleaf.suffix=.html
spring.thymeleaf.prefix=classpath:/templates/

在这里插入图片描述

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

HTML 页面的元素中加入以下属性：

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

在这里插入图片描述

4、在html中动态获取值

在这里插入图片描述

开启热部署

1、关闭thymeleaf页面缓存

#thymeleaf 页面的缓存开关，默认 true 开启缓存
#关闭缓存后在启动项里面勾选Update resources可以实现热部署
spring.thymeleaf.cache=false

2、打开update resources

在这里插入图片描述

Thymeleaf的表达式

标准变量表达式

语法：${…}

在这里插入图片描述

<h1>标量选择表达式</h1>
<div>
    学生编号：<span th:text="${stu.id}"></span><br/>
    学生姓名：<span th:text="${stu.name}"></span><br/>
    学生年龄：<span th:text="${stu.age}"></span><br/>
</div>

选择变量表达式

使用 th:object 进行对象的选择，也可以直接使用 *{…} 获取数据
在这里插入图片描述

<h1>选择变量表达式</h1>
<div th:object="${stu}">
    学生编号：<span th:text="*{id}"></span><br/>
    学生姓名：<span th:text="*{name}"></span><br/>
    学生年龄：<span th:text="*{age}"></span><br/>
</div>

标准变量表达式和选择变量表达式混合使用

标准变量和选择变量表达式可以混合使用，也可以不混合使用

<h2>标准变量表达式和选择变量表达式混用</h2>
<h3>=======标准变量表达式=======</h3>
用户编号：<span th:text="${user.id}"></span><br/>
用户姓名：<span th:text="${user.name}"></span><br/>
用户手机号：<span th:text="${user.phone}"></span><br/>
用户地址：<span th:text="${user.address}"></span><br/>
<h3>=======选择变量表达式=======</h3>
用户编号：*{user.id} ==> <span th:text="*{user.id}"></span><br/>
用户姓名：*｛user.name｝ ==> <span th:text="*{user.name}"></span><br/>
用户手机号：*{user.phone} ==> <span th:text="*{user.phone}"></span><br/>
用户地址：*{user.address} ==> <span 
th:text="*{user.address}"></span><br/>

URL 表达式

在这里插入图片描述

<a th:href="@{http://localhost:8080/thymeleaf/info}">查看：绝对路径</a>

<h2>绝对路径（路径中有参数）</h2>
<a th:href="@{'http://localhost:8080/thymeleaf/user/info?id='+${user.id}}">查看用户信息：绝对路径(带参数)</a>

<h2>推荐使用：相对路径（没有参数）</h2>
<a th:href="@{/thymeleaf/info}">查看：相对路径</a>

<h2>推荐使用：相对路径（路径中有参数）</h2>
<a th:href="@{'/thymeleaf/user/info?id='+${user}}">查看用户信息相对路径（带参数）</a>
<a th:href="@{/thymeleaf/info(id=${user})}">推荐使用：优雅的带参数路径写法</a>

使用路径表达式常用的写法：

<a th:href="@{'/thymeleeaf/text2?id='+${student.id}}">相对路径带参数</a>

<a th:href="@{/thymeleeaf/text2/(id=${student.id})}">优雅的写法</a>

在这里插入图片描述
注意：

Thymeleaf 是以 html 为载体的，所以 html 不会认识${}语法。
我们请求的流程是，发送请求给服务器，服务器接收请求后，处理请求，跳转到指定的静态 html 页面，在服务器端，Thymeleaf 模板引擎会按照它的语法，对动态数据进行处理，所以如果要是 th 开头，模板引擎能够识别，会在服务器端进行处理，获取数据；如果没有以 th 开头，那么Thymeleaf 模板引擎不会处理，直接返回给客户端了

Thymeleaf的常见属性

th:method

设置请求方法

<h1>th:method 属性的使用</h1>
<form th:action="@{/user/login}" th:method="post"></form>

th:href

定义超链接，主要结合 URL 表达式,获取动态变量

<a th:href="@{'/thymeleeaf/text2?id='+${student.id}}">相对路径带参数</a>

<a th:href="@{/thymeleeaf/text2/(id=${student.id})}">优雅的写法</a>

th:src

用于外部资源引入，比如<script>标签的 src 属性，<img>标签的 src 属性，常与@{...}表达式结合使用，在 SpringBoot 项目的静态资源都放到 resources 的 static 目录下。放到 static 路径下的内容，写路径时不需要写上 static

在这里插入图片描述
这种方式比传统方式的好处是，在 URL 表达式前加/，会自动加上上下文根，避免 404 找不到资源的情况。

<h1>th:src 属性的使用</h1>
<!--以下方式无法引入 js-->
<script src="/static/js/jquery-1.7.2.min.js"></script>
<!--该方法是常用方法-->
<script type="text/javascript" 
th:src="@{/jquery-1.7.2.min.js}"></script>
<script>
 $(function () {
 alert("引入 js 文件");
 });
</script>

th:attr

该属性也是用于给 HTML 中某元素的某属性赋值，好处是可以给 html 中没有定义的属性动态的赋值。

<h1>th:attr 属性的使用</h1>
<span zhangsan="${user.name}"></span>
<!--通过 th:attr 对自定义的属性赋值-->
<span th:attr="zhangsan=${user.name}"></span>

th:text

用于文本的显示，该属性显示的文本在标签体中，如果是文本框，数据会在文本框外显示，
要想显示在文本框内，使用 th:value

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

th:object

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

th:each

遍历 List 集合

在这里插入图片描述
studentlistStat 是循环体的信息，通过该变量可以获取如下信息：

index: 当前迭代对象的 index（从 0 开始计算）
count: 当前迭代对象的个数（从 1 开始计算）这两个用的较多
size: 被迭代对象的大小
current: 当前迭代变量
even/odd: 布尔值，当前循环是否是偶数/奇数（从 0 开始计算）
first: 布尔值，当前循环是否是第一个
last: 布尔值，当前循环是否是最后一个

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

<h1>遍历List集合</h1>
<div th:each="student,studentlistStat:${studentlist}">
    学生编号<span th:text="${student.id}"></span>
    学生姓名<span th:text="${student.name}"></span>
    学生年龄<span th:text="${student.age}"></span>
</div>

在这里插入图片描述

遍历Map集合

在这里插入图片描述

<h1>map集合的遍历</h1>
<div th:each="student:${studentmap}">
    <span th:text="${studentStat.count}"></span>
    map集合的key：<span th:text="${student.key}"></span>
    map集合的value：<span th:text="${student.value}"></span>
    学生姓名：<span th:text="${student.value.name}"></span>
    学生年龄：<span th:text="${student.value.age}"></span>
    学生编号：<span th:text="${student.value.id}"></span>
</div>

遍历数组

<div th:each="user,userStat:${userArray}">
 <span th:text="${userStat.count}"></span>
 <span th:text="${user.id}"></span>
 <span th:text="${user.name}"></span>
 <span th:text="${user.phone}"></span>
 <span th:text="${user.address}"></span>
</div>

遍历：List 里面放 Map，Map 里面又放的是 List

在这里插入图片描述

<h1>混合遍历</h1>
<div th:each="studentlist:${list}">
    <!--对map集合遍历-->
    <div th:each="studentmap:${studentlist}">
        key:<span th:text="${studentmap.key}"></span>
        value:
        <div th:each="student:${studentmap.value}">
        学生姓名：<span th:text="${student.name}"></span>
            年龄：<span th:text="${student.age}"></span>
        </div>
    </div>
</div>

在这里插入图片描述

th:if 和 th:unless

<h1>if条件判断</h1>
<h1 th:if="${sex1 eq 1}">男</h1>
<h1 th:if="${sex1 eq 0}">女</h1>

<h1>unless条件判断</h1>
<h1 th:unless="${sex2 ne 1}">女</h1>
<h1 th:unless="${sex2 ne 0}">男</h1>

在这里插入图片描述

th:switch/th:case

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

<h1>swith/case</h1>
<div th:switch="${sex1}">
    <span th:case="1">男</span>
    <span th:case="0">女</span>
    <span th:case="*">没有性别</span>
</div>

在这里插入图片描述

th:inline

th:inline 有三个取值类型 (text, javascript 和 none)，值为 none 什么都不做，没有效果

（1）内敛文本（th:inline=”text”）

内敛文本表达式不依赖于 html 标签，直接使用内敛表达式[[表达式]]即可获取动态数据，但必须要求在父级标签上加 th:inline = “text”属性

可以将 th:inline="text"放到<body th:inline="text">标签中
在这里插入图片描述

<h1>内敛文本</h1>
<div th:inline="text">
    <span>[[name]]</span>
    <span>[[id]]</span>
    <span>[[age]]</span>
</div>

（2）内敛脚本（th:inline=”javascript”）

th:inline=”javascript”在 js 代码中获取后台的动态数据

在这里插入图片描述

<script type="text/javascript" th:inline="javascript">
 function showInlineJavaScript() {
 alert("欢迎 " + [[${user.name}]] + "电话 " + 
[[${user.phone}]]);
 }
</script>
<button th:onclick="showInlineJavaScript()">展示内容</button>

Thymeleaf字面量

字面量：对应数据类型的合法取值，可以在 html 页面直接使用，不需要后台传递

1)文本字面量

用单引号'...'包围的字符串为文本字面量

<h1>文本字面量：用单引号'...'包围的字符串</h1>
<a th:href="@{'/user/info?id=' + ${user.id}}">查看用户：文本字面的路径使用</a><br/>
<span th:text="您好"></span>

2)数字字面量

<h1>数字字面量</h1>
今年是<span th:text="2019">1949</span>年<br/>
20 年后，将是<span th:text="2019 + 20">1969</span>年<br/>

3)boolean 字面量

<h1>boolean 字面量</h1>
<div th:if="${success}">执行成功</div>
<div th:unless="${flag}">执行不成功</div>

4)null 字面量

<h1>null 字面量</h1>
<span th:if="${user ne null}">用户不为空</span><br/>
<span th:unless="${user eq null}">用户不为空（使用 th:unless 取反）</span><br/>

Thymeleaf字符串拼接

1、文本字面量使用"+"拼接字符串

<h1>文本字面量使用"+"拼接字符串</h1>
<span th:text="'共'+${totalRows}+'条'+${totalPage}+'页，当前第'+${currentPage}+'
页'"></span>

2、使用"|要拼接的内容|"减少字符串拼接的加号

<h1>拼接字符串</h1>
<span th:text="|博主:${name}联系方式${phone}|"></span>

在这里插入图片描述

Thymeleaf运算符

三元运算：表达式?”正确结果”:”错误结果”
算术运算：+ , - , * , / , %
关系比较:：> , < , >= , <= ( gt , lt , ge , le )
相等判断：== , != ( eq , ne )

<h1>三元运算符</h1>
<span th:text="${sex eq 1 ? '男':'女'}"></span><br/>
<span th:text="${sex == 1 ? '男':'女'}"></span><br/>

20*8=<span th:text="20 * 8"></span><br/>
20/8=<span th:text="20 / 8"></span><br/>
20+8=<span th:text="20 + 8"></span><br/>
20-8=<span th:text="20 - 8"></span><br/>

<div th:if="5 > 2">5>2 是真的</div>
<div th:if="5 gt 2">5 gt 2 是真的</div>

Thymeleaf表达式基本对象

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

#request

#request 相当于 httpServletRequest 对象，这是 3.x 版本，若是 2.x 版本使用#httpServletRequest，在页面获取应用的上下文根，一般在 js 中请求路径中加上可以避免 404

<script type="text/javascript" th:inline="javascript">
 var basePath = [[${#httpServletRequest.getScheme() + "://" + 
#httpServletRequest.getServerName() + ":" + 
#httpServletRequest.getServerPort() + 
#httpServletRequest.getContextPath()}]];

 //获取协议名称
 var scheme = [[${#request.getScheme()}]];
 
 //获取服务 IP 地址
 var serverName = [[${#request.getServerName()}]];
 
 //获取服务端口号
 var serverPort = [[${#request.getServerPort()}]];
 
 //获取上下文根
 var contextPath = [[${#request.getContextPath()}]];
 var allPath = scheme+"://"+serverName+":"+serverPort+contextPath;
 alert(allPath);
</script>

#session

相当于 HttpSession 对象，这是 3.x 版本，若是 2.x 版本使用#httpSession在后台方法中向 session 中放数据

<h1>从 SESSION 中获取用户名称</h1>
<span th:text="${#session.getAttribute('username')}"></span><br/>
<span th:text="${#httpSession.getAttribute('username')}"></span>

Thymeleaf表达式功能对象

模板引擎提供的一组功能性内置对象，可以在模板中直接使用这些对象提供的功能方法工作中常使用的数据类型，如集合，时间，数值，可以使用 Thymeleaf 的提供的功能性对象来处理它们
内置功能对象前都需要加#号，内置对象一般都以 s 结尾
官方手册：http://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: 对数组或集合创建聚合的实用方法；