SpringBoot集成Thymeleaf

使用Spring Initializr创建项目时勾选Thymeleaf，如果不使用Spring Initializr，需要手动添加Thymeleaf的依赖：

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

 

 

Thymeleaf以html为原型，文件后缀是.html，使用Thymeleaf时创建html文件即可。

 

 

SpringBoot开箱即用，提供了大量的默认配置，一般使用默认配置即可。

SpringBoot的默认配置中，Thymeleaf的默认前缀是classpath:/resources/templates，默认后缀是.html。

 

开发、调试时关闭Thymeleaf的页面缓存：

#默认为true，使用页面缓存
spring.thymeleaf.cache=false

上线时改为true，或者删掉、注释掉。

 

 

 

 

 

 

Thymeleaf语法

1、th:text   显示普通文本

<!-- 常量 -->
<p th:text="hello"></p>

<!-- "hello"会覆盖原来的内容"你好" -->
<p th:text="hello">你好</p>

<!-- 标签体中没有内容时，可以写成单标签 -->
<p th:text="hello" />


<!-- 可以进行数学运算 -->
<!-- 3 -->
<p th:text="1+2"></p>
<!-- 1+2=3 -->
<p th:text="'1+2=' + (1+2)"></p>


<!-- 可以进行三元运算 -->
<p th:text="${user.age}>=18 ? 已成年 : 未成年"></p>


<!-- OGNL表达式${}可以取出controller传递的数据 -->
<!-- 使用点号取属性值时，底层是调用getter方法 -->
<p th:text="'用户名：' + ${user.username}"></p>


<!-- OGNL表达式${}中可以调用方法 -->
<p th:text="'用户名：' + ${user.getUsername()}"></p>
<p th:text="'转换为全大写：' + ${user.username.toUpperCase()}"></p>


<!-- 用'xxx'+'xxx'这种方式拼接字符串很麻烦，Thymeleaf简化了字符串拼接，字符串放在| |中即可  -->
<p th:text="|用户名：${user.username}|"></p>

Thymeleaf所有的指令都以th:开头，th即Thymeleaf的前2个字母。

controller可以使用Model、ModelAndView来传递数据。

 

 

 

2、th:utext   具有th:text的功能，且可以解析标签

//controller传递的数据中带有html标签
    model.addAttribute("msg", "<h2>user</h2>");
<!-- th:text会把标签作为普通字符串处理，不解析 -->
    <p th:text="${msg}"></p>

    <!-- th:utext会解析里面的标签 -->
    <p th:utext="${msg}"></p>

注意：是controller向html传递的数据中有html标签，不是直接在utext中写标签，如果是   <p th:utext="<h2>hello</h2>"></p>  这种直接在th:utext中写标签的，肯定会出错。

 

 

 

 

3、th:object  处理对象

比如说controller传了一个user对象，在html中要多处使用user对象，${user.xxx}，每次都要写user，很麻烦，可以这样：

<!-- th:object用${}直接取对象 -->
<div th:object="${user}">
    <!-- 后续用*{}来操作，把$换成*，省略对象名 -->
    <p th:text="'用户名：'+*{username}"></p>
    <p th:text="'年龄：'+*{age}"></p>
    <p th:text="'手机号：'+*{tel}"></p>
    <p th:text="'住址：'+*{address}"></p>
</div>

 

 

 

 

4、th:src、th:href、th:action   分别相当于html的src、href、action

<!-- 在SpringBoot中，比如我把图片、js文件、css文件分别放在static下的img、js、css文件夹中，引用时路径要写成img/xxx,js/xxx,css/xxx -->
<script src="js/vue.js"></script>
<!-- 路径放在@{}中 -->
<script th:src="@{js/vue.js}"></script>

<img src="img/mac_pro.png" />
<img th:src="@{img/mac_pro.png}" />

 

 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <!-- 引入static/css下的css文件 -->
    <link href="css/a.css" type="text/css" rel="stylesheet" />
    <link th:href="@{css/a.css}" type="text/css" rel="stylesheet" />
    
</head>

<body>

    <!-- 访问controller -->
    <a href="/user">访问静态页面</a>
    <a th:href="@{/user}">访问controller方法</a>

</body>
</html>

 

  

<form action="/login"></form>

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

 

都是把路径放在@{ }中。

 

 

 

 

5、Thymeleaf常用的内置对象

#requset

HttpServletRequest对象

#response

HttpServletReponse对象

#session

HttpSession对象

#servletContext

HttpServletContext对象

 

 

 

 

 

 

示例：

<!-- 内置对象要在${}中使用，访问内置对象的属性、方法时，不能像写一句java代码一样，末尾不能加分号 -->
<p th:text="'用户名：' + ${#request.getParameter('username')}"></p>

 

 

 

 

6、th:if   条件判断

<!-- 条件为true才显示此元素，为false则不显示 -->
<p th:if="3>2">3>2</p>
<p th:if="3>4">3>4</p>

<!-- 可以用英文字母表示 -->
<p th:if="3 gt 2">3 gt 2</p>


<!-- 与、或只能用and、or，不能用&&、|| -->
<p th:if="2>1 and 3>2">2>1 and 3>2</p>

<!-- 非可以用!或者not-->
<p th:if="! false">! false</p>
<p th:if="not false">not false</p>

>    gt    即greater than

<     lt     即less  than

>=     ge    即greater equals

<=     le    即less  equals

==     eq    即equals

!=     ne    即not  equals

 

 

 

 

7、th:each   迭代Array、List、Map

controller传给html的数据：

