Thymeleaf模版引擎

🕗 发布于 2024-09-20 23:55 spring boot Thymeleaf

Thymeleaf是面向Web和独立环境的现代服务器端Java模版引擎，能够处理HTML、XML、JavaScript、CSS甚至纯文本。Thymeleaf旨在提供一个优雅的、高度可维护的创建模版的方式。为了实现这一目标，Thymeleaf建立在自然模版的概念上，将其逻辑注入到模版文件中，不会影响模版设计原型，从而改善了设计的沟通，弥合了设计和开发团队之间的差距。

Thymeleaf特点

Thymeleaf在有网络和无网络的环境下均可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持HTML原型，然后再HTML标签里增加额外的属性来达到模版+数据的展示方式。浏览器解释HTML是会忽略未定义的标签属性，所以Thymeleaf的模版可以静态地运行；当有数据返回到页面是，Thymeleaf会动态地替换掉静态内容，使页面动态显示
Thymeleaf开箱即用的特性。它支持标准方言和Spring方言，可以直接套用模版实现JSTL、OGNL表达式效果，避免每天套模板、改JSTL、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言
Thymeleaf提供Spring标准方言和一个与SpringMVC完美集成的可选模块，可以快速地实现表单绑定、属性编辑器、国际化等功能

添加依赖（启动器）

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

application.properties添加配置

springthymeleaf.cache=false

spring.thymeleaf.cache=false 是关闭Thymeleaf的缓存，不然在开发环境中修改页面不会立刻生效需要重启，生产可配置为true

Model准备（参考SpringBoot:Web开发(基于SpringBoot使用MyBatis-Plus+JSP开发)中使用MyBatisX快捷生成）

实体类

package com.ktjiaoyu.thymeleaf.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import java.io.Serializable;
import lombok.Data;

/**
 * 
 * @TableName sys_user
 */
@TableName(value ="sys_user")
@Data
public class User implements Serializable {
    /**
     * 编号
     */
    @TableId(type = IdType.AUTO)
    private Long usrId;

    /**
     * 姓名
     */
    private String usrName;

    /**
     * 密码
     */
    private String usrPassword;

    /**
     * 角色编号
     */
    private Long usrRoleId;
//    private String roleName;

    /**
     * 状态
     */
    private Integer usrFlag;

    @TableField(exist = false)
    private static final long serialVersionUID = 1L;

    @Override
    public boolean equals(Object that) {
        if (this == that) {
            return true;
        }
        if (that == null) {
            return false;
        }
        if (getClass() != that.getClass()) {
            return false;
        }
        User other = (User) that;
        return (this.getUsrId() == null ? other.getUsrId() == null : this.getUsrId().equals(other.getUsrId()))
            && (this.getUsrName() == null ? other.getUsrName() == null : this.getUsrName().equals(other.getUsrName()))
            && (this.getUsrPassword() == null ? other.getUsrPassword() == null : this.getUsrPassword().equals(other.getUsrPassword()))
            && (this.getUsrRoleId() == null ? other.getUsrRoleId() == null : this.getUsrRoleId().equals(other.getUsrRoleId()))
            && (this.getUsrFlag() == null ? other.getUsrFlag() == null : this.getUsrFlag().equals(other.getUsrFlag()));
    }

    @Override
    public int hashCode() {
        final int prime = 31;
        int result = 1;
        result = prime * result + ((getUsrId() == null) ? 0 : getUsrId().hashCode());
        result = prime * result + ((getUsrName() == null) ? 0 : getUsrName().hashCode());
        result = prime * result + ((getUsrPassword() == null) ? 0 : getUsrPassword().hashCode());
        result = prime * result + ((getUsrRoleId() == null) ? 0 : getUsrRoleId().hashCode());
        result = prime * result + ((getUsrFlag() == null) ? 0 : getUsrFlag().hashCode());
        return result;
    }

    @Override
    public String toString() {
        StringBuilder sb = new StringBuilder();
        sb.append(getClass().getSimpleName());
        sb.append(" [");
        sb.append("Hash = ").append(hashCode());
        sb.append(", usrId=").append(usrId);
        sb.append(", usrName=").append(usrName);
        sb.append(", usrPassword=").append(usrPassword);
        sb.append(", usrRoleId=").append(usrRoleId);
        sb.append(", usrFlag=").append(usrFlag);
        sb.append(", serialVersionUID=").append(serialVersionUID);
        sb.append("]");
        return sb.toString();
    }
}

数据访问层

package com.ktjiaoyu.thymeleaf.mapper;

