Thymeleaf简单运用-CFANZ编程社区

Thymeleaf 模版

认识 Thymeleaf
表达式
标准变量表达式
选择变量表达式
链接表达式（URL表达式）
Thymeleaf属性

认识 Thymeleaf

Thymeleaf 是一个流行的模板引擎，该模板引擎采用 Java 语言开发

模板引擎是一个技术名词，是跨领域跨平台的概念，在 Java 语言体系下有模板引擎，在

C#、PHP 语言体系下也有模板引擎，甚至在 JavaScript 中也会用到模板引擎技术，Java 生态下

的模板引擎有 Thymeleaf 、Freemaker、Velocity、Beetl（国产）等。

Thymeleaf 对网络环境不存在严格的要求，既能用于 Web 环境下，也能用于非 Web 环境

下。在非 Web 环境下，他能直接显示模板上的静态数据；在 Web 环境下，它能像 Jsp 一样从

后台接收数据并替换掉模板上的静态数据。它是基于 HTML 的，以 HTML 标签为载体，

Thymeleaf 要寄托在 HTML 标签下实现。

Spring Boot 集成了 Thymeleaf 模板技术，并且 Spring Boot 官方也推荐使用 Thymeleaf 来

替代 JSP 技术，Thymeleaf 是另外的一种模板技术，它本身并不属于 Spring Boot，Spring Boot

只是很好地集成这种模板技术，作为前端页面的数据展示，在过去的 Java Web 开发中，我们

往往会选择使用 Jsp 去完成页面的动态渲染，但是 jsp 需要翻译编译运行，效率低

Thymeleaf 的官方网站：http://www.thymeleaf.org

Thymeleaf 官方手册：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

表达式

表达式是在页面获取数据的一种 thymeleaf 语法。类似 ${key}

标准变量表达式

注意：th:text=“” 是 Thymeleaf 的一个属性，用于文本的显示

语法: ${key}

说明：标准变量表达式用于访问容器（tomcat）上下文环境中的变量，功能和 EL 中的 ${} 相

同。Thymeleaf 中的变量表达式使用 ${变量名} 的方式获取 Controller 中 model 其中的数据。

也就是 request 作用域中的数据。

1.创建SysUser类

package com.liu.bean;

public class SysUser {
    private Integer id;
    private String name;
    private Integer age;

    public SysUser() {
    }

