SpringBoot ( 六 ) thymeleaf

春哥的魔法书

已于 2023-07-04 21:33:58 修改

阅读量2.1k

点赞数 3

分类专栏： SpringBoot 文章标签： spring boot spring thymeleaf

于 2023-05-11 20:20:11 首次发布

本文链接：https://blog.csdn.net/yuanchun05/article/details/130629908

版权

SpringBoot 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

3.thymeleaf

thymeleaf : 伴随 SpringBoot 流行开始流行的页面标签

3.0.准备

3.0.1.Maven导入依赖

在pom.xml 文件中增加thymeleaf的依赖

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

3.0.2.声明标签库

在index.html 页面的结点声明引入标签库

<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

在标签下的标签显示文本信息

<span th:text="'hello, thymeleaf ! '"></span> <br>

3.0.3.关闭缓存

在项目的配置文件中默认是开启页面缓存, 修改配置为false

# 开启模板缓存（默认值： true ）
spring.thymeleaf.cache=false

3.0.4.创建测试用实体类

在这个测试类中包含多种常用的数据类型

package com.yuan.entity;

import lombok.Data;

import java.time.LocalDateTime;
import java.util.Date;

@Data
public class TestEntity {
    private Integer tid = 1;
    private String tname = "测试标题";
    private Date tdate = new Date();
    private LocalDateTime ttime = LocalDateTime.now();
    private String tsex = "1";
    private Integer tint = 15;
    private Double tdou = 123.4567;
    private String tinfo = "这是一段测试文字, 可能会很长. 在很久久以后, 第三次文明纪元开始没多久, 掌握了文明的新人类发现了旧文明纪元时代的上古遗迹.";
    private String thtml = "<span style='color:red;' ><b>这是一段html代码</b></span>";
    private String tnull;
    private Boolean tbool = true;
}

3.1.基本表达式

3.1.1.提供数据

在 index.html页面, 添加超链接请求Controller中的test01方法

index.html

    <a th:href="@{/test01}">test01 基本表达式</a> <br/>

在 Controller 中添加方法

通过 ModelMap, 传递实体类, 字符串两组信息到 test 01.html页面

package com.yuan.controller;

import com.yuan.entity.TestEntity;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class TagController {


    @RequestMapping("test01")
    public String test01(ModelMap modelMap){
        TestEntity testEntity = new TestEntity();
        modelMap.put("entity", testEntity);
        modelMap.put("data", "hello test01");
        return "test01";
    }
}

3.1.2.接收数据

在 templates文件夹下增加test01.html接收数据

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
字符串拼接1: <span th:text="'Welcome , ' + ${entity.tname} + '!'"></span> <br/>
字符串拼接2: <span th:text="${'Welcome , ' + entity.tname + '!'}"></span> <br/>
字符串拼接3: <span th:text="|Welcome , ${entity.tname}!|"></span> <br/>
直接取值: <span th:text="${data}" >测试标题</span>   <br/>
html输出: <span th:utext="${entity.thtml}" >测试标题</span>   <br/>
取对象属性值: <span th:text="${entity.tname}" >tname</span>  <br/>
直接取值: <input type="text"  value="hw" th:value="${data}" />  <br/>
取对象属性值: <input type="text" name="tname" value="tname" th:value="${entity.tname}" />  <br/>
对象取值: <div th:object="${entity}">
            tname: <span th:text="*{tname}">tname</span> <br>
            tint: <span th:text="*{tint}">tint</span> <br>
         </div>
</body>
</html>

3.1.2.1.取值${}

使用 ${} 可以从作用域里取值 ,

使用 ${} 的HTML属性名前加 th:

3.1.2.2.从对象里取值

通过 对象.属性 形式, 从对象取属性的值

html输出: <span th:utext="${entity.thtml}" >测试标题</span>   <br/>
取对象属性值: <span th:text="${entity.tname}" >tname</span>  <br/>
取对象属性值: <input type="text" name="tname" value="tname" th:value="${entity.tname}" />  <br/>

可以使用 th:object 与 *{} 嵌套的方式从对象取属性对应的值

对象取值: <div th:object="${entity}">
            tname: <span th:text="*{tname}">tname</span> <br>
            tint: <span th:text="*{tint}">tint</span> <br>
         </div>

