带你了解什么是Thymeleaf（实操）

ゞ浴缸里的玫瑰 2024-04-01 11:51 112阅读 0赞

![在这里插入图片描述][7f0a8e8cbd7849a3917c4aa6db120f38.png_pic_center]

#### 文章目录 ####

*   *  一、前言
     *   *   *  ①什么是Thymeleaf？
             *  ②特点
     *  二、Thymeleaf的使用
     *   *  1、完成Thymeleaf入门
         *   *  ⑴新建一个SpringBoot项目demo\_thymeleaf
             *  ⑵项目-完整代码
             *  ⑶效果图
         *  2、对Thymeleaf的基础认识
         *   *  ⑴创建模板
             *  ⑵使用文本
             *  ⑶标准表达式语法
             *  ⑷条件判断
     *  想要了解更多

### 一、前言 ###

##### ①什么是Thymeleaf？ #####

Thymeleaf是一个现代服务器端Java**模板引擎**，适用于Web和独立环境，能够处理HTML，XML，JavaScript，CSS甚至纯文本。  
Thymeleaf的主要目标是提供一种优雅且高度可维护的模板创建方式。为实现这一目标，它以自然模板的概念为基础，将其逻辑注入模板文件，其方式不会影响模板被用作设计原型。这改善了设计沟通，缩小了设计和开发团队之间的差距。  
Thymeleaf也从一开始就设计了Web标准 - 特别是HTML5 - 允许您创建完全验证的模板，如果您需要的话。

##### ②特点 #####

动静分离： Thymeleaf选用html作为模板页，这是任何一款其他模板引擎做不到的！Thymeleaf使用html通过一些特定标签语法代表其含义，但并未破坏html结构，即使无网络、不通过后端渲染也能在浏览器成功打开，大大方便界面的测试和修改。  
开箱即用： Thymeleaf提供标准和Spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、改JSTL、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

### 二、Thymeleaf的使用 ###

#### 1、完成Thymeleaf入门 ####

主要步骤：添加thymeleaf的依赖，创建一个控制类controller，在templates下创建一个html页面即可。

##### ⑴新建一个SpringBoot项目demo\_thymeleaf #####

点击File->Project ->Srping Initializr点击下一步（Next）  
![在这里插入图片描述][3945192d824943f6ae888c6388e31794.png_pic_center]

完善信息后-点击下一步-点击完成即可  
![在这里插入图片描述][1053a45ffef6410badd7cd8d074536b8.png_pic_center]

注意：需要配置下自己本地Maven地址

##### ⑵项目-完整代码 #####

> pom.xmll

<?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.7.5</version>
            <relativePath/> 
        </parent>
        <groupId>com.hn.yuan</groupId>
        <artifactId>demo_thymeleaf</artifactId>
        <version>0.0.1-SNAPSHOT</version>
        <name>demo_thymeleaf</name>
        <description>Demo project for Spring Boot</description>
        <properties>
            <java.version>1.8</java.version>
        </properties>
        <dependencies>
            
            <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.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <optional>true</optional>
            </dependency>
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
            </dependency>
            
            <dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>mybatis-plus-boot-starter</artifactId>
                <version>3.5.1</version>
            </dependency>
            
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <version>5.1.35</version>
            </dependency>
            
            <dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>mybatis-plus-generator</artifactId>
                <version>3.4.1</version>
            </dependency>
            
            <dependency>
                <groupId>org.apache.velocity</groupId>
                <artifactId>velocity-engine-core</artifactId>
                <version>2.1</version>
            </dependency>
        </dependencies>
    
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
            </plugins>
        </build>
    
    </project>

> application.properties层

#配置端口号；
    server.port=8081
    #配置数据源；
    spring.datasource.driver-class-name=com.mysql.jdbc.Driver
    spring.datasource.url=jdbc:mysql://localhost:3306/yuan_productlist?useUnicode=true&characterEncoding=UTF-8&useSSL=false
    spring.datasource.username=root
    spring.datasource.password=root
    
    #关闭 springboot 中 thymeleaf 中的缓存, 默认为 true;
    spring.thymeleaf.cache=false

> controller层

package com.hn.yuan.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    @RequestMapping("/roles")
    public class ListController {
        
    
        @GetMapping("/list")
        public String getList(Model model){
        
            model.addAttribute("msg","Thymeleaf");
            return "list";
        }
    }

> templates文件夹下的 list.html页面

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    
    <head>
        <meta charset="UTF-8">
        <title>Thymeleaf模版集成完毕！</title>
        
        <link rel="stylesheet" href="/bootstrap/css/bootstrap.css"/>
        <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h1>Thymeleaf模版集成完毕！</h1>
            </div>
            <div class="panel-body">
                <table class="table table-striped table-bordered table-hover table-condensed text-center">
                    <tr>
                        <td>角色编号</td>
                        <td>角色名称</td>
                        <td>操作</td>
                    </tr>
                    <tr>
                        <td th:text="1"></td>
                        <td th:text="admin"></td>
                        <td>
                            <a href="#" class="btn btn-success">修改</a>
                            <a href="#" class="btn btn-danger">删除</a>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="panel-footer text-right">
                    Thymeleaf模版集成完毕！
            </div>
        </div>
    </div>
    </body>
    </html>