    public SysUser(Integer id, String name, Integer age) {
        this.id = id;
        this.name = name;
        this.age = age;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    @Override
    public String toString() {
        return "SysUser{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", age=" + age +
                '}';
    }
}

2.Controller添加方法

@Controller
@RequestMapping("/thy")
public class ThynleafController {
    GetMapping("/expression")
    public String expression(Model model){
//        添加简单类型的数据
        model.addAttribute("site","www.bjpowernode.com");
//        对象类型
        model.addAttribute("myUser",new SysUser(1001,"王世超",20));
        return "01-express";
    }
}

3.创建模版文件 01-expression


<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>标准网站title>
head>
<body>
    <h3>标准表达式  ${key}h3>
    <p th:text="${site}">xxx网站p>
    <p th:text="${myUser.id}">p>
    <p th:text="${myUser.age}">p>
    <p th:text="${myUser.name}">p>

body>
html>

选择变量表达式

语法：*{key}

说明：需要配和 th:object 一起使用。选择变量表达式，也叫星号变量表达式，使用 th:object 属

性来绑定对象，选择表达式首先使用 th:object 来绑定后台传来的对象，然后使用 * 来代表这

个对象，后面 {} 中的值是此对象中的属性。

选择变量表达式 *{…} 是另一种类似于标准变量表达式 ${…} 表示变量的方法

选择变量表达式在执行时是在选择的对象上求解，而${…}是在上下文的变量 model 上求解

1.Controller添加方法

@GetMapping("/expression1")
    public String expression1(Model model){
//        添加简单类型的数据
        model.addAttribute("site","www.bjpowernode.com");
//        对象类型
        model.addAttribute("myUser",new SysUser(1002,"潘天硕",20));
        return "02-express";
    }

2.创建模版文件 02-expression2


<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <div style="margin-left: 350px">
        <p>学习选择表达式p>
        <div th:object="${myUser}">
            <p th:text="*{id}">p>
            <p th:text="*{name}">p>
            <p th:text="*{age}">p>
        div>
        <p th:text="*{myUser.name}">p>
    div>
body>
html>

链接表达式（URL表达式）

语法：@{链接 url}

说明：主要用于链接、地址的展示，可用于**

1.Controller添加方法

//链接表达式
@GetMapping("/link")
public String link(Model model){
 model.addAttribute("stuId",1001);
 return "03-link"; 
}
@GetMapping("/query/student")
@ResponseBody
public String query(Integer id){
 return "查询学生 id="+id; 
}
@GetMapping("/find/school")
@ResponseBody
public String query2(Integer id, String name){
 return "查询 2，id="+id+",姓名="+name; 
}

2.创建模版文件 03-link

<div style="margin-left: 350px">
 <p>链接表达式p>
 <p>链接到绝对地址p>
 <a th:href="@{http://www.baidu.com}">百度a>
 <br/>
 <br/>
 <p>链接到相对地址p>
 <a th:href="@{/query/student}">相对地址没有传参数a>
 <br/>
 <br/>
 <p>链接到相对地址,传参数方式 1p>
 <a th:href="@{'/query/student?id='+${stuId}}">相对地址传参数方式1a>
 <br/>
 <br/>
 <p>链接到相对地址,传参数方式 2,推荐方式p>
 <a th:href="@{/find/school(id=${stuId},name='lisi')}">相对地址传参数方式 2a>
div>

Thymeleaf属性

大部分属性和 html 的一样，只不过前面加了一个 th 前缀。加了 th 前缀的属性，是经过

模版引擎处理的。

1.Controller添加方法

@GetMapping("/property")
    public String htmlProperty(Model model){
        model.addAttribute("myName","才春磊");
        return "04-htmlproperty";
    }

2.创建模版文件 04-htmlproperty


<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>html属性title>
    <script type="text/javascript" th:src="@{/js/jquery-3.6.0.min.js}" >script>
    <script type="text/javascript">
        function clickFun(){
            alert("button click");
        }
    script>
head>
<body>
    <div th:style="'margin-left:350px'">
        <form th:action="@{/thy/property}" th:method="post">
            <input type="text" th:id="username" th:name="username" th:value="${myName}"/>
            <input type="button" th:id="btn" th:onclick="clickFun()" th:attr="value='按钮click'">
        form>
        <br>
        <p th:attr="name=${myName}">我使用自定义属性名称p>
    div>

body>
html>

th:action

定义后台控制器的路径，类似标签的 action 属性，主要结合 URL 表达式,获取动态变量
......

th:method

设置请求方法
......

th:href

定义超链接，主要结合 URL 表达式,获取动态变量
相对地址没有传参数

th:src

用于外部资源引入，比如

th:text

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

th:style

设置样式
点击我

th:each

这个属性非常常用，比如从后台传来一个对象集合那么就可以使用此属性遍历输出，它与
JSTL 中的类似，此属性既可以循环遍历集合，也可以循环遍历数组及 Map.

循环list

1.Controller添加方法

@GetMapping("/each")
    public String eachList( Model model){
        ArrayList<String> strList = new ArrayList<>();
        strList.add("三国");
        strList.add("三国志");
        strList.add("水浒传");
        model.addAttribute("strList",strList);
        ArrayList<SysUser> userList = new ArrayList<>();
        userList.add(new SysUser(1001,"刘备",20));
        userList.add(new SysUser(1002,"关羽",20));
        userList.add(new SysUser(1003,"张飞",20));
        model.addAttribute("userList",userList);
        return "05-eachList";
    }

2.创建模版文件 05-eachList


<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <p>在一个div中断循环p标签p>
    <div>
        <p th:each="str,strSt:${strList}" th:text="${str}">p>
    div>