3.1.2.3.显示位置

th:value 显示在 value属性的位置

直接取值: <input type="text"  value="hw" th:value="${data}" />  <br/>
取对象属性值: <input type="text" name="tname" value="tname" th:value="${entity.tname}" />  <br/>

th:text 显示在标签首尾之间的文本信息

直接取值: <span th:text="${data}" >测试标题</span>   <br/>
取对象属性值: <span th:text="${entity.tname}" >tname</span>  <br/>

th:utext 显示在标签首尾之间的HTML信息

html输出: <span th:utext="${entity.thtml}" >测试标题</span>   <br/>

3.1.2.4.信息连接

多个信息连接在一起显示, 有多种结构

字符串拼接1: <span th:text="'Welcome , ' + ${entity.tname} + '!'"></span> <br/>
字符串拼接2: <span th:text="${'Welcome , ' + entity.tname + '!'}"></span> <br/>
字符串拼接3: <span th:text="|Welcome , ${entity.tname}!|"></span> <br/>

3.2.内置对象

3.2.1.提供数据

在 index.html页面, 添加超链接请求Controller中的test02方法

index.html

    <a th:href="@{/test02}">test02 内置对象</a> <br/>

在 Controller 中添加方法

通过 ModelMap, HttpSession 封装数据, 传递到 test 02.html页面

    @RequestMapping("test02")
    public String test02(HttpSession session, ModelMap modelMap){
        TestEntity entity = new TestEntity();
        // 封装数据到 request容器
        modelMap.put("mstr", "hello request");

        // 封装数据到 session容器
        session.setAttribute("sdata", entity);
        session.setAttribute("sstr", "hello session");
        
        return "test02";
    }

3.2.2.接收数据

在 templates文件夹下增加test02.html接收数据

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<span th:text="${#request.getAttribute('mstr')}"></span> <br>
<hr/>
<span th:text="${#session.getAttribute('sstr')}"></span> <br>
<span th:text="${#session.getAttribute('sdata')}"></span> <br>
<hr/>
<span th:text="${session.sdata.tname}"></span> <br>

</body>
</html>

3.2.2.1.内置对象

