Thymeleaf 学习笔记

Thymeleaf 学习笔记

1. Thymeleaf介绍

​ Thymeleaf是一个流行的模板引擎，是基于HTML的，语法应用在HTML标签中。该模板引擎采用java语言开发。

​ 模板引擎是做视图层工作的，在服务器端将Controller传过来的数据替换掉模板上的静态数据。(模板+数据=展示页面) Java生态下的模板引擎有：Thymeleaf、Freemaker、Velocity、Beetl等。

​ 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

2. 入门案例

1、创建Spring Boot项目，添加web和Thymeleaf起步依赖

<!--thymeleaf起步依赖-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2、在resources/templates目录下创建index.html

​ 1)在html根元素添加命名空间声明：xmlns:th="http://www.thymeleaf.org"

​ 2)在html标签内引用thymeleaf的语法：th:text="${data}"，接收key为data的数据，替换所修饰标签内的文本内容。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"><!--1.添加命名空间声明-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--2.引用thymeleaf语法-->
    <h2 th:text="${data}">测试数据</h2>
</body>
</html>

3、创建Controller

package com.tsccg.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class ThymeleafController {

    @GetMapping("/find")
    public String find(Model model) {
        //向请求作用域中写入数据
        model.addAttribute("data","Hello Thymeleaf");
        //返回视图
        return "index";
    }
}

4、启动应用，在浏览器中发送请求： http://localhost:8080/find

3. 模板引擎的常用设置

我们在前面的入门案例中，Controller方法返回的是逻辑视图名称，但我们并没有设置视图解析器，也能访问到页面。这是因为Thymeleaf在核心配置文件中有一些默认的设置，如下：

##Thymeleaf默认设置
#缓存 默认为true,但在开发阶段为了修改立即生效，需设置为false
spring.thymeleaf.cache=false
#模板使用的字符编码格式
spring.thymeleaf.encoding=UTF-8
#模板类型  默认为HTML，模板是html文件
spring.thymeleaf.mode=HTML
#模板视图前缀 默认设置为 classpath:/templates/
spring.thymeleaf.prefix=classpath:/templates/
#模板视图后缀 默认为 .html
spring.thymeleaf.suffix=.html

4. 表达式

表达式就是在页面中获取数据的一种thymeleaf语法，类似于el表达式的${key}

4.1 标准变量表达式

语法：${key}

作用：获取请求作用域中key对应的文本数据

实例演示：

以前面的入门案例为基础进行修改。

①创建Student类

package com.tsccg.pojo;

public class Student {
    private String name;
    private Integer age;
    private String email;
	//无、有参构造
    //get set
    //toString
}

②修改index.html页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>标准变量表达式</h1>
    <h2>获取简单类型数据</h2>
    <p th:text="${data}"></p>
    <h2>获取对象属性值</h2>
    <p th:text="${student.name}"></p>
    <p th:text="${student.age}"></p>
    <p th:text="${student.email}"></p>
    <p th:text="${student.getEmail()}"></p>
</body>
</html>

③修改Controller

@Controller
public class ThymeleafController {

    @RequestMapping("/findStudent")
    public String findStudent(Model model) {
        Student student = new Student("张三",20,"zhangsan@qq.com");
        model.addAttribute("student",student);
        model.addAttribute("data","Hello Thymeleaf");
        return "index";
    }
}

④开启应用，在浏览器访问 http://localhost:8080/findStudent

4.2 选择变量表达式

语法：*{key}

说明：需要配合th:object一起使用。使用th:object属性来绑定对象，然后使用*来代表这个对象，后面{} 中的值是此对象中的属性。

作用：获取key对应的对象属性值

实例演示：

①在resources/templates目录下新建select.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>选择变量表达式</h1>
    <div th:object="${student}">
        <p th:text="*{name}"></p>
        <p th:text="*{age}"></p>
        <p th:text="*{email}"></p>
    </div>
    <p th:text="*{student.email}"></p>
</body>
</html>

②在Controller中新添对应方法

