Thymeleaf模版引擎

YangQingFeng158

已于 2024-09-23 10:42:18 修改

阅读量736

点赞数 10

文章标签： spring boot

于 2024-09-23 10:41:31 首次发布

本文链接：https://blog.csdn.net/gghfzs1/article/details/142410244

版权

Thymeleaf介绍

Thymeleaf 是一个用于 Web 和端的 Java 模板引擎，能够处理 HTML、XML、JavaScript、CSS 甚至纯文本。Thymeleaf 的主要目标是提供一种快速创建 Web 应用程序的方式，它可以在开发过程中直接在浏览器中查看页面效果，而不需要启动整个Web应用。

Thymeleaf 的主要特点：

自然模板：Thymeleaf 的模板文件可以直接作为网页使用，因为它在运行时会移除未使用的Thymeleaf标签。
强大的表达式语言：Thymeleaf 提供了一种处理模板中数据的强大方式，可以直接访问和操作对象模型。
可以与Spring MVC集成：Thymeleaf 可以完全集成Spring MVC，可以处理Spring MVC模型数据和控制器。

Thymeleaf添加的依赖:

 <dependencies>
        <!-- Spring Boot Starter -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- MyBatis -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>3.0.3</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter-test</artifactId>
            <version>3.0.3</version>
            <scope>test</scope>
        </dependency>

        <!-- 数据库驱动 -->
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!-- Thymeleaf 扩展 -->
        <dependency>
            <groupId>nz.net.ultraq.thymeleaf</groupId>
            <artifactId>thymeleaf-layout-dialect</artifactId>
            <version>3.0.0</version>
        </dependency>

        <!-- 开发工具 -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <!-- JSON 处理 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.13</version>
        </dependency>

        <!-- 动态数据源 -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>dynamic-datasource-spring-boot3-starter</artifactId>
            <version>4.1.2</version>
        </dependency>

        <!-- 数据库连接池 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.21</version>
        </dependency>

        <!-- 前端库 -->
        <dependency>
            <groupId>org.webjars.bower</groupId>
            <artifactId>jquery</artifactId>
            <version>3.5.1</version>
        </dependency>
    </dependencies>

application.yml添加配置

spring:
  thymeleaf:
    cache: false

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

Model准备

public interface IUseService {
    User login(String usrName, String usrPassword);

    User addUser(User user);

    void deleteUser(Long usrId);

    User updateUser(User user);

    User getUser(Long usrId);

    List<User> findAllUsers();
}

控制器开发

在com.ktjiaoyu.crm.web.controller包下创建ExampleController

@Controller
public class ExampleController {
    @Resource
    IUseService iUseService;
    @GetMapping("/hello/{id}")
    public String getUser(@PathVariable("id") Long usrId , Model model){
        User user = iUseService.getUser(usrId);
        model.addAttribute("user",user);
        return "demo/hello";
    }
}

页面开发

在resources/templates/demo目录下创建hello.html,kind(种类)选择HTML5file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   欢迎您,<span th:text="${user.usrName}">usrName</span>!
</body>
</html>

所有使用Thymeleaf的页面必须在HTML标签声明Thymeleaf:

运行访问:

启动项目后在浏览器中输入网址:http://localhost:8080/hello/2,会出现结果。

Thymeleaf常用标签

变量替换：th:text，用于替换当前标签的文本内容。
改变URL：th:href，用于动态设置链接的URL。
插入图片：th:src，用于动态设置图片的来源。
插入CSS：th:href，用于动态添加CSS样式文件。
插入JS：th:src，用于动态添加JavaScript文件。
隐藏/显示：th:if，根据条件判断是否显示某个元素。
列表迭代：th:each，用于迭代列表并创建重复的HTML标签。

设置属性：th:attr，用于设置任何属性，可以是th:attr="src=${someExpression}"的简写形式

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf Example</title>
</head>
<body>
    <p th:text="'Hello, ' + ${name} + '!'"></p>
    <a th:href="@{/link}">Link</a>
    <img th:src="'images/' + ${imageName} + '.jpg'" />
    <link th:href="@{/css/style.css}" rel="stylesheet" />
    <script th:src="@{/js/script.js}"></script>
    <div th:if="${show}">
        This content will be displayed if show is true.
    </div>
    <ul>
        <li th:each="item : ${items}" th:text="${item}">Item</li>
    </ul>
</body>
</html>