Thymeleaf语法（包含springboot的配合）

岳轩子

于 2024-08-05 14:30:56 发布

阅读量346

点赞数 3

分类专栏： springboot 文章标签： spring boot 后端 java

本文链接：https://blog.csdn.net/weixin_51395608/article/details/140901779

版权

springboot 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. 简介

Thymeleaf 是一个用于Web和独立环境的现代服务器端Java模板引擎。它主要用于基于MVC的Web应用程序，并可以无缝地集成到Spring框架中。Thymeleaf的语法旨在简化Web开发，同时保持其清晰和可维护性。

2. 使用

2.1 引入依赖

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

在前端界面中引入

xmlns:th="http://www.thymeleaf.org"

在这里插入图片描述

2.2 语法

2.2.1 变量表达式

变量表达式即OGNL表达式或Spring EL表达式(在Spring术语中也叫model attributes)。如下所示： ${session.user.name}
它们将以HTML标签的一个属性来表示：

<span th:text="${book.author.name}">

2.2.2 选择(星号)表达式

选择表达式很像变量表达式，不过它们用一个预先选择的对象来代替上下文变量容器(map)来执行，如下： *{customer.name}
被指定的object由th:object属性定义：

<div th:object="${book}"> 
 <span th:text="*{title}">...</span> 
</div>

2.2.3 文字国际化表达式

文字国际化表达式允许我们从一个外部文件获取区域文字信息(.properties)，用Key索引Value，还可以提供一组参数(可选).

#{main.title}

2.2.4 URL表达式

URL表达式指的是把一个有用的上下文或回话信息添加到URL，这个过程经常被叫做URL重写。不需要指定项目名字@{/order/list}
URL还可以设置参数：
@{/order/details(id=${orderId})}

让我们看这些表达式：

<form th:action="@{/createOrder}"> 
<a href="main.html" th:href="@{/main}">

2.2.5 表达式支持的语法

字面（Literals）
- 文本文字（Text literals）: ‘one text’, ‘Another one!’,…
- 数字文本（Number literals）: 0, 34, 3.0, 12.3,…
- 布尔文本（Boolean literals）: true, false
- 空（Null literal）: null
- 文字标记（Literal tokens）: one, sometext, main,…
文本操作（Text operations）
- 字符串连接(String concatenation): +
- 文本替换（Literal substitutions）: |The name is ${name}|
算术运算（Arithmetic operations）
- 二元运算符（Binary operators）: +, -, *, /, %
- 减号（单目运算符）Minus sign (unary operator): -
布尔操作（Boolean operations）
- 二元运算符（Binary operators）:and, or
- 布尔否定（一元运算符）Boolean negation (unary operator):!, not
比较和等价(Comparisons and equality)
- 比较（Comparators）: >, <, >=, <= (gt, lt, ge, le)
- 等值运算符（Equality operators）:==, != (eq, ne)
- 条件运算符（Conditional operators）
  - If-then: (if) ? (then)
  - If-then-else: (if) ? (then) : (else)
  - Default: (value) ?: (defaultvalue)
    例子：

<span th:text="${session.user.username}" th:if="${not #strings.isEmpty(session.user)}"></span>
在这里插入图片描述

2.2.6 常用的thymeleaf标签

2.3 配合springboot（例子）

在这里插入图片描述

2.3.1 写一个接口

@RequestMapping("/success")
    public String hello(Model model, HttpSession httpSession){
        model.addAttribute("hello","yxz");
        model.addAttribute("hello2","<h2>无敌！！！</h2>");
        User user = new User();
        user.setPassword("root");
        user.setUsername("YXZ");
        user.setAge(1);
        user.setScore(78);
        user.setGender(2);
        List<User> uList = new ArrayList();
        for (int i = 0; i < 10; i++){
            User u = new User();
            u.setUsername("yxz"+i);
            u.setPassword("111"+i);

            uList.add(u);
        }
        httpSession.setAttribute("user", user);
        model.addAttribute("user", user);
        model.addAttribute("uList", uList);
        return "success";
    }

2.3.2 前端界面success.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf</title>
    <style>
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div  th:text="${hello.toUpperCase()}" th:id="${hello.toUpperCase()}">xxxx</div>
<div  th:utext="${hello2}">xxxx</div>
<input th:value="${user.getUsername()}">
<button th:onclick="alert('无敌')">弹出数字</button>
<hr>
<div th:object="${user}">
    <span th:text="*{username}"></span>

</div>


<a th:href="" th:if="${user.getAge() == 2}" >年龄</a>

<a  th:class="${user.getAge() > 2}?'class1':'class2'" >年龄</a>

<p th:if="${user.score >= 60 and user.score < 85}">B</p>
<p th:if="${user.score < 60}">C</p>
<p th:if="${user.score > 85}">优秀</p>


<span th:switch="${user.gender}">
    <p th:case="1">男</p>
    <p th:case="2">女</p>
</span>


<table>
    <tr th:each="a,aState:${uList}">
        <td th:text="${a.username}"></td>
        <td th:text="${a.password}"></td>
        <td th:text="${aState.index}"></td>
    </tr>
</table>
<img th:src="@{/images/img1.png}">

<script>
</script>
</body>
</html>