@RequestMapping("/select")
public String select(Model model) {
    Student student = new Student("李四",22,"lisi@qq.com");
    model.addAttribute("student",student);
    return "select";
}

③开启应用，在浏览器访问 http://localhost:8080/select

4.3 链接表达式

语法：@{url}

作用：主要用于链接、地址的展示，可用于<script src="...">、<link href="...">、<a href="...">、<form action="...">、<img src="">等，可以在 URL 路径中动态获取数据

实例演示：

以入门案例为基础进行修改。

①在resources/templates目录下创建 link.html

使用Thymeleaf的链接表达式发送各种请求

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>链接表达式</h1>
    <a th:href="@{http://www.baidu.com}">链接绝对地址</a>
    <br>
    <a th:href="@{/get}">链接相对地址，无参</a>
    <br>
    <a th:href="@{'/get?id=' + ${id}}">链接相对地址，有参</a>
    <br>
    <a th:href="@{/getStudent(id=${id},name=${name})}">传参数方式 2</a>
    <br>
    <form th:action="@{'/student/' + ${id}}" method="post">
        <input type="hidden" name="_method" value="DELETE">
        <input type="submit" value="RESTful风格DELETE请求">
    </form>
    <form th:action="@{/student/{id}(id=${id})}" method="post">
        <input type="hidden" name="_method" value="DELETE">
        <input type="submit" value="RESTful风格DELETE请求 方式2">
    </form>
</body>
</html>

②在Controller中添加方法

@RequestMapping("/link")
public String link(Model model) {
    model.addAttribute("id",1001);
    model.addAttribute("name","Tom");
    return "link";
}
@RequestMapping("/get")
@ResponseBody
public String get(Integer id) {
    return "查询学生，id=" + id;
}
@RequestMapping("/getStudent")
@ResponseBody
public String getStudent(Integer id,String name) {
    return "查询学生，id=" + id + ",name=" + name;
}

@DeleteMapping("/student/{id}")
@ResponseBody
public String restFul(@PathVariable Integer id) {
    return "执行删除操作，id=" + id;
}

③在核心配置文件中开启HiddenHttpMethodFilter过滤器

#开启HiddenHttpMethodFilter过滤器
spring.mvc.hiddenmethod.filter.enabled=true

④开启应用，在浏览器发送请求 http://localhost:8080/link

5. Thymeleaf属性

Thymeleaf的大部分属性和html元素的属性一样。在html元素属性前加上th:前缀之后，属性的作用不变，属性的值由模板引擎处理。

在Thymeleaf属性中可以使用变量表达式。

5.1 常用基本属性

1、th:action

作用同form表单标签的action属性，主要结合链接表达式，获取动态变量。

<form th:action="@{/tmp/doSome(id=${id})}" th:method="post" >...</form>

2、th:method

同form表单的method属性。

<form th:action="@{/tmp/doSome(id=${id})}" th:method="post" >...</form>

3、th:href

定义超链接，主要结合链接表达式，获取动态变量。

<a th:href="@{/getStudent(id=${id},name=${name})}">传参数方式 2</a>

4、th:src

同html的src属性，用于引入外部资源，常与链接表达式结合使用。

在Spring Boot项目中，所有静态资源都放到resources的static目录下，引如此目录下的资源时，路径上不需要写上static。

<script type="text/javascript" th:src="@{js/jquery.min.js}"></script>

5、th:text

用于文本的显示，该属性显示的文本在标签体中，如果是文本框，数据会在文本框外显示，要想显示在文本框内显示，需要使用 th:value。

<h3 th:text="${title}"></h3>
<input type="text" th:text="${preText}" name="username" th:value="${username}"  >

6、 th:style

设置样式

<div th:style="'color: red'"></div>

实例演示使用：

新建一个Spring Boot项目，添加web和thymeleaf起步依赖

①在templates目录下创建模板 test.html

在html元素属性前添加th:前缀

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../static/js/jquery.min.js"></script>
    <script type="text/javascript">
        function fun() {
            alert("hello");
        }
    </script>