import com.ktjiaoyu.thymeleaf.entity.User;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Param;
import org.springframework.web.bind.annotation.PathVariable;


import java.util.List;

/**
* @author Administrator
* @description 针对表【sys_user】的数据库操作Mapper
* @createDate 2024-09-09 09:10:40
* @Entity com.ktjiaoyu.thymeleaf.entity.User
*/
public interface UserMapper extends BaseMapper<User> {


}

业务逻辑层

接口

package com.ktjiaoyu.thymeleaf.service;

import com.ktjiaoyu.thymeleaf.entity.User;
import com.baomidou.mybatisplus.extension.service.IService;


import java.util.List;

/**
* @author Administrator
* @description 针对表【sys_user】的数据库操作Service
* @createDate 2024-09-09 09:10:40
*/
public interface UserService extends IService<User> {


}

实现类

package com.ktjiaoyu.thymeleaf.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.ktjiaoyu.thymeleaf.entity.User;

import com.ktjiaoyu.thymeleaf.service.UserService;
import com.ktjiaoyu.thymeleaf.mapper.UserMapper;
import jakarta.annotation.Resource;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Service;

import java.util.List;

/**
* @author Administrator
* @description 针对表【sys_user】的数据库操作Service实现
* @createDate 2024-09-09 09:10:40
*/
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User>
    implements UserService{

    
}

控制器开发

package com.ktjiaoyu.thymeleaf.controller;

import com.ktjiaoyu.thymeleaf.entity.User;
import com.ktjiaoyu.thymeleaf.service.UserService;
import jakarta.annotation.Resource;
import jakarta.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;

import java.util.Date;
import java.util.List;

/**
 * @author cuishujian
 * @date 2024/9/13
 */
//@Controller
public class ExampleController {

    @Resource
    private UserService userService;



    @GetMapping("/hello/{id}")
    public String getUser(@PathVariable("id") Long usrId, Model model){
        User user = userService.getUser(usrId);
        model.addAttribute("user",user);
        return "demo/hello";
    }

    
}

页面开发

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
  欢迎您，<span th:text="${user.usrName}">usrName</span>!
</body>
</html>

效果图

Thymeleaf的常用标签及其用法：

1. 数据绑定与文本替换

th:text：用于替换标签体内的文本内容。
```
<span th:text="${user.name}">用户名</span>
```

th:utext：与th:text类似，但会处理HTML标签。

<p th:utext="${htmlContent}">这里会展示HTML内容</p>

2. 条件判断

th:if：用于条件判断，如果条件为真，则显示标签体内容。
```
<span th:if="${user.admin}">管理员</span>
```

th:unless：与th:if相反，条件为假时显示标签体内容。

<a th:href="@{/login}" th:unless="${session.user != null}">Login</a>

3. 循环遍历

th:each：用于遍历集合、数组或Map等。

<ul> 
<li th:each="user : ${userList}" th:text="${user.name}"></li> 
</ul>

4. URL与链接

th:href：用于构建URL。

<a th:href="@{/user/{id}(id=${user.id})}">查看用户</a>

th:action：用于表单的提交地址。

<form th:action="@{/submit}"> 
... 
</form>

5. 样式与属性

th:style：用于设置标签的style属性。

<div th:style="'background-color: ' + ${bgColor} + ';'">...</div>

th:attr：用于设置标签的任意属性。

<img th:attr="src=@{/images/logo.png},alt=${altText}" />

6. 布局与片段

th:fragment：定义一个可以复用的片段（Fragment）。
```
<div th:fragment="header">页眉内容</div>
```

th:include 和 th:replace：用于引入其他模板文件中的片段。

<!-- 引入片段，但保留自己的标签 --> 
<div th:include="header :: header"></div> 


<!-- 替换整个标签为引入的片段 --> 
<div th:replace="footer :: footer"></div>

7. 表达式与内置对象

Thymeleaf支持多种表达式，包括选择变量表达式${...}、选择表达式*{...}、消息表达式#{...}等。此外，它还提供了许多内置对象，如#strings、#numbers、#dates等，用于执行字符串、数字、日期等的操作。

8. 其他常用标签

th:id：用于替换HTML元素的id属性。
th:value：用于设置表单元素的value属性。
th:selected：用于设置下拉框（<select>）中选中的项。
th:checked：用于设置复选框（<input type="checkbox">）或单选按钮（<input type="radio">）的选中状态。
th:switch 和 th:case：用于多路选择，类似于Java中的switch语句。

