thymeleaf的基本使用

Beginner..

已于 2022-08-25 08:59:45 修改

阅读量581

点赞数

分类专栏： javaweb 文章标签： java 前端 spring

于 2022-08-19 16:25:23 首次发布

本文链接：https://blog.csdn.net/zhb111z/article/details/126426943

版权

javaweb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.什么是Thymeleaf ？

Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。它与 JSP，Velocity，FreeMaker 等模板引擎类似，也可以轻易地与 Spring MVC 等 Web 框架集成。与其它模板引擎相比，Thymeleaf 最大的特点是，即使不启动 Web 应用，也可以直接在浏览器中打开并正确显示模板页面。

2. Thymeleaf 简介

Thymeleaf 是新一代 Java 模板引擎，与 Velocity、FreeMarker 等传统 Java 模板引擎不同，Thymeleaf 支持 HTML 原型，其文件后缀为“.html”，因此它可以直接被浏览器打开，此时浏览器会忽略未定义的 Thymeleaf 标签属性，展示 thymeleaf 模板的静态页面效果；当通过 Web 应用程序访问时，Thymeleaf 会动态地替换掉静态内容，使页面动态显示。
官方: 链接: link

Thymeleaf 通过在 html 标签中，增加额外属性来达到“模板+数据”的展示方式，示例代码如下。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--th:text 为 Thymeleaf 属性，用于在展示文本-->
<h1 th:text="迎您来到Thymeleaf">欢迎您访问静态页面 HTML</h1>
</body>
</html>

当直接使用浏览器打开时，浏览器展示结果如下。

欢迎您访问静态页面HTML

当通过 Web 应用程序访问时，浏览器展示结果如下。

迎您来到Thymeleaf

三.整合SpringBoot

引入Starter

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

自动配置好了thymeleaf

@Configuration(proxyBeanMethods = false)
@EnableConfigurationProperties(ThymeleafProperties.class)
@ConditionalOnClass({ TemplateMode.class, SpringTemplateEngine.class })
@AutoConfigureAfter({ WebMvcAutoConfiguration.class, WebFluxAutoConfiguration.class })
public class ThymeleafAutoConfiguration {
    ...
}

自动配好的策略

所有thymeleaf的配置值都在 ThymeleafProperties
配置好了 SpringTemplateEngine
配好了 ThymeleafViewResolver
我们只需要直接开发页面

public static final String DEFAULT_PREFIX = "classpath:/templates/";//模板放置处
public static final String DEFAULT_SUFFIX = ".html";//文件的后缀名

编写一个控制层：

public class ViewTestController {
    @GetMapping("/hello")
    public String hello(Model model){
        //model中的数据会被放在请求域中 request.setAttribute("a",aa)
        model.addAttribute("msg","一定要大力发展工业文化");
        model.addAttribute("link","http://www.baidu.com");
        return "success";
    }
}

/templates/success.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 th:text="${msg}">nice</h1>
<h2>
    <a href="www.baidu.com" th:href="${link}">去百度</a>  <br/>
    <a href="www.google.com" th:href="@{/link}">去百度</a>
</h2>
</body>
</html>

server:
  servlet:
    context-path: /app #设置应用名

这个设置后，URL要插入`/app`,  如`http://localhost:8080/app/hello.html`。

四.基本语法

在使用 Thymeleaf 之前，首先要在页面的 html 标签中声明名称空间，示例代码如下。

表达式

Thymeleaf 模板引擎支持多种表达式：

变量表达式：${…}
选择变量表达式：*{…}
链接表达式：@{…}
国际化表达式：#{…}
片段引用表达式：~{…}

字面量

文本值: ‘one text’ , ‘Another one!’ ,…
数字: 0 , 34 , 3.0 , 12.3 ,…
布尔值: true , false
空值: null
变量： one，two，… 变量不能有空格

文本操作

字符串拼接: +
变量替换: |The name is ${name}|

数学运算

运算符: + , - , * , / , %

布尔运算

运算符: and , or
一元运算: ! , not

比较运算

比较: > , < , >= , <= ( gt , lt , ge , le )
等式: == , != ( eq , ne )

条件运算

If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
Default: (value) ?: (defaultvalue)

特殊操作

无操作： _

设置属性值-th:attr

设置单个值

 <form action="subscribe.html" th:attr="action=@{/subscribe}">  <fieldset>    
<input type="text" name="email" />    
<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>  
</fieldset></form>

设置多个值

<img src="../../images/gtvglogo.png"  
     th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />
     ```
迭代
```xml
xxxxxxxxxx <tr th:each="prod : ${prods}">   
 <td th:text="${prod.name}">Onions</td>    
<td th:text="${prod.price}">2.41</td>    
<td th:text="${prod.inStock}? #{true} : #{false}">yes</td></tr>

xxxxxxxxxx <tr th:each="prod : ${prods}">    
<td th:text="${prod.name}">Onions</td>    
<td th:text="${prod.price}">2.41</td>    
<td th:text="${prod.inStock}? #{true} : #{false}">yes</td></tr>

属性优先级

Order	Feature	Attributes
1	Fragment inclusion	`th:insert` `th:replace`
2	Fragment iteration	`th:each`
3	Conditional evaluation	`th:if` `th:unless` `th:switch` `th:case`
4	Local variable definition	`th:object` `th:with`
5	General attribute modification	`th:attr` `th:attrprepend` `th:attrappend`
6	Specific attribute modification	`th:value` `th:href` `th:src` `...`
7	Text (tag body modification)	`th:text` `th:utext`
8	Fragment specification	`th:fragment`
9	Fragment removal	`th:remove`

[官方文档 - 10 Attribute Precedence](

Beginner..

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
thymeleaf的基本使用

Thymeleaf 是新一代 Java 模板引擎，与 Velocity、FreeMarker 等传统 Java 模板引擎不同，Thymeleaf 支持 HTML 原型，其文件后缀为“.html”，因此它可以直接被浏览器打开，此时浏览器会忽略未定义的 Thymeleaf 标签属性，展示 thymeleaf 模板的静态页面效果；当通过 Web 应用程序访问时，Thymeleaf 会动态地替换掉静态内容，使页面动态显示。官方: 链接:link。
复制链接

扫一扫