${#ctx} : 上下文对象，可用于获取其它内置对象。
${#vars} : 上下文变量。
${#locale}：上下文区域设置。
${#request}: HttpServletRequest对象。
${#response}: HttpServletResponse对象。
${#session}: HttpSession对象。
${#servletContext}: ServletContext对象。

3.2.2.2.request

从request作用域取出封装在ModelMap里的数据

<span th:text="${#request.getAttribute('mstr')}"></span> <br>

3.2.2.3.session

#session表示HttpSession对象

session表示map对象，是#session的简单表示方式，用来获取session中指定的key的值

<span th:text="${#session.getAttribute('sstr')}"></span> <br>
<span th:text="${#session.getAttribute('sdata')}"></span> <br>
<hr/>
<span th:text="${session.sdata.tname}"></span> <br>

3.3.内置工具类对象

3.3.1.提供数据

在 index.html页面, 添加超链接请求Controller中的test03方法

index.html

    <a th:href="@{/test03}">test03 内置工具类对象</a> <br/>

在 Controller 中添加方法

通过 ModelMap 封装String , double, boolean, Array , List , Map , Date数据, 传递到 test 03.html页面

    @RequestMapping("test03")
    public String test03(ModelMap modelMap){

        modelMap.put("testStr", "hello String");
        modelMap.put("testNum", 8888.888);
        modelMap.put("testBool", true);
        modelMap.put("testArray", new Integer[]{1,2,3,4});
        modelMap.put("testList", Arrays.asList(1,3,2,4,0));
        Map testMap = new HashMap();
        testMap.put("tmtitle", "标题");
        testMap.put("tmdesc", "说明说明说明说明说明");
        modelMap.put("testMap", testMap);
        modelMap.put("testDate", new Date());
        return "test03";
    }

3.3.2.接收数据

在 templates文件夹下增加test03.html接收数据

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h2>Thymeleaf 内置工具类对象</h2>
<h3>#strings :  <span th:text="${testStr}"/> </h3>
<div th:if="${not #strings.isEmpty(testStr)}" >
	<p>获取长度 length : <span th:text="${#strings.length(testStr)}"/></p>
    <p>判断是否为空 isEmpty : <span th:text="${#strings.isEmpty(testStr)}"/></p>
    <p>判断是否为非空 not : <span th:text="${not #strings.isEmpty(testStr)}"/></p>
    <p>转大写 toUpperCase : <span th:text="${#strings.toUpperCase(testStr)}"/></p>
    <p>转小写 toLowerCase : <span th:text="${#strings.toLowerCase(testStr)}"/></p>
    <p>判断相等(区分大小写) equals : <span th:text="${#strings.equals(testStr, 'hello string')}"/></p>
    <p>判断相等(不区分大小写) equalsIgnoreCase : <span th:text="${#strings.equalsIgnoreCase(testStr, 'hello string')}"/></p>
    <p>寻址 indexOf : <span th:text="${#strings.indexOf(testStr, 'rr')}"/></p>
    <p>截取 substring : <span th:text="${#strings.substring(testStr, 2, 8)}"/></p>
    <p>替换 replace : <span th:text="${#strings.replace(testStr, 'll', 'TT')}"/></p>
    <p>以xxx开头 startsWith : <span th:text="${#strings.startsWith(testStr, 'he')}"/></p>
    <p>包含 contains : <span th:text="${#strings.contains(testStr, 'll')}"/></p>
</div>

<h3>#numbers :  <span th:text="${testNum}"/>  </h3>
<div>
    <p>formatDecimal 整数部分随意，小数点后保留两位，四舍五入: <span th:text="${#numbers.formatDecimal(testNum, 0, 2)}"/></p>
    <p>formatDecimal 整数部分保留五位数，小数点后保留两位，四舍五入: <span th:text="${#numbers.formatDecimal(testNum, 5, 2)}"/></p>
  	<p>formatDecimal 整数部分保留，按千位,分隔: <span th:text="${#numbers.formatDecimal(testNum, 0, 'COMMA', 2, 'POINT')}"/></p>
</div>

<h3>#bools :  <span th:text="${testBool}"/>  </h3>
<div th:if="${#bools.isTrue(testBool)}">
    <p >是否为true isTrue : <span th:text="${#bools.isTrue(testBool)}" ></span></p>
</div>

<h3>#arrays  :  <span th:text="${'1,2,3,4'}"/>  </h3>
<div th:if="${not #arrays.isEmpty(testArray)}">
    <p>长度 length : <span th:text="${#arrays.length(testArray)}"/></p>
    <p>包含 contains : <span th:text="${#arrays.contains(testArray, 15)}"/></p>
    <p>全包含 containsAll : <span th:text="${#arrays.containsAll(testArray, testArray)}"/></p>
</div>
<h3>#lists  :  <span th:text="${'1,3,2,4,0'}"/>  </h3>
<div th:if="${not #lists.isEmpty(testList)}">
    <p>长度 size : <span th:text="${#lists.size(testList)}"/></p>
    <p>包含 contains : <span th:text="${#lists.contains(testList, 0)}"/></p>
    <p>排序 sort : <span th:text="${#lists.sort(testList)}"/></p>
</div>
<h3>#maps  :  <span th:text="${testMap}"/>  </h3>
<div th:if="${not #maps.isEmpty(testMap)}">
    <p>长度 size : <span th:text="${#maps.size(testMap)}"/></p>
    <p>包含key containsKey : <span th:text="${#maps.containsKey(testMap, 'tmtitle')}"/></p>
    <p>包含value containsValue : <span th:text="${#maps.containsValue(testMap, '说明')}"/></p>
</div>
<h3>#dates :  <span th:text="${testDate}"/>   </h3>
<div>
    <p>默认格式输出 format : <span th:text="${#dates.format(testDate)}"/></p>
    <p>指定格式输出 custom format : <span th:text="${#dates.format(testDate, 'yyyy-MM-dd HH:mm:ss')}"/></p>
    <p>日 day : <span th:text="${#dates.day(testDate)}"/></p>
    <p>月 month : <span th:text="${#dates.month(testDate)}"/></p>
    <p>月名 monthName : <span th:text="${#dates.monthName(testDate)}"/></p>
    <p>年 year : <span th:text="${#dates.year(testDate)}"/></p>
    <p>星期 dayOfWeekName : <span th:text="${#dates.dayOfWeekName(testDate)}"/></p>
    <p>时 hour : <span th:text="${#dates.hour(testDate)}"/></p>
    <p>分 minute : <span th:text="${#dates.minute(testDate)}"/></p>
    <p>秒 second : <span th:text="${#dates.second(testDate)}"/></p>
    <p>当前时间 createNow : <span th:text="${#dates.createNow()}"/></p>
</div>


</body>
</html>

3.4.流程结构

3.4.1.提供数据

在 index.html页面, 添加超链接请求Controller中的test04方法

index.html

    <a th:href="@{/test04}">test04 流程结构</a> <br/>

在 Controller 中添加方法

通过 ModelMap 封装对象, List等数据, 传递到 test 04.html页面

    @RequestMapping("test04")
    public String test04(ModelMap modelMap){
        // 在ModelMap中存入对象
        TestEntity entity = new TestEntity();
        //entity.setTinfo("");
        //entity.setTinfo(null);
        modelMap.put("entity", entity);

        // 在ModelMap中存入List
        List<TestEntity> list = getTestEntityList();
        modelMap.put("list", list);


        return "test04";
    }

    private List<TestEntity> getTestEntityList() {
        List<TestEntity> list = new ArrayList<>();
        TestEntity te1 = new TestEntity();
        te1.setTid(1);
        te1.setTname("王小二");
        te1.setTsex("1");
        te1.setTtime(LocalDateTime.now());
        System.out.println("te1 = " + te1);
        list.add(te1);

        TestEntity te2 = new TestEntity();
        te2.setTid(2);
        te2.setTname("李小三");
        te2.setTsex("0");
        te2.setTtime(LocalDateTime.now());
        System.out.println("te2 = " + te2);
        list.add(te2);

        TestEntity te3 = new TestEntity();
        te3.setTid(3);
        te3.setTname("赵小四");
        te3.setTsex("1");
        te3.setTtime(LocalDateTime.now());
        System.out.println("te3 = " + te3);
        list.add(te3);
        return list;
    }

3.4.2.接收数据

在 templates文件夹下增加test03.html接收数据

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
----------------if-----------------<br>
<input th:style="${entity.tsex eq '1'} ? 'color:red;'"  th:value="${entity.tint}" /><br>
(与5比较)
<span th:if="${entity.tint lt 5}"   th:text="${'小于 5'}" >123</span>
<span th:if="${entity.tint gt 5}"   th:text="${'大于 5'}" >123</span> <br/>

<span th:text="${'tnull = ' + entity.tnull }"></span>
<span th:if="${entity.tnull} eq '' "   th:text="${' : 与 \'\'比较'}" >123</span>
<span th:if="${entity.tnull} eq null "   th:text="${' : 与 null 比较'}" >123</span> <br/>
   
<span  th:if="${entity.tinfo} eq '' or  ${entity.tinfo} eq null "  th:text="没有说明信息" /> <br/>
<span  th:if="${entity.tinfo} ne '' and  ${entity.tinfo} ne null "  th:text="${entity.tinfo}" /> <br/>
----------------unless-- 和th:if判断相反  ---------------<br>
<input type="text" th:value="${entity.tname}"  th:unless="${entity.tname} eq null"  /> <br/>
<input type="text" th:value="${entity.tname}"  th:if="${ not (entity.tname eq null)}"  /> <br/>
----------------switch-----------------<br>
<div th:switch="${entity.tsex}">
    <span  th:case="'1'">男</span>
    <span  th:case="'0'">女</span>
</div>
    

----------------each  table -----------------<br>
<table border="1"  width="500" >
    <tbody th:remove="all-but-first">　　　　　　　　　
    <tr th:each="row,i:${list}" >
<!--        <td th:text="${rowStat.count}">1</td>-->
        <td th:text="${i.count}">1</td>
        <td th:text="${row.tname}">Red Chair</td>
        <td th:text="${row.tsex}">1</td>
        <td th:text="${row.tsex eq '1'?'男':'女'}">1</td>
        <td th:switch="${row.tsex}">
            <span  th:case="'1'">男</span>
            <span  th:case="'0'">女</span>
        </td>
        <td th:text="${#temporals.format(row.ttime,'yyyy-MM-dd HH:mm:ss')}">2014-12-01</td>
    </tr>
    <tr>
        <td>White table</td>
        <td>$200</td>
        <td>15-Jul-2013</td>
    </tr>
    <tr>
        <td>Reb table</td>
        <td>$200</td>
        <td>15-Jul-2013</td>
    </tr>
    <tr>
        <td>Blue table</td>
        <td>$200</td>
        <td>15-Jul-2013</td>
    </tr>
    </tbody>
</table>
   <br>
<table  border="1"  width="500" >
    <th:block th:each="te : ${list}">
        <tr>
            <td th:text="${te.tid}">...</td>
            <td th:text="${te.tname}">...</td>
        </tr>
        <tr>
            <td colspan="2" th:text="${te.tinfo}">...</td>
        </tr>
    </th:block>
</table>
----------------each select-----------------<br>
<select   th:value="${id}"  >
    <option value="">~请选择~</option>
    <option th:each="t:${list}"  th:value="${t.tid }" th:text="${t.tname}"  >请选择</option>
</select>
<br>
----------------each  input-----------------<br>

<input type ="checkbox" name="arr"
       th:each ="t:${list}"
       th:value="${t.tid }" th:text="${t.tname}" >

</body>
</html>

3.4.2.1.比较 if

th:if 用于判断

>、<、>=、<=、==、!= 与 lt、gt、le、ge、eq、ne 作用相同

<span th:if="${entity.tint lt 5}"   th:text="${'小于 5'}" >123</span>
<span th:if="${entity.tint gt 5}"   th:text="${'大于 5'}" >123</span> <br/>

与 String字符串类型比较时要加 '单引号'

<input th:style="${entity.tsex eq '1'} ? 'color:red;'"  th:value="${entity.tint}" /><br>

<div th:switch="${entity.tsex}">
    <span  th:case="'1'">男</span>
    <span  th:case="'0'">女</span>
</div>

多个判断条件使用 or 或者 and 连接

<span  th:if="${entity.tinfo} eq '' or  ${entity.tinfo} eq null "  th:text="没有说明信息" /> <br/>
<span  th:if="${entity.tinfo} ne '' and  ${entity.tinfo} ne null "  th:text="${entity.tinfo}" /> <br/>

3.4.2.2.unless

th:unless 作用与 th:if 相反 , 相当于在if 的判断前加 not

<input type="text" th:value="${entity.tname}"  th:unless="${entity.tname} eq null"  /> <br/>
<input type="text" th:value="${entity.tname}"  th:if="${ not (entity.tname eq null)}"  /> <br/>

3.4.2.3.循环 each

th:each 用于循环集合 , 是写在重复生成元素标签上

值的写法类似于增强for循环 , 使用 : 分成两个部分 ,

右边使用${} 取集合的值 , 左边通过 , 连接集合元素的别名及循环序号

这个循环序号是个对象, 要调用对应属性得到值, 如本例 : 循环序号起名 i , 序号值 i.count

也可以省略这个循环序号 , 默认以别名 + stat 为它起名, 如本例 : 如果没有定义为 i , 而循环元素别名为 row, 则循环序号默认为 rowStat

 <tr th:each="row,i:${list}" >
<!--        <td th:text="${rowStat.count}">1</td>-->
     <td th:text="${i.count}">1</td>
     <td th:text="${row.tname}">Red Chair</td>
     <td th:text="${row.tsex}">1</td>
     <td th:text="${row.tsex eq '1'?'男':'女'}">1</td>
     <td th:switch="${row.tsex}">
         <span  th:case="'1'">男</span>
         <span  th:case="'0'">女</span>
     </td>
     <td th:text="${#temporals.format(row.ttime,'yyyy-MM-dd HH:mm:ss')}">2014-12-01</td>
     <td th:text="${#dates.format(row.tdate,'yyyy-MM-dd HH:mm:ss')}">2014-12-01</td>
</tr>

3.4.2.4.删除元素

th:remove 删除元素, 要用在有子元素的元素标签上

当值为 all-but-first 表示除了第一个子元素以外的子元素

 <tbody th:remove="all-but-first">

删除可选择值

all : 删除包含标签和所有的孩子
body : 不包含标记删除,但删除其所有的孩子
tag : 包含标记的删除,但不删除它的孩子
all-but-first : 删除所有包含标签的孩子,除了第一个
none : 什么也不做。这个值是有用的动态评估。

3.4.2.5.th:block

创建区域块（内容为空则不创建），之后th:block标签消失

使用table输出内容时，每次输出以两行为一个单位

<table  border="1"  width="500" >
    <th:block th:each="te : ${list}">
        <tr>
            <td th:text="${te.tid}">...</td>
            <td th:text="${te.tname}">...</td>
        </tr>
        <tr>
            <td colspan="2" th:text="${te.tinfo}">...</td>
        </tr>
    </th:block>
</table>

3.5.form表单回显

3.5.1.提供数据

在 index.html页面, 添加超链接请求Controller中的test05方法

index.html

    <a th:href="@{/test05}">test05 form表单</a> <br/>

在 Controller 中添加方法

通过 ModelMap 封装对象, List等数据, 传递到 test 03.html页面

    @RequestMapping("test05")
    public String test05( ModelMap modelMap){
        TestEntity entity = new TestEntity();
        modelMap.put("entity", entity);

        List<TestEntity> list = getTestEntityList();
        modelMap.put("list", list);
        
                // 为复选框赋值
        TestPage tp = new TestPage();
        tp.setArr(new Integer[]{1,3});
        modelMap.put("tp", tp);

        return "test05";
    }


    @RequestMapping("testParam")
    @ResponseBody
    public void testParam(TestEntity entity, Integer[] arr){
        System.out.println("entity = " + entity);
        System.out.println("Arrays.toString(arr) = " + Arrays.toString(arr));
    }

3.5.1.1.增加TestPage

package com.yuan.entity;

import lombok.Data;

@Data
public class TestPage {

    private Integer[] arr ;

}

3.5.2.接收数据

在 templates文件夹下增加test05.html接收数据

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form th:action="@{/testParam}" th:object="${entity}"  method="post"  th:method="post">

    <input type="text"  th:field="*{tid}"    value="tid" /> <br/>
    <input type="text"  th:field="*{tname}"  value="tname" /> <br/>
    <input type="text"  th:field="*{tint}"  value="tint" /> <br/><br/>

    <select     th:field="*{tid}" >
        <option value="">请选择</option>
        <option th:each="t:${list}"  th:value="${t.tid }" th:text="${t.tname}"  >请选择</option>
    </select>
    <br/><br/>
    <input type="text"  th:field="*{tsex}"  value="tsex" /> <br/>
    <input type="radio"  th:field="*{tsex}"   th:value="0"  th:checked="checked"   value="0" />女
    <input type="radio"  th:field="*{tsex}"   th:value="1"  th:checked="checked"   value="1" />男
    <br/><br/>
    <input type="date"   th:value="*{#dates.format(tdate, 'yyyy-MM-dd')}"  value="2014-12-01" /> <br/>
    
    <br/>
        <input type ="checkbox" name="arr"
           th:each ="t:${list}"
           th:value="${t.tid }" th:text="${t.tname}"

           th:attr ="checked=${#arrays.contains(tp.arr, t.tid)?true:false}" >
    <br/>
    <input type="submit" value="提交"/>
</form>
<hr>
<input type="date" name="tdate"  th:value="${#dates.format(entity.tdate, 'yyyy-MM-dd')}"  value="2014-12-01" /><br/>
<input type="text" name="tdou"  th:value="${#numbers.formatDecimal(entity.tdou, 1, 2)}"   /> <br/>
<input type="text" name="tinfo" th:value="${#strings.substring(entity.tinfo,0,5) + '...'}"      value="tinfo" /> <br/>

</body>
</html>

3.5.2.1.th:value

通过为 th:value 赋值实现回显

3.5.2.2.th:field

th:field 在form表单中实现回显

 <input type="text"  th:field="${entity.tname}"  value="tname" /> <br/>

th:field 被解析后, 同时生成 name, id, value 三个属性, 查看源代码得到

  <input type="text"  value="测试标题" id="tname" name="tname" /> <br/>

3.5.2.3.*{}

th:field 与 th:object 配合使用时 , 使用 *{} 进行取值

<form th:action="@{/test05}" th:object="${entity}"  method="post"  th:method="post">

    <input type="text"  th:field="*{tid}"    value="tid" /> <br/>

3.5.2.4.th:attr

th:attr 为指定的属性赋值

本例 : 复选框默认选中使用 checked=true , th:attr 结合内置工具类对象 #arrays进行判断

传来的 tp.arr 集合是否包含当前的 t 的 tid 值

th:attr ="checked=${#arrays.contains(tp.arr, t.tid)?true:false}"

3.6.JS接值

3.6.1.提供数据

在 index.html页面, 添加超链接请求Controller中的test06方法

index.html

 <a th:href="@{/test06}">test06 JS使用</a> <br/>

在 Controller 中添加方法

通过 ModelMap 封装对象, List等数据, 传递到 test 06.html页面

    @RequestMapping("test06")
    public String test06(ModelMap modelMap){
        TestEntity entity = new TestEntity();
        modelMap.put("entity", entity);
        return "test06";
    }

3.6.2.接收数据

在 templates文件夹下增加test06.html接收数据

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button type="button"   th:onclick="fn([[${entity.tname}]], [[${entity.tsex}]])" >点我</button>

<p>Hello, [[${entity.tname}]]!</p>

</body>
<script type="text/javascript"  th:inline="javascript" >
    var name = '[[${entity.tname}]]'
    console.log(name);
    var tint = [[${entity.tint}]]
    console.log(tint);

    function fn(name, sex){
        console.log(name + "->" + sex);
    }

</script>
</html>

3.6.2.1.[[]]接值

[[${}]] 使用这种结构在JS中接收值

在

3.7.定位资源

3.7.1.提供数据

在 index.html页面, 添加超链接请求Controller中的test07方法

index.html

    <a th:href="@{/test07}">test07 导入资源</a> <br/>

在 Controller 中添加方法

通过 ModelMap 封装对象数据, 传递到 test07.html页面

    @RequestMapping("test07")
    public String test07(ModelMap modelMap){
        TestEntity entity = new TestEntity();
        modelMap.put("entity", entity);
        return "test07";
    }

3.7.2.接收数据

在 templates文件夹下增加test07.html接收数据

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/c1.css}"/>
    <script type="text/javascript"  th:src="@{/js/j1.js}" src="js/j1.js"></script>
</head>
<body>

样式测试: <input th:value="${entity.tname}"> <br>

<hr>
<img th:src="@{/img/logo.png}">
<hr>

<a th:href="@{/testParam}">@{/testParam}</a>
两种作用相同
<a href="/testParam">/testParam</a>  <br/>

<a href="result.html" th:href="@{'/testParam?tid=' + ${entity.tid} }" >request Controller url?</a>
两种作用相同
<a href="result.html" th:href="@{/testParam(tid=${entity.tid})}" >request Controller ()</a> <br/>

<a th:href="@{/testParam(tid=3,tname='namestring')}">多参数</a><br/>

<a th:href="@{http://www.baidu.com}" >baidu</a>
两种作用相同
<a href="http://www.baidu.com">baidu</a> <br/>
<hr/>
</body>
</html>

3.7.2.1.@{} 定位符

@{} 导入JS, CSS, image 等资源可以使用@{}

    <link rel="stylesheet" type="text/css" th:href="@{/css/c1.css}"/>
    <script type="text/javascript"  th:src="@{/js/j1.js}" src="js/j1.js"></script>
    <img th:src="@{/img/logo.png}">

@{} 后面的路径与实际文件路径要对应

这些文件通常都放置在 static文件夹中, 因为这些文件通常在项目运行期是不会变化的, 所以都是静态资源

3.7.2.2.请求

在请求时使用@{} 包裹 URL路径与之间写URL路径效果一样

<a th:href="@{/testParam}">@{/testParam}</a>
两种作用相同
<a href="/testParam">/testParam</a>  <br/>

3.7.2.3.请求时传参

可以使用URL?传参, 与可以写在(小括号) 里传参

<a href="result.html" th:href="@{'/testParam?tid=' + ${entity.tid} }" >request Controller url?</a>
两种作用相同
<a href="result.html" th:href="@{/testParam(tid=${entity.tid})}" >request Controller ()</a> <br/>

<a th:href="@{/testParam(tid=3,tname='namestring')}">多参数</a><br/>

3.7.2.4.请求网络资源

要写完整的URL

<a th:href="@{http://www.baidu.com}" >baidu</a>
两种作用相同
<a href="http://www.baidu.com">baidu</a> <br/>

3.8.引入信息

3.8.1.提供数据

在 index.html页面, 添加超链接请求Controller中的test08方法

index.html

    <a th:href="@{/test08}">test08 引入信息</a> <br/>

在 Controller 中添加方法

通过 ModelMap 封装对象数据, 传递到 test07.html页面

    @RequestMapping("test08")
    public String test08(){

        return "test/test08";
    }

3.8.2.接收数据

在 templates文件夹下增加 test/test08.html 接收数据

<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml"    xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <include th:replace="common/header" />
</head>
<body>
    <input value="测试信息">
</body>
<div th:include="/common/footer :: jscode(msg='hello')"></div>
</html>

在 templates文件夹下增加 common/header.html 接收数据

    <style type="text/css">
        input{
            width:200px;
            font-family: 微软雅黑;
            color: red;
            background: yellow;
        }
        button{
            color:blue;
            background: burlywood;
        }
    </style>

在 templates文件夹下增加 common/footer.html 接收数据

<div th:fragment="jscode(msg)">
    <button  th:onclick="sayHello()">按钮</button>

    <script type="text/javascript" th:inline="javascript">
        function sayHello(){
            console.log([[${msg}]])
        }
    </script>
</div>

3.8.2.1.导入信息

th:include 和 th:replace都是加载代码块内容，但是还是有所不同

th:include：加载模板的内容：读取加载节点的内容（不含节点名称），替换div内容
th:replace：替换当前标签为模板中的标签，加载的节点会整个替换掉加载他的div

公共部分如下：

<!-- th:fragment 定义用于加载的块 -->
<span th:fragment="pagination"> 
the public pagination
</span>

引用时如下：

================= th:include 和 th:replace============================
<!-- 加载模板的内容： 读取加载节点的内容（不含节点名称），替换<div>的内容 -->
<div th:include="pagination::pagination">1</div>
<!-- 替换当前标签为模板中的标签： 加载的节点会整个替换掉加载他的<div>  -->
<div th:replace="pagination::pagination">2</div>

结果如下：

<!-- 加载模板的内容： 读取加载节点的内容（不含节点名称），替换<div>的内容 -->
<div> the public pagination</div>
<!-- 替换当前标签为模板中的标签： 加载的节点会整个替换掉加载他的<div>  -->
<span> the public pagination</span>

3.8.2.2.路径与函数

:: 连接 , 左边是路径/文件名 , 右边是 th:fragment 定义的函数

函数参数使用 参数名=参数值 形式赋值

<div th:include="/common/footer :: jscode(msg='hello')"></div>

空标签

th:block

关键字	功能介绍	案例
th:id	替换id
th:text	文本替换	description
th:utext	支持html的文本替换	conten
th:object	替换对象
th:value	属性赋值
th:with	变量赋值运算
th:style	设置样式(不好使)	th:style=“‘display:’ + @{(${sitrue} ? ‘none’ : ‘inline-block’)} + ‘’”
th:onclick	点击事件	th:οnclick=“‘getCollect()’”
th:each	属性赋值	tr th:each=“user,userStat:${users}”
th:if	判断条件
th:unless	和th:if判断相反	<a th:href=“@{/login}” th:unless=${session.user != null}>Login
th:href	链接地址	<a th:href=“@{/login}” th:unless=${session.user != null}>Login
th:switch	多路选择配合th:case 使用
th:case	th:switch的一个分支	User is an administrator
th:fragment	布局标签，定义一个代码片段，方便其它地方引用
th:include	布局标签，替换内容到引入的文件
th:replace	布局标签，替换整个标签到引入的文件
th:selected	selected选择框选中	th:selected=“(${xxx.id} == ${configObj.dd})”
th:src	图片类地址引入
th:inline	定义js脚本可以使用变量

春哥的魔法书

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot ( 六 ) thymeleaf

3.thymeleafthymeleaf : 伴随 SpringBoot 流行开始流行的页面标签3.0.准备3.0.1.Maven导入依赖在pom.xml 文件中增加thymeleaf的依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf&l
复制链接

扫一扫