Thymeleaf学习（1）—— 表达式和属性

Yacht13

已于 2022-09-17 19:41:00 修改

阅读量644

点赞数 2

分类专栏： SpringBoot 文章标签： SpringBoot Thymeleaf

于 2022-09-17 15:50:33 首次发布

本文链接：https://blog.csdn.net/Archer__13/article/details/126894807

版权

SpringBoot 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、初始化设置

添加依赖

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

在html中需要添加以下内容

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

可以在<!DOCTYPE html>下面添加如下内容，可以关闭thymeleaf的红线报错

<!--suppress ThymeleafVariablesResolveInspection -->

在application.properties文件中可以添加以下内容，也可以不添加（都是默认的）

#### 以下内容都为默认，可以不用添加 #####
#在开发阶段，关闭模板引擎
spring.thymeleaf.cache=false
#编码格式
spring.thymeleaf.encoding=UTF-8
#模板的类型(默认是HTML)
spring.thymeleaf.mode=HTML
#模板前缀：文件的路径
spring.thymeleaf.prefix=classpath:/templates/
#模板后缀
spring.thymeleaf.suffix=.html

二、表达式

1. 标准变量表达式：${key}

语法：${key}，在页面的标签中使用 th:text="${key}"

作用：获取request作用域中key对应的值。可以使用request.setAttribute(key, value)或者model.addAttribute(key, value)往request作用域中存放数据。

<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p th:text="${data}">数据</p>          <!-- Thymeleaf模板引擎 -->
    <p th:text="${user}">用户</p>          <!-- User{id=1, name='Tom', age=23} -->
    <p th:text="${user.id}">id</p>        <!-- 1 -->
    <p th:text="${user.name}">姓名</p>     <!-- Tom -->
    <p th:text="${user.age}">年龄</p>      <!-- 23 -->
</body>
</html>

如果直接进入test.html页面，则会显示原来标签中间的数据，只有通过controller才能获取到作用域中的值

package com.xdu.studyspringboot.controller;

import com.xdu.studyspringboot.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;

@Controller
public class ThymeleafController {
    @RequestMapping("/testThymeleaf")
    public String testThymeleaf(HttpServletRequest request, Model model){
        request.setAttribute("data", "Thymeleaf模板引擎");
        model.addAttribute("user", new User(1, "Tom", 23));   //User是一个实体对象的类
        return "test";
    }
}

2. 选择变量表达式：*{key}

语法：*{key}，在标签中使用 th:text="*{key}"

作用：获取request作用域中key对应的值。可以和th:object一起使用更方便获取对象的属性值

<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p th:text="*{user.name}"></p>
    <p th:text="*{data}"></p>
    
    <div th:object="${user}">
        <p th:text="*{id}"></p>
        <p th:text="*{name}"></p>
        <p th:text="*{age}"></p>
    </div>
</body>
</html>

package com.xdu.studyspringboot.controller;

import com.xdu.studyspringboot.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;

@Controller
public class ThymeleafController {
    @RequestMapping("/testThymeleaf")
    public String testThymeleaf(HttpServletRequest request){
        request.setAttribute("data","Thymeleaf");
        request.setAttribute("user", new User(1, "Tom", 23));   //User是一个实体对象的类
        return "test";
    }
}

3. 链接表达式：@{url}

语法：@{url}，在标签中使用

作用：链接到其他地址

<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index页面</title>
</head>
<body>
    <h1>链接到绝对地址</h1>
    <a th:href="@{http://www.baidu.com}">百度</a> <br/>

    <h1>链接到相对地址，没有参数</h1>
    <a th:href="@{/test}">test.html页面</a>  <br/>
    <a th:href="@{/testThymeleaf}">通过访问controller来进入test.html页面</a> <br/>

    <h1>链接到相对地址，有参数</h1>    <!--两种方式都可以，推荐用下面的-->
    <a th:href="@{/queryUser?id=1}">链接到有参数的页面</a> <br/>
    <a th:href="@{/queryUser(id=2)}">链接到有参数的页面</a> <br/>
</body>
</html>

<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>test.html页面</h1>

    <p th:text="${data}">数据</p>
    <p th:text="${user}">用户</p>
</body>
</html>

package com.xdu.studyspringboot.controller;

import com.xdu.studyspringboot.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;

@Controller
public class ThymeleafController {
    @RequestMapping("/")
    public String index(){
        return "index";
    }

    @RequestMapping("/test")
    public String testPage(){
        return "test";
    }

    @RequestMapping("/testThymeleaf")
    public String testThymeleaf(HttpServletRequest request){
        request.setAttribute("data","Thymeleaf");
        request.setAttribute("user", new User(1, "Tom", 23));   //User是一个实体对象的类
        return "test";
    }

    @RequestMapping("/queryUser")
    @ResponseBody
    public String queryUser(Integer id){
        return "参数："+id;
    }
}

三. 属性

Thymeleaf的属性大多都是：html属性加上th前缀，作用和原本的html属性作用相同，如：th:action=""，th:text=""，th:href=""，th:src=""，th:method=""等

<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form th:action="@{/login}" th:method="post">
        姓名：<input th:type="text" th:name="name">  <br/>
        <input type = "submit" value = "注册"/>
    </form>

    <p th:text="${name}"></p>
</body>
</html>

package com.xdu.studyspringboot.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;

@Controller
public class ThymeleafController {
    @RequestMapping("/login")
    public String testLogin(HttpServletRequest request){
        String username = request.getParameter("name");
        request.setAttribute("name", username);
        return "test";
    }
}

四. 内联文本

内联文本th:inline，可以不依赖html的标签直接获取值，方式是：[[${key}]]

也可以在js中使用内联文本获取值

<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:inline="javascript">
        var name = [[${name}]];
        var age = [[${age}]];
        alert("我是"+name+"，年龄"+age);
    </script>
    
</head>
<body>
    <p>我是[[${name}]]，年龄[[${age}]]</p> <br/>   <!-- 我是Tom，年龄22-->
    <p>我是[[${user.name}]]，年龄[[${user.age}]]</p> <br/>   <!-- 我是Tom，年龄22-->
</body>
</html>

package com.xdu.studyspringboot.controller;

import com.xdu.studyspringboot.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;

@Controller
public class ThymeleafController {
    @RequestMapping("/inline")
    public String testInline(HttpServletRequest request){
        request.setAttribute("name","Tom");
        request.setAttribute("age",22);
        request.setAttribute("user", new User(1, "Tom", 22));

        return "test";
    }
}

五. 字符串连接

1. 使用单引号

<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p th:text="'我是'+${name}+'，年龄'+${age}"></p>   <!--我是Tom，年龄22-->
</body>
</html>

2. 使用双竖线

<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p th:text="|我是${name}，年龄${age}|"></p>   <!--我是Tom，年龄22-->
</body>
</html>

package com.xdu.studyspringboot.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;

@Controller
public class ThymeleafController {
    @RequestMapping("/stringLink")
    public String testStringLink(HttpServletRequest request){
        request.setAttribute("name","Tom");
        request.setAttribute("age",22);

        return "test";
    }
}