Thymeleaf模板引擎使用

# Thymeleaf模板引擎的使用

Thymeleaf 模板引擎功能强大，使用简单，Spring Boot推荐使用。

# 1、配置Thymeleaf

# 步骤一：导入thymeleaf依赖

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

1
2
3
4

# 步骤二：在yml中配置thymeleaf

spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    encoding: UTF-8
    cache: false

1
2
3
4
5
6

# 步骤三：处理静态资源

html静态页面放在路径classpath:/templates下，在静态页面中导入thymeleaf的名称空间

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

步骤四：使用thymeleaf语法渲染数据即可

<!DOCTYPE html>
<!--名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Thymeleaf 语法</title>
    </head>
    <body>
        <h2>hymeleaf 语法</h2>
        <!--th:text 设置当前元素的文本内容，常用，优先级不高-->
        <p th:text="${thText}" />
        <p th:utext="${thUText}"/>

        <!--th:value 设置当前元素的value值，常用，优先级仅比th:text高-->
        <input type="text" th:value="${thValue}" />

        <!--th:object 声明变量，和*{} 一起使用-->
        <div th:object="${thObject}">
            <p>ID: <span th:text="*{id}" /></p><!--th:text="${thObject.id}"-->
            <p>TH: <span th:text="*{thName}" /></p><!--${thObject.thName}-->
            <p>DE: <span th:text="*{desc}" /></p><!--${thObject.desc}-->
        </div>

        <!--th:each 遍历列表，常用，优先级很高，仅此于代码块的插入-->
        <!--th:each 修饰在div上，则div层重复出现，若只想p标签遍历，则修饰在p标签上-->
        <div th:each="message : ${thEach}"> <!-- 遍历整个div-p，不推荐-->
            <p th:text="${message}" />
        </div>
        <!--只遍历p，推荐使用-->
        <div>
            <p th:each="user : ${ulist}" th:object="${user}">
                <span th:text="*{id}"></span>
                <span th:text="*{name}"></span>
                <span th:text="*{phone}"></span>
            </p>
        </div>

        <!--th:if 条件判断，类似的有th:switch，th:case，优先级仅次于th:each, 其中#strings是变量表达式的内置方法-->
        <p th:text="${thIf}" th:if="${not #strings.isEmpty(thIf)}"></p>

        <!--th:insert 把代码块插入当前div中，优先级最高，类似的有th:replace，th:include，~{} ：代码块表达式 -->
        <div th:insert="~{template/footer :: copy}"></div>
        <div th:replace="~{template/footer :: copy}"></div>
        <div th:include="~{template/footer :: copy}"></div>


    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

后台给负责给变量赋值，和跳转页面。

@RequestMapping("/admin")
public String toAdmin(Model model){
    PageHelper.startPage(1,10);
    PageHelper.orderBy("id desc");
    List<InterUser> ulist = interUserService.selectInterUserList();
    model.addAttribute("ulist",ulist);
    model.addAttribute("thText","thText1");
    model.addAttribute("thUText","thUText1");
    model.addAttribute("thValue","thValue1");
    model.addAttribute("thEach", Arrays.asList("th:each", "遍历列表"));
    model.addAttribute("thIf", "msg is not null");
    model.addAttribute("thObject", new ThObject(1L, "th:object", "用来偷懒的th属性"));
    return "/admin/admin";
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

官方文档：https://www.thymeleaf.org/documentation.html

# 2、常用th属性解读

html有的属性，Thymeleaf基本都有，而常用的属性大概有七八个。

th:text : 设置当前元素的文本内容，相同功能的还有th:utext，两者的区别在于前者不会转义html标签，后者会。
th:value : 设置当前元素的value值，类似修改指定html标签属性的还有th:src,th:href。
th:each: 遍历循环元素，和th:text或th:value一起使用。注意该属性修饰的标签位置，详细看后文。
th:if: 条件判断，类似的还有th:unless，th:switch，th:case。
th:insert : 代码块引入，类似的还有th:replace，th:include，三者区别很大，若使用不恰当会破坏html结构，常用于公共代码块的提取复用。
th:fragment: 定义代码块，方便被th:insert引用。
th:object : 声明变量，一般和*{}一起配合使用，达到偷懒的效果。
th:attr: 修改任意属性，实际开发中用的较少，因为有丰富的其他th属性帮忙。

作者：荆辰曦链接：https://www.jianshu.com/p/5bbac20348ec 来源：简书

# 3、标准表达式语法

变量表达式：

${...}

链接表达式：

@{...}

消息表达式：

#{...}

代码块表达式：

~{...}

选择变量表达式

*{...}

作者：荆辰曦链接：https://www.jianshu.com/p/5bbac20348ec 来源：简书

编辑

#SpringBoot #Thymeleaf

← 整合Swagger接口文档 JPA的使用→