    <br>
    <div th:each="u:${userList}">
        <p th:text="${u.id}">p>
        <p th:text="${u.name}">p>
        <p th:text="${u.age}">p>
    div>
body>
html>

语法说明：

th:each="user, iterStat : {userList} 是后台传过来的集合

语法说明：

th:each="user, iterStat : {userList} 是后台传过来的集合

◼ user

定义变量，去接收遍历${userList}集合中的一个数据

◼ iterStat

${userList} 循环体的信息

◼ 其中 user 及 iterStat 自己可以随便取名

◼ interStat 是循环体的信息，通过该变量可以获取如下信息

index: 当前迭代对象的 **index（从 **0 开始计算）

count: 当前迭代对象的个数（从 1 开始计算）这两个用的较多

size: 被迭代对象的大小

current: 当前迭代变量

even/odd: 布尔值，当前循环是否是偶数/奇数（从 0 开始计算）

first: 布尔值，当前循环是否是第一个

last: 布尔值，当前循环是否是最后一个

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

循环map

1.controller

@GetMapping("/eachMap")
    public String eachMap( Model model){
        HashMap<String, SysUser> map = new HashMap<>();
        map.put("user1",new SysUser(1001,"马超",22));
        map.put("user2",new SysUser(1002,"赵云",22));
        map.put("user3",new SysUser(1003,"黄忠",22));
        model.addAttribute("users",map);
        List<Map<String,SysUser>> mapList = new ArrayList<>();
        mapList.add(map);
        map = new HashMap<>();
        map.put("sys1",new SysUser(2001,"曹操",22));
        map.put("sys2",new SysUser(2001,"孙权",22));
        map.put("sys3",new SysUser(2001,"刘备",22));
        mapList.add(map);
        model.addAttribute("mapList",mapList);
        return "07-eachmap";
    }

2.模板页面


<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <div th:style="'margin-left: 350px'">
        <p>在一个 div 中循环 p 标签p>
        <div th:each="m,mSt:${users}">
            <p th:text="${mSt.count}">p>
            <p th:text="${m.key}"> p>
            <p th:text="${m.value.id}">p>
            <p th:text="${m.value.name}">p>
            <br/>
        div>
        <br/>
        <br/>
        <p>list-mapp>
        <div th:each="ul:${mapList}">
            <div th:each="um:${ul}">
                <p th:text="${um.key}">p>
                <p th:text="${um.value.id}">p>
                <p th:text="${um.value.name}">姓名是p>
            div>
        div>
    div>
body>
html>

if语句

语法：th:if=”boolean 条件” ，条件为 true 显示体内容

th:unless 是 th:if 的一个相反操作

1.Controller 增加方法

@GetMapping("/if")
    public String ifUnless(Model model){
        model.addAttribute("sex","m");
        model.addAttribute("isLogin",true);
        model.addAttribute("age",20);
        model.addAttribute("name","");
        return "08-if";
    }

2.创建模版文件 08-if

<p th:if="${sex == 'm'}">性别是男p>
    <p th:unless="${sex == 'f'}">
        性别是
    p>
    <p th:if="${isLogin}">
        用户已经登录
    p>
    <p th:if="${age > 50}">
        年龄是大于 50
    p>
    <p th:if="5>0">
        5>0
    p>
    
    <p th:if="${name}">
        name 是 ‘’
    p>

switch，case判断语句

语法：类似 java 中的 switch，case

div th:switch="${sex}">
        <p th:case="m">显示男p>
        <p th:case="f">显示女p>
        <p th:case="*">未知p>
    div>

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

th:inline

th:inline 有三个取值类型 (text, javascript 和 none)

内联 text

可以让 Thymeleaf 表达式不依赖于 html 标签，直接使用**内敛表达式[[表达式]]**即可获取动

态数据，要求在父级标签上加 **th:inline = “text”**属性

1.Controller 增加方法

@GetMapping("/if")
    public String ifUnless(Model model){
        model.addAttribute("sex","m");
        model.addAttribute("isLogin",true);
        model.addAttribute("age",20);
        model.addAttribute("name","克里斯");
        model.addAttribute("myUser",new SysUser(1005,"王世超",23));
        return "08-if";
    }

2.创建模版文件

<div th:inline="text">
        姓名是：[[${name}]]
        登录了吗：[[${isLogin}]]
    div>
    
    <div>
        姓名是：[[${name}]] <br/>
        登录了吗：[[${isLogin}]]<br/>

    div>

内联 javascript

可以在 js 中，获取模版中的数据。

在上面的模版页面中，增加