</head>
<body>
<center>
    <h3 th:text="${title}"></h3>
    <div th:style="'color: red'">
        <form th:action="@{/tmp/doSome(id=${id})}" th:method="post" >
            <input type="text" th:name="username" th:value="${username}"><br>
            <input type="submit" th:value="提交"><br>
        </form>
        <input type="button" th:attr="value='按钮'" th:onclick="fun()"><br>
    </div>
</center>
</body>
</html>

②创建Controller方法

@RequestMapping("/test")
public String test(Model model) {
    model.addAttribute("title","Thymeleaf属性");
    model.addAttribute("id","1001");
    model.addAttribute("username","Tom");
    return "test";
}

③启动应用，访问 http://localhost:8080/test

5.2 th:each 遍历集合

th:each用于遍历后台传过来的集合。

用法：

①创建Controller方法

向请求作用域中存入一个List集合，集合中的元素是Student对象。

@RequestMapping("/each")
public String each(Model model) {
    List<Student> studentList = new ArrayList<>();
    studentList.add(new Student("张三",19,"zhangsan@qq.com"));
    studentList.add(new Student("李四",20,"lisi@qq.com"));
    studentList.add(new Student("王五",21,"wangwu@qq.com"));
    studentList.add(new Student("赵六",22,"zhaoliu@qq.com"));
    model.addAttribute("studentList",studentList);
    return "each";
}

②创建页面

在templates目录下创建each.html，使用Thymeleaf的th:each属性将集合中的数据遍历展示在表格中。

<center>
    <table cellpadding="0" cellspacing="0" border="1" width="300px">
        <thead>
            <tr>
                <th>序号</th>
                <th>下标</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>邮箱地址</th>
                <th>是否为第一行</th>
                <th>姓名2</th>
            </tr>
        </thead>
        <tbody th:each="student,itemStat:${studentList}">
            <tr>
                <td th:text="${itemStat.count + '/' + itemStat.size}"></td>
                <td th:text="${itemStat.index}"></td>
                <td th:text="${student.name}"></td>
                <td th:text="${student.age}"></td>
                <td th:text="${student.email}"></td>
                <td th:text="${itemStat.first}"></td>
                <td th:text="${itemStat.current.name}"></td>
            </tr>
        </tbody>
    </table>
</center>

语法说明：th:each="student,itemStat:${studentList}"

  • ${studentList}：后台传过来的待遍历集合。
  • student：自定义变量，代表当前迭代元素。
  • itemStat：自定义变量，代表当前循环体的信息，通过该变量可以获取如下信息
    • index：当前迭代元素的下标（从0开始算）
    • count：当前迭代元素的个数（从1开始算）
    • size：集合中元素的数量
    • even/odd：布尔值，当前循环是否是偶数/奇数（从0开始算）
    • first：布尔值，当前迭代元素是否是集合中第一个元素
    • last：布尔值，当前迭代元素是否是集合中最后一个元素
    • current：获取当前迭代元素，即student

注意：上面代表循环体信息的itemStat也可以不自己命名，默认采用自定义迭代元素名加上Stat后缀，即studentStat。

③开启应用，在浏览器访问 http://localhost:8080/each

④遍历map

当遍历value为对象的map集合时，需要根据迭代元素的value属性获取对象的数据

<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>
</div>

5.3 if 条件判断

语法：

  • th:if="boolean条件" ，条件为true时显示所修饰标签里的内容
  • th:unless="boolean条件"，条件为false时显示所修饰标签里的内容

演示：

①写Controller方法

@RequestMapping("/if")
public String iF(Model model) {
    model.addAttribute("age",20);
    model.addAttribute("sex",0);
    model.addAttribute("name","");
    model.addAttribute("result",null);
    return "ifUnless";
}

②在templates目录下创建ifUnless.html

<body>
    <p th:if="${age} >= 18">
        1、当年龄大于等于18
    </p>
    <p th:unless="${age} >= 18">
        2、当年龄小于18
    </p>

    <p th:if="${sex} == 0">
        3、当性别为女
    </p>
    <p th:if="${sex} == 1">
        4、当性别为男
    </p>

    <p th:if="${result}">
        5、当值为null
    </p>

    <p th:if="${name}">
        6、当值为空字符串“”
    </p>