页面中我使用了 bootstrap样式，可自行下载，放入static文件夹下。[官网下载地址分享][Link 1]  
也可进入百度网盘分享地址：[样式分享][Link 2]  
![在这里插入图片描述][6331b81a01bb422a96a3108416bbb70f.png_pic_center]

![在这里插入图片描述][3945d32354994ee5bc98fd89aacba83f.png_pic_center]

##### ⑶效果图 #####

项目架构：  
![在这里插入图片描述][b82baca78f9f4c059bb64c4edc36d808.png_pic_center]

访问地址：[http://localhost:8081/roles/list][http_localhost_8081_roles_list]  
![在这里插入图片描述][be1451df712242279158ee62ac83334c.png_pic_center]

#### 2、对Thymeleaf的基础认识 ####

##### ⑴创建模板 #####

创建一个 HTML 模板文件：

<!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Index Page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        <p th:text="${message}">Welcome to BeiJing!</p>
    </body>
    </html>

通过引入 Thymeleaf 命名空间。th:text用于处理p标签体的文本内容。该模板文件直接在任何浏览器中正确显示，浏览器会自动忽略它们不能理解的属性th:text。但这不是一个真正有效的 HTML5 文档，因为 HTML5 规范是不允许使用th:\*这些非标准属性的。我们可以切换到 Thymeleaf 的data-th-\*语法，以此来替换th:\*语法：

<!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Index Page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        <p data-th-text="${message}">Welcome to BeiJing!</p>
    </body>
    </html>

HTML5 规范是允许data-\*这样自定义的属性的。th:\*和data-th-\*这两个符号是完全等效且可以互换的。但为了简单直观和代码的紧凑性，本文采用th:\*的表示形式。

##### ⑵使用文本 #####

首先介绍两个最基础的th:\*属th:text和th:utext，它们都是用于处理文本消息内容。  
th:text  
在标签体中展示表达式评估结果的文本内容：

使用外部化的文本内容：

<table> 
 <thead> 
  <tr> 
   <th>1</th> 
   <th><p>Welcome to BeiJing!</p></th> 
  </tr> 
 </thead> 
</table>

当它作为静态文件直接运行时，浏览器会自动忽略它不能识别的th:text属性，而显示

标签体的文本内容Welcome to BeiJing!  
当它作为模板文件运行在服务器端时，th:text属性的具体值将会替换

标签体的文本内容。  
th:utext  
属性th:utext与th:text的区别在于：

*  th:text默认会对含有 HTML 标签的内容进行字符转义；
 *  th:utext（Unescaped Text）则不会对含有 HTML 标签的内容进行字符转义；

假设：message = “**Welcome to BeiJing!**”。  
使用th:text属性：

th:text效果：**Welcome to BeiJing!**  
使用th:utext属性：

th:utext效果：**Welcome to BeiJing!**

##### ⑶标准表达式语法 #####

Thymeleaf 提供了非常丰富的标准表达式语法，总共有 8 大类：

*  简单表达式
 *  字面值
 *  文本操作
 *  算术运算
 *  布尔运算
 *  比较和相等
 *  条件运算
 *  无操作符

##### ⑷条件判断 #####

条件判断语句有三种，分别是：th:if、th:unless、th:swith。

### 想要了解更多 ###

请点击[ 转载链接][Link 3]

![在这里插入图片描述][540a2f652be647879a84b17542e9caea.jpeg_pic_center]

> 各位看官》创作不易，点个赞！！！  
> 诸君共勉：万事开头难，只愿肯放弃。

免责声明：本文章仅用于学习参考

[7f0a8e8cbd7849a3917c4aa6db120f38.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3ff85167235245adb460f1fc15adb428.png
[3945192d824943f6ae888c6388e31794.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/375771089ab24f41afde154b3ba6e2df.png
[1053a45ffef6410badd7cd8d074536b8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/302eb17361354655a37a095d640e1663.png
[Link 1]: https://v3.bootcss.com/getting-started/
[Link 2]: https://pan.baidu.com/s/163euhvZSCV6Swrqhto-oCg?pwd=veq4
[6331b81a01bb422a96a3108416bbb70f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/082e5bfc49b84909919d2e6254e2c4eb.png
[3945d32354994ee5bc98fd89aacba83f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ab642995939b43a0a15224c038857364.png
[b82baca78f9f4c059bb64c4edc36d808.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f8efc4c1df0a4a9a8ca474143684b047.png
[http_localhost_8081_roles_list]: http://localhost:8081/roles/list
[be1451df712242279158ee62ac83334c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/70f8cb144011409280f2779f07a537f6.png
[Link 3]: https://fanlychie.github.io/post/thymeleaf.html
[540a2f652be647879a84b17542e9caea.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2e247f800c9c4313871fe4a9c8c6cf91.jpeg