//数组
        String[] arr = {"苹果", "李子", "梨子"};
        model.addAttribute("arr", arr);

        //List
        ArrayList<String> list = new ArrayList<>();
        list.add("语文");
        list.add("数学");
        list.add("英语");
        model.addAttribute("list", list);

        //Map
        HashMap<String,Double> map = new HashMap<>();
        map.put("香蕉", 4.0);
        map.put("菠萝", 5.0);
        map.put("芒果", 6.0);
        model.addAttribute("map", map);

 

html：

<!-- Array，ele是一个临时变量，代表一个元素 -->
<table>
    <tr th:each="ele:${arr}">
        <!-- 要用${}取，这是html不是jsp，${}要放在th指令中才行 -->
        <td th:text="${ele}"></td>
    </tr>
</table>

<!-- List -->
<table>
    <tr th:each="ele:${list}">
        <td th:text="${ele}"></td>
    </tr>
</table>


<!-- Map，entity是一个临时变量，打代表一个键值对 -->
<table>
    <tr th:each="entity:${map}">
        <!-- 直接以key=value的形式显示 -->
        <td th:text="${ele}"></td>
    </tr>
</table>

<!-- Map -->
<table>
    <tr th:each="entity:${map}">
        <!--key、value是关键字，不能任意取 -->
        <td th:text="${entity.key}"></td>
        <td th:text="${entity.value}"></td>
    </tr>
</table>


<!-- Array、List、Map都可以再有一个临时变量，第一临时变量表示一个元素，第二个临时变量表示当前迭代元素的信息 -->
<table>
    <tr th:each="entity,status:${map}">
        <td th:text="${entity}"></td>
        <td th:text="${status}"></td>
    </tr>
</table>

第二个临时变量是一个对象，包含以下属性，可用点号访问：

  • index   当前元素是迭代的第几个元素，从0开始
  • count   当前元素是迭代的第几个元素，从1开始
  • size    总的元素个数
  • current   当前元素（如果是map，则是entity）
  • odd|even   返回是否第奇|偶数个元素，返回boolean值。odd是奇，even是偶，跟字符数一致。
  • first|last   是否为第一个|最后一个元素，返回Boolean值

 

 

 

 

8、th:switch 、th:case 相当于java的switch语句

<!-- 只显示匹配的元素 -->
<div th:switch="${role}">
    <p th:case="common">普通用户</p>
    <p th:case="manager">vip</p>
    <p th:case="svip">svip</p>
    <!-- *相当于default -->
    <p th:case="*">其它</p>
</div>

 

 

 

 

 

9、th:include、th:include、th:replace   页面引入

我们经常需要在一个页面中引入另一个页面，比如引入header.html，引入footer.html。

比如引入templates/footer.html：

<!-- @{}中写路径，/表示模板的根目录templates，绝对路径 -->
<div th:include="@{/footer.html}"></div>
<div th:insert="@{/footer.html}"></div>
<div th:replace="@{/footer.html}"></div>

<!-- 也可以使用相对路径-->
<div th:include="@{footer.html}"></div>
<div th:insert="@{footer.html}"></div>
<div th:replace="@{footer.html}"></div>

<!-- Thymeleaf的后缀名是.html，可以省略后缀，直接写文件名 -->
<div th:include="@{footer}"></div>
<div th:insert="@{footer}"></div>
<div th:replace="@{footer}"></div>

3个指令的使用方法完全相同，不过th:include是把内容、效果包含进来，th:replace是用包含页面的代码替换当前标签。

Thymelead 3.0以后，官方推荐用 th:insert 代替 th:include 。

 

 

 

只包含页面的一部分

有时候只想包含页面的某一部分，比如只包含header.html的nav，

比如把header.html、footer.html、aside.html等集中放在一个commons.html中：

<!-- 用th:fragment给片段起一个名字 -->
<header th:fragment="header">
    <div>header</div>
</header>

<footer th:fragment="footer">
    <div>footer</div>
</footer>

<aside th:fragment="aside">
    <div>aside</div>
</aside>

 

引用：

<!-- 不是放在@{}中，没有@{}，页面、片段之间冒号隔开 -->
<!-- 页面写成/commons.html、commons.html、commons都行 -->
<div th:include="commons :: header"></div>
<div th:insert="commons :: aside"></div>
<div th:replace="commons :: footer"></div>

如果引用的片段就是本页面中的，可以缺省页面，直接写成  ::片段

 

 

 

可以传递参数

<header th:fragment="info(name,age)">
    <p th:text="${name}"></p>
    <p th:text="${age}"></p>
</header>
<div th:include="commons :: info('chy',20)"></div>
<div th:insert="commons :: info('chy',20)"></div>
<div th:replace="commons :: info('chy',20)"></div>

 

 

 



10、th:remove  移除元素

经常需要自动移除元素，比如controller从数据库查询商品，把商品信息传递给html展示出来，

有时候没有满足条件的商品，传递的是null，这时候光秃秃地显示一个<thead>表头是不合适的，数据为空时应该自动移除表格|表头，给出提示。

<!-- 有数据就什么都不移除（显示table），没数据就移除整个table -->
<table th:remove="${goods_list}?none:all">
    
</table>

th:remove的值可以是：

  • all   移除整个元素
  • none   不移除什么（显示整个元素）
  • tag  只移除标签。比如<table th:remove="tag"></table>是移除<table></table>这个东西，里面的<thead>、<tbody>、<tr>、<td>等标签还在
  • body  只移除body。<xxx>、</xxx>之间的东西叫做body，移除body后，<xxx>是空壳的
  • all-but-first  移除所有子元素，只保留第一个子元素

 

 

 

 

说明

Thymeleaf是在html的基础上扩展的，原型是html，扩展名也是.html，

所有在html可以写的代码，都可以写在Thymeleaf中，

如果不想用Thymeleaf的语法，可以使用html的语法。