</body>

③开启应用，在浏览器访问 http://localhost:8080/if

可见，当值为""时，也表示true。

5.4 switch case 条件判断

用法：

①模板页面

<div th:switch="${sex}">
    <p th:case="0">女</p>
    <p th:case="1">男</p>
    <p th:case="*">人中龙凤</p>
</div>

一旦某个case匹配为true，其他case都会被当作false。

*表示默认的case，当其他所有case都匹配失败时，执行*。

②处理器方法

@RequestMapping("/switch")
public String switchCase(Model model) {
    model.addAttribute("sex",null);
    return "switch";
}

③浏览器访问

5.5 inline 内联

th:inline有三个取值类型：text、javascript、none。

5.5.1 内联text

内联text可以让Thymeleaf表达式不依赖于html标签，单独使用。类似于vue的{{data}}。

语法：

<div th:inline="text"><!--要求在父级标签上加 th:inline="text" 属性，但不加也能用-->
    <p>你好，[[${name}]]</p>
</div>

实例演示：

①模板页面

<h3>内联text</h3>
<div th:inline="text">
    <p>你好，[[${name}]]</p>
</div>
<hr>
<h3>不加 th:inline="text"也能用</h3>
<div>
    <p>你好，[[${name}]]</p>
</div>

②处理器方法

@RequestMapping("/inlineText")
public String inlineText(Model model) {
    model.addAttribute("name","阿伟");
    return "inlineText";
}

③页面显示

5.5.2 内联javascript

内联javascript可以在js语句中，通过模板语法获取请求作用域中的数据。

演示：

①模板页面

<button onclick="fun1()">按钮</button>
<script type="text/javascript" th:inline="javascript">
    var name = [[${name}]];
    function fun1() {
        alert(name);
    }
</script>

②处理器方法

@RequestMapping("/inlineJs")
public String inlineJs(Model model) {
    model.addAttribute("name","杰哥");
    return "inlineJs";
}

③页面显示

5.6 字符串连接

在Thymeleaf中，有两种方式连接字符串：

1）使用单引号把字符串括起来，用+连接其他字符串或表达式

<p th:text="'a' + ${data} + 'b'"></p>

2）使用双竖线将所有字符串和表达式括起来，字符串无需加单引号

<p th:text="|a${data}b|"></p>

实例演示：

①模板页面

<h3>字符串连接方式1：'a' + ${data} + 'b'</h3>
<p th:text="'我的名字是' + ${name} + ',年龄' + ${age}"></p>
<h3>字符串连接方式2：|a${data}b|</h3>
<p th:text="|我的名字是${name},年龄${age}|"></p>

②处理器方法

@RequestMapping("/connStr")
public String connStr(Model model) {
    model.addAttribute("name","汤姆");
    model.addAttribute("age","20");
    return "connStr";
}

③页面显示

5.7 内置对象

Thymeleaf模板引擎内置了一组内置的对象，常用的如下：

  1. #request表示HttpServletRequest 请求作用域对象
  2. #session表示HttpSession 会话作用域对象
  3. session表示Map对象的， 是#session的简单表示方式， 用来获取session中指定的key的值

实例演示：

①处理器方法

@RequestMapping("/innerObj")
public String innerObj(HttpServletRequest request, HttpSession session) {
    request.setAttribute("reqData","请求作用域中的数据");
    session.setAttribute("sessionData","会话作用域中的数据");
    return "innerObj";
}

②模板页面

<h3>获取作用域中的数据</h3>
<p th:text="${#request.getAttribute('reqData')}"></p>
<p th:text="${#session.getAttribute('sessionData')}"></p>
<p th:text="${session.sessionData}"></p>
<hr>
<h3>使用内置对象的方法</h3>
getRequestURL=<span th:text="${#request.getRequestURL()}"></span><br/>
getRequestURI=<span th:text="${#request.getRequestURI()}"></span><br/>
getQueryString=<span th:text="${#request.getQueryString()}"></span><br/>
getContextPath=<span th:text="${#request.getContextPath()}"></span><br/>
getServerName=<span th:text="${#request.getServerName()}"></span><br/>
getServerPort=<span th:text="${#request.getServerPort()}"></span><br/>

