Thymeleaf简单运用

最新推荐文章于 2023-08-31 17:15:41 发布

凌北辰

最新推荐文章于 2023-08-31 17:15:41 发布

阅读量3.6k

点赞数 3

本文链接：https://blog.csdn.net/liustreh/article/details/124767427

版权

微服务专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html>
<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

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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}

说明：主要用于链接、地址的展示，可用于**<script src="...">、<link href="...">、<a href="...">、<form action="...">、<img src="">**等，可以
在 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>链接到相对地址,传参数方式 1</p>
 <a th:href="@{'/query/student?id='+${stuId}}">相对地址传参数方式1</a>
 <br/>
 <br/>
 <p>链接到相对地址,传参数方式 2,推荐方式</p>
 <a th:href="@{/find/school(id=${stuId},name='lisi')}">相对地址传参数方式 2</a>
</div>

Thymeleaf属性

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

模版引擎处理的。

1.Controller添加方法

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

2.创建模版文件 04-htmlproperty

<!DOCTYPE html>
<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

定义后台控制器的路径，类似<form>标签的 action 属性，主要结合 URL 表达式,获取动态变量
<form id="login" th:action="@{/login}" th:method="post">......</form>

th:method

设置请求方法
<form id="login" th:action="@{/login}" th:method="post">......</form>

th:href

定义超链接，主要结合 URL 表达式,获取动态变量
<a th:href="@{/query/student}">相对地址没有传参数</a>

th:src

用于外部资源引入，比如<script>标签的 src 属性，<img>标签的 src 属性，常与@{}表达式
结合使用，在 SpringBoot 项目的静态资源都放到 resources 的 static 目录下，放到 static 路径
下的内容，写路径时不需要写上 static
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>

th:text

用于文本的显示，该属性显示的文本在标签体中，如果是文本框，数据会在文本框外显示，
要想显示在文本框内，使用 th:value
<input type="text" id="realName" name="reaName" th:text="${realName}">

th:style

设置样式
<a th:onclick="'fun1('+${user.id}+')'" th:style="'color:red'">点击我</a>

th:each

这个属性非常常用，比如从后台传来一个对象集合那么就可以使用此属性遍历输出，它与
JSTL 中的<c: forEach>类似，此属性既可以循环遍历集合，也可以循环遍历数组及 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

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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}中的$ {userList} 是后台传过来的集合

语法说明：

th:each="user, iterStat : ${userlist}中的$ {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.模板页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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-map</p>
        <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>
    <!-- 空字符串是 true-->
    <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>
    <!--这个是不用加入th:inline="text"-->
    <div>
        姓名是：[[${name}]] <br/>
        登录了吗：[[${isLogin}]]<br/>

    </div>

内联 javascript

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

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

<button onclick="fun()">单击按钮</button>
<script type="text/javascript" th:inline="javascript">
 var name = [[${myUser.name}]];
 var id = [[${myUser.id}]];
 function fun() {
 alert("click 用户是"+name+",他的 id 是"+id);
 }
</script>

凌北辰

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf简单运用

Thymeleaf 模版认识 Thymeleaf表达式标准变量表达式选择变量表达式链接表达式（URL表达式）Thymeleaf属性认识 Thymeleaf Thymeleaf 是一个流行的模板引擎，该模板引擎采用 Java 语言开发模板引擎是一个技术名词，是跨领域跨平台的概念，在 Java 语言体系下有模板引擎，在C#、PHP 语言体系下也有模板引擎，甚至在 JavaScript 中也会用到模板引擎技术，Java 生态下的模板引擎有 Thymeleaf 、Freemaker、Velocity
复制链接

扫一扫

专栏目录