SpringBoot(八):thymeleaf模板

1.初识thymeleaf

1.1thymeleaf简介

Thymeleaf 是一个流行的模板引擎,该模板引擎采用 Java 语言开发。
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 需要翻译编译运行,效率低。

1.2建立一个thymeleaf工程

相较于一般的springboot工程,springboot包含thymeleaf的项目需要在pom文件中加入依赖:

<!--springboot框架集成Thymeleaf的起步依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

此外为了我们实时看到页面,建议在springboot的配置文件中加入:

#建议在开发阶段关闭 thymeleaf 页面缓存,目的实时看到页面
spring.thymeleaf.cache=false

此外就不需要什么配置了,都默认配置好了。
在建立的html中要加入中加入以下属性:

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

1.3从控制层到html的传值

在控制层中model.addAttribute(“data”,“你好”)参数后,在html中取值应该在标签对中。示例如下

<h2 th:text="${data}">展示需要的内容</h2>

这样,data对应的值就会代替标签对中的内容,当然,适用于其他的标签中。

2.thymeleaf表达式

2.1标准变量表达式

th:text="" 是 Thymeleaf 的一个属性,用于文本的显示

2.2URL表达式

原始方式:

<a href="网址">点击链接</a>

使用thymeleaf的方式:

<a th:href="@{网址}">th:跳转至百度</a>

如果请求路径中需要带参数,怎么办?
方式一:

<a th:href="@{'网址?变量='+${参数}}">点我</a>

方式二:

<a th:href="@{/test1(变量1=${后台参数},变量2=${后台参数})}">强烈推荐使用</a>

2.3 th:method和th:src

<script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
<form th:action="@{/user/login}" th:method="post"></form>

2.4 th:each

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

<!--
user:当前循环的对象的变量名(随意)
userState 当前循环对象的状态的变量,可选可不选,默认是变量名+state
${userList}当前循环的集合
-->
<div th:each="user,userStat:${userList}">
<span th:text="${user.属性1}"></span>
<span th:text="${user.属性2}"></span>
</div>

例2:遍历map集合

<div th:each="userMap,userMapStat:${userMaps}">
<span th:text="${userMapStat.key1}"></span>
<span th:text="${userMap.key2}"></span>
</div>

2.5 th:attr

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

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

2.6 th:onclick

<h1>th:onclick 的使用</h1>
<!--目前 thymeleaf 版本要求只能传递数字和布尔值-->
<a th:onclick="'show('+${user.id}+')'">点击:显示学生编号</a>
<script type="text/javascript">
function show(id) {
alert("用户编号为: " + id);
}
</script>

2.7条件判断

th:if
th:unless

<div th:if="${后台参数 eq 某常量}">
男: <input type="radio" name="嗯" th:value="1"/>
</div>
<div th:if="${后台参数 eq 某常量}">
女: <input type="radio" name="嗯" th:value="0"/>
</div>

2.8 th:inline

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

<h1>内敛文本 th:inline="text"</h1>
<div th:inline="text">
属性1: <div>[[${后台对象.属性1}]]</div><br/>
属性2: [[${后台对象.属性2}]]<br/>
</div>

2.9 th:switch

<h1>th:switch/th:case 用法</h1>
<div th:switch="${sex}">
<span th:case="1">性别:男</span><br/>
<span th:case="2">性别:女</span><br/>
<span th:case="*">性别:保密</span>
</div>

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

3.thymeleaf字面量

3.1文本字面量

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

3.2数字字面量

html示例代码如下:

<span th:text="2019 + 20">456456</span>年<br/>

输出结果就是2039

3.3布尔字面变量

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

3.4null字面变量

4.字符串变量的拼接

用+号拼接的这里不说了,直接上第二种,也是超级推荐的一种

<h1>另一种更优雅的方式:使用"|要拼接的内容|"减少字符串拼接的加号</h1>
<span th:text="|共${totalRows}条${totalPage}页,当前第${currentPage}页|"></span>

5.运算符

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

6.表达式基本对象

#request 相 当 于 httpServletRequest 对 象 。像在java代码中操作一样
获取session数值的三种方法:

<span th:text="${#session.getAttribute('key')}"></span>
<span th:text="${#httpSession.getAttribute('key')}"></span>
<span th:text="${session.key}"></span>

7.表达式功能对象

#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 的实用方法,比如
#sets: set 的实用方法;
#maps: map 的实用方法;
#aggregates: 对数组或集合创建聚合的实用方法;

猜你喜欢

转载自blog.csdn.net/qq_41984117/article/details/111304027