③页面展示

5.8 内置工具类对象

模板引擎提供了一组功能性内置对象，可以在模板中直接使用这些对象提供的功能方法。工作中常用的数据类型，如集合、时间、数值等都可以使用这些工具类对象来处理。

官方手册：http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

工具类对象前都需要加#，一般都以s结尾。

常用的工具类对象：

  1. #dates: 处理日器的工具类
  2. #numbers:处理数字
  3. #lists: 处理list集合

实例演示：

①处理器方法

@RequestMapping("/innerUtil")
public String innerUtil(Model model) {
    model.addAttribute("myDate",new Date());//日期
    model.addAttribute("myNum",26.695);//数字
    model.addAttribute("myStr","tsccg");//字符串
    //list集合
    List<String> list = new ArrayList<>();
    list.add("a");
    list.add("b");
    list.add("c");
    model.addAttribute("myList",list);
    //对象，带有null属性
    Student student = new Student();
    student.setName("张三");
    model.addAttribute("student",student);
    return "innerUtil";
}

②模板页面

<h3>日期类对象 #dates</h3>
#dates.format(myDate) == <span th:text="${#dates.format(myDate)}"></span><br>
#dates.format(myDate,'yyyy-MM-dd') == <span th:text="${#dates.format(myDate,'yyyy-MM-dd')}"></span><br>
#dates.format(myDate,'yyyy-MM-dd HH:mm:ss') == <span th:text="${#dates.format(myDate,'yyyy-MM-dd HH:mm:ss')}"></span><br>
#dates.year(myDate) == <span th:text="${#dates.year(myDate)}"></span><br>
#dates.month(myDate) == <span th:text="${#dates.month(myDate)}"></span><br>
#dates.monthName(myDate) == <span th:text="${#dates.monthName(myDate)}"></span><br>
#dates.createNow() == <span th:text="${#dates.createNow()}"></span>

<br/>

<h3>内置工具类#numbers，操作数字的</h3>
#numbers.formatCurrency(myNum) == <span th:text="${#numbers.formatCurrency(myNum)}"></span><br>
#numbers.formatDecimal(myNum,5,2) == <span th:text="${#numbers.formatDecimal(myNum,5,2)}"></span>

<br/>

<h3>内置工具类#strings,操作字符串</h3>
#strings.toUpperCase(myStr) == <span th:text="${#strings.toUpperCase(myStr)}"></span><br>
#strings.indexOf(myStr,'b') == <span th:text="${#strings.indexOf(myStr,'s')}"></span><br>
#strings.substring(myStr,2,5) == <span th:text="${#strings.substring(myStr,2,5)}"></span><br>
#strings.substring(myStr,2) == <span th:text="${#strings.substring(myStr,2)}"></span><br>
#strings.concat(myStr,'---Hello String---') == <span th:text="${#strings.concat(myStr,'---Hello String---')}"></span><br>
#strings.length(myStr) == <span th:text="${#strings.length(myStr)}"></span><br>
#strings.length('hello') == <span th:text="${#strings.length('hello')}"></span><br>
#strings.isEmpty(myStr) == <span th:unless="${#strings.isEmpty(myStr)}"> myStr不是空字符串  </span>

<br/>

