自学SpringBoot五之Thymeleaf模板

最新推荐文章于 2024-11-06 10:24:17 发布

Ai_Ying_Java

最新推荐文章于 2024-11-06 10:24:17 发布

阅读量329

点赞数

分类专栏： springboot 文章标签： springboot模板 Thymeleaf

本文链接：https://blog.youkuaiyun.com/Ai_Ting_Java/article/details/83245822

版权

springboot 专栏收录该内容

8 篇文章

订阅专栏

一，什么是Thymeleaf？

Thymeleaf是Java的一个模板引擎，能够处理html,xml,JavaScript,css甚至纯文本。类似于jsp,Freemarker。
Thymeleaf是一种自然模板，原型即页面。
Thymeleaf语法优雅易懂，支持OGNL、SpringEL表达式。可以用于存储对象的属性，调用对象的方法。
Thymeleaf遵从Web标准，支持html5。
Thymeleaf的官网：https://www.thymeleaf.org/
中文文档下载地址：https://download.youkuaiyun.com/download/ai_ting_java/10732544

二、Thymeleaf的引入

1.需要在html引用的命名空间

<html xmlns:th="http://www.thymeleaf.org">

2.在maven项目中的pom文件的依赖

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

三、Thymeleaf的简单使用

首先Thymeleaf的内置的视图解析器是将html的文件默认放在classpath:/templates/*下的，并添加尾缀--html。

controller的代码：

package com.yangli.springboot.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: admin
 * Date: 2018-10-21
 * Time: 22:25
 */
@Controller
public class ThymeleafController {

    @RequestMapping("/getsucess")
    public String getSucess(){
        //classpath:/templates/sucess.html
        return "sucess";
    }
}

简单的sucess.html页面:

<!DOCTYPE html>
<!--引入命名空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>getScuess</h1>
    姓名：<span th:text="${name}">此处显示姓名</span>
</body>
</html>

页面效果：

四、Thymeleaf的规则和语法

1.<p th:text="...">XXX</p>: th:text="..."是改变标签的文本内容或者属性的。

注：th:语法格式可以替换任意的html原生属性的值；eg：

controller的部分代码：

html的代码：

按下浏览器的F12可以查看到<span>标签的id和class值到底是什么：

很明显在<span>标签中我们最开始定义的值都被th:id="${id}" th:class="${class}"替换掉了。

简单表达式语法：

变量表达式：$ {...}：实际上是在上下⽂中包含的变量的映射上执⾏的OGNL表达式对象。OGNL表达式具有强大的功能，以后会专门写一篇关于OGNL表达式的文章。
选择变量表达式：* {...}：我们不仅可以将变量表达式写为$ {...}，还可以作为* {...}。这两种⽅式有⼀个重要的区别：星号语法计算所选对象⽽不是整个上下⽂的表达式。也就是说，只要没有选定的对象，$和*语法就会完全相同。
什么是选定对象？常配合使⽤th：object属性的表达式的结果，即此时的*号就代表这个object对象。如下例所示：

<div th:object="${session.user}">
  //此时下面的<p>标签中th:text的取值就是直接从session.user对象中取出来的，*号就表示usr对象
 <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>    
 <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>    
 <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>  
</div>

以上的代码完全等同于：

<div>
    <p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p>
    <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
    <p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
</div>

消息表达式：＃{...}：获取国际化内容
链接⽹址表达式：@ {...}：定义URL；

<!-- 以前的写法 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) -->
<!-- 绝对URL路径 使用Thymeleaf时的写法以及传参的形式(orderId=${o.id})-->
<a href="details.html"
th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a>
<!-- 以前的写法 '/gtvg/order/details?orderId=3' (plus re4.4 URL链接59writing) -->
<!-- 当前项目下的相对URL路径 使用Thymeleaf时的写法以及传参的形式(orderId=${o.id})-->
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>
<!-- 以前的写法和传参 '/gtvg/order/3/details' (plus rewriting)-->
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

注意：
th:href是⼀个修饰符属性：⼀旦处理，它将计算要使⽤的链接URL，并将该值设置为<a>标签的href属性。我们被允许使⽤表达式的URL参数（可以在orderId = $ {o.id}中看到）。所需的URL参数编码操作也将⾃动执⾏。如果需要⼏个参数，这些参数将以逗号分隔：@ {/ order /process（execId = $ {execId}，execType ='FAST'）}。

URL路径中也允许使⽤变量模板：@ {/ order /{orderId} /details（orderId = $ {orderId}）}。以/开头的相对URL（例如：/ order / details）将⾃动以应⽤程序上下⽂名称为前缀。如果cookie未启⽤或尚未知道，则可能会在相对URL中添加“;jsessionid = ...”后缀，以便会话被保留。这被称为URL重写，Thymeleaf允许您使⽤Servlet API中的每个URL的response.encodeURL（...）机制来插⼊⾃⼰的重写过滤器。th：href属性允许我们（可选地）在我们的模板中有⼀个⼯作的静态href属性，这样当我们直接打开原型设计时，我们的模板链接可以被浏览器导航。与消息语法（＃{...}）的情况⼀样，URL基数也可以是计算另⼀个表达式的结果：

<a th:href="@{${url}(orderId=${o.id})}">view</a>

⽚段表达式：〜{...}：片段引用表达式；代码⽚段表达式是表示标记⽚段的简单⽅法，并将其移动到模板周围。这允许我们复制它们，将它们传递给其他模板作为参数，等等。最常⻅的⽤法是使⽤th:insert或th:replace进⾏⽚段插⼊。

<div th:insert="~{commons :: main}">...</div>
<!-- 它们可以在任何地⽅使⽤，就像任何其他变量⼀样 -->
<div th:with="frag=~{footer :: #main/text()}">
<p th:insert="${frag}">
</div>