Thymeleaf的标签库非常丰富，上述只是其中的一部分常用标签。在实际开发中，可以根据项目需求选择合适的标签来简化页面开发。

表达式

1. 变量表达式

语法：${...}
用途：用于在模板中输出变量的值。
示例：<h1 th:text="${pageTitle}">Page Title</h1>

2. 选择变量表达式

语法：*{...}
用途：用于从选定对象中选择属性或调用方法，类似于JSP中的EL表达式。
示例：<p th:text="*{user.name}">Default Name</p>

3. 消息表达式

语法：#{...}
用途：用于获取国际化内容，根据当前环境选择合适的文本。
示例：<span th:text="#{welcome.message}">Welcome!</span>

4. 链接URL表达式

语法：@{...}
用途：用于生成链接或动态URL，支持相对路径和绝对路径。
示例：
- 绝对URL：<a th:href="@{http://www.thymeleaf.org}">Thymeleaf</a>
- 相对URL：<a th:href="@{/product/{id}(id=1)}">Product Details</a>

5. 字面量

文本：'one text', 'another one!'
数值：0, 34, 3.0, 12.3
布尔类型：true, false
空值：null

6. 文本操作

字符串连接：使用+操作符。
示例：<span th:text="'Welcome to our application, ' + ${user.name} + '!'">

7. 算术运算

支持的运算符：+, -, *, /, %
示例：<p th:text="${number1} + ${number2}"></p>

8. 布尔操作

支持的运算符：and, or
非操作符：!, not

9. 关系操作符

比较运算符：>, <, >=, <=（HTML中转义为gt, lt, ge, le）
相等运算符：==, !=（或eq, ne）

10. 条件表达式

If-then：(if) ?(then)
If-then-else：(if) ?(then) : (else)
示例：<tr th:class="${row.even}?'even':'odd'"></tr>

原文地址：https://blog.csdn.net/cuishujian_2003/article/details/142396816

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：arm和riscv系统调用对比(笔记)
下一篇：数据结构—(java)反射，枚举，lambda表达式

SVM——支持向量机的学习入门
SVM算法的基本原理，包括硬间隔和软间隔的概念，以及在处理线性和非线性分类、回归和异常值检测中的应用。通过Scikit-Learn示例，展示了SVM在实际项目中的操作，并探讨了SVM的优点和选择核函数
阅读更多2024-09-21
three.js Audio
/- 100为一个半音， +/- 1200为一个八度。. 在初始化和设置/删除filters时使用.表示类型的字符串, 设置为'Audio'.音源的类型. 默认为 'empty'.. 在设置/删除fi
阅读更多2024-09-21
基于YOLOv8的RTSP视频流实时目标检测与告警系统设计与实现（超详细）
在训练模型完成后，想把模型应用起来，比如模型可以部署到项目中，实时接收RTSP视频流进行识别检测，一旦达到自己所设置的置信度阈值（例如大于0.5），系统就会实时把报警信息发送给服务端，由服务端进行实时
阅读更多2024-09-21
记软件开发者画图（UML），使用WPS应用制图
UML（统一建模语言）图形‌是一种用于软件开发中的建模语言，提供了一套标准化的图形符号和规则，用于描述软件系统的结构、行为和交互关系。用于可视化和描述软件系统的不同方面。这些图形可以帮助开发人员、设计
阅读更多2024-09-21
js 如何代码识别Selenium+Webdriver
js 如何代码识别Selenium+Webdriver
阅读更多2024-09-21
R18 NES 之SSB-less SCell operation for inter-band CA
对上面的inter band CA场景，band A只能作为band B的 reference band，band C只能作为band D的 reference band，那band combinat
阅读更多2024-09-21
Docker笔记-容器数据卷
Docker笔记-容器数据卷
阅读更多2024-09-21
抖音下载别人作品怎么去掉水印
不过，在下载视频的过程中，抖音会在视频上自动加上平台水印，这既是对原创内容的保护，也在一定程度上限制了视频的自由使用。用户可以在播放视频时，通过手机自带的录屏功能，录制下无水印的视频部分。3.打开我们
阅读更多2024-09-21
部分解决FDTD安装后，matlab指令fopen报错
该代码指定了两个绝对路径。当到对应位置找这两个文件时却发现没有，也就是说文件缺失导致的报错。这部分代码是用于通过matlab启动FDTD程序的方法。今天在新的win11电脑上安装FDTD时，发现在。文
阅读更多2024-09-21
第34次csp
刷新1.0 秒512 MiB。
阅读更多2024-09-21