<h3>内置工具类#lists,操作list集合</h3>
#lists.size(myList) == <span th:text="${#lists.size(myList)}"></span><br>
#lists.contains(myList,'a') == <span th:if="${#lists.contains(myList,'a')}">有成员a</span><br>
!${#lists.isEmpty(myList)} == <span th:if="!${#lists.isEmpty(myList)}"> list 集合有多个成员</span>

<br>

<h3>处理null</h3>
student?.name == <span th:text="${student?.name}"></span><br>
student?.email == <span th:text="${student?.email}"></span><br>

③页面展示

5.9 内容复用

为了将页面中重复的内容提取出来，我们可以创建自定义模板，用Thymeleaf的语法在其它页面中引用模板内容。

1.定义模板

语法：th:fragment="top"，自定义模板名称为 top

如：head.html

<div th:fragment="top">
    <p>
        天上人间
    </p>
    <p>
        www.upanddown.com
    </p>
</div>

2.引用模板

引用语法：

  1. ~{templateName :: selector}，引用selector所包含的部分
  2. templateName :: selector，引用selector所包含的部分
  3. templateName :: html，引用整个模板页面
  4. templdate，引用整个模板页面

其中，templdateName指的是模板文件名称，selector指的是自定义模板名称

有两种引用方式：

  1. 插入模板：<div th:insert="~{head :: top}"></div>
  2. 包含模板：<div th:include="head :: top"></div>

3.实例演示

①定义模板

在templates目录下分别创建如下页面：

1)head.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:fragment="top" style="color: red">
    <center>
        <h2>
            天上人间
        </h2>
        <p>
            www.upanddown.com
        </p>
    </center>
</div>
</body>
</html>

2)footer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div align="center">
    <p>
        www.upanddown.com
        @copy; tsccg 2021
    </p>
</div>
</body>
</html>

3)创建目录common，在其中创建left.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div align="left" th:fragment="menu">
        <p>会员管理</p>
        <p>商品管理</p>
        <p>销售管理</p>
    </div>
</body>
</html>

②在另一个页面中引用自定义模板

main.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div align="center">
    <h2>插入模板 th:insert</h2>
    <div th:insert="~{head :: top}">
        第一种方式
    </div>
    <div th:insert="head :: top">
        第二种方式
    </div>
    <h2>包含模板 th:include</h2>
    <div th:include="~{head :: top}">
        第一种
    </div>
    <div th:include="head :: top">
        第二种
    </div>
    <hr>
    <h2>引用多级目录的模板文件</h2>
    <div th:insert="common/left :: menu"></div>
    <hr>
    <h2>引用整个模板文件</h2>
    <div th:include="footer :: html"></div>
    <div th:include="footer"></div>
</div>
</body>
</html>

③处理器方法

@RequestMapping("/useModel")
public String useModel() {
    return "main";
}

④查看页面

查看页面源代码：


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div align="center">
            <h2>插入模板 th:insert</h2>
            <div>
                <div style="color: red">
                    <center>
                        <h2>
                            天上人间
                        </h2>
                        <p>
                            www.upanddown.com
                        </p>
                    </center>
                </div>
            </div>
            <div>
                <div style="color: red">
                    <center>
                        <h2>
                            天上人间
                        </h2>
                        <p>
                            www.upanddown.com
                        </p>
                    </center>
                </div>
            </div>
            <h2>包含模板 th:include</h2>
            <div>
                <center>
                    <h2>
                        天上人间
                    </h2>
                    <p>
                        www.upanddown.com
                    </p>
                </center>
            </div>
            <div>
                <center>
                    <h2>
                        天上人间
                    </h2>
                    <p>
                        www.upanddown.com
                    </p>
                </center>
            </div>
            <hr>
            <h2>引用多级目录的模板文件</h2>
            <div>
                <div align="left">
                    <p>会员管理</p>
                    <p>商品管理</p>
                    <p>销售管理</p>
                </div>
            </div>
            <hr>
            <h2>引用整个模板文件</h2>
            <div>
                <head>
                    <meta charset="UTF-8">
                    <title>Title</title>
                </head>
                <body>
                    <div align="center">
                        <p>
                            www.upanddown.com
                            @copy; tsccg 2021
                        </p>
                    </div>
                </body>
            </div>
            <div><!DOCTYPE html>
                <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <title>Title</title>
                    </head>
                    <body>
                        <div align="center">
                            <p>
                                www.upanddown.com
                                @copy; tsccg 2021
                            </p>
                        </div>
                    </body>
                </html>
            </div>
        </div>
    </body>
</html>
posted @ 2021-12-24 21:33  TSCCG  阅读(400)  评论(0)  编辑  收藏  举报