thymeleaf模板语法

小白学习日记

已于 2022-01-22 18:36:18 修改

阅读量547

点赞数 1

文章标签： java intellij-idea spring boot

于 2022-01-17 13:55:57 首次发布

本文链接：https://blog.csdn.net/m0_46533814/article/details/122538245

版权

文章目录

- 五、thymeleaf

五、thymeleaf

thymeleaf（狂神)

thymeleaf在线文档

1.导入场景

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

2.html文件引入约束

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

3.测试

```java
@Controller
public class TestController {
    @RequestMapping("/hello")
    public String say(Model model){
        model.addAttribute("msg","hello thymeleaf");
        return "test";
    }
}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
<div th:text="${msg}"></div>
</body>
</html>

测试结果
在这里插入图片描述

2.语法

语法官方在线文档

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Exp2zezm-1642398450415)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20220117121856489.png)]$

转义：

@RequestMapping("/hello")
public String say(Model model){
    model.addAttribute("msg","<h3>hello thymeleaf</h3>");
    return "test";
}

<div th:text="${msg}"></div>
<div th:utext="${msg}"></div>

测试结果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B8DHd3Gu-1642398450416)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20220117123415455.png)]$

数组遍历

官方文档写法：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AOucHZQ5-1642398450416)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20220117124335678.png)]$

类似于foreach写法

//model.addAttribute("users", Arrays.asList("张三","李四","王五"));
//从items数组中取出的每个元素为item，然后在需要显示是数据的地方用th:text遍历出item
//语法，不一定是表格，这里只是用表格做个演示
<tr th:each="item : ${items}">
	<td th:text="${item}"></td>
</tr>
//实例
<table>
    <tr th:each="user : ${users}">
        <td th:text="${user}"></td>
    </tr>
</table>
<div th:each="user : ${users}">
    <ul>[[${user}]]</ul>//也可以以[[${item}]]这种方式取值
</div>

测试结果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4hfnphID-1642398450416)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20220117125105479.png)]$

thymeleaf(雷神)

因为SpringBoot不支持jsp，所以需要导入其他模板引擎来渲染视图

thymeleaf使用

1.引入starter

2.SpringBoot自动配置好了thymeleaf，上面说过了自动配置原理

xxxxAutoConfiguration----->(按需)组件----->xxxxProperties里面取值----(绑定)–>application.properties

@Configuration(
    proxyBeanMethods = false
)
@EnableConfigurationProperties({ThymeleafProperties.class})
//条件配置，在容器中有TemplateMode和SpringTemplateEngine才会执行自动配置
@ConditionalOnClass({TemplateMode.class, SpringTemplateEngine.class})
//这个注解说明是在项目是一个web的项目，WebMvc和WebFlux自动配置之后才会执行类中代码
@AutoConfigureAfter({WebMvcAutoConfiguration.class, WebFluxAutoConfiguration.class})
public class ThymeleafAutoConfiguration {}

@ConfigurationProperties(
    prefix = "spring.thymeleaf" //application.properties中通过这个前缀可以设置thymeleaf的一些属性值
)
public class ThymeleafProperties {
    public static final String DEFAULT_PREFIX = "classpath:/templates/";//前缀
    public static final String DEFAULT_SUFFIX = ".html";//后缀
    ......
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RkgXQ6gK-1642398450417)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20220117132327417.png)]$

1.表达式

表达式名字	语法	用途
变量取值	${…}	获取请求域、session域、对象等
选择变量	*{…}	获取上下文对象值
消息	#{…}	获取国际化等值
链接	@{…}	生成链接
片段表达式	~{…}	jsp:include作用，引入公共页面

2.字面量

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dDroISfy-1642398450417)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20220117130540450.png)]$

3.文本操作

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HBZDh0WT-1642398450417)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20220117130625223.png)]$

4.数学运算

运算符：+，-，*，/，%

5.布尔运算

运算符（与或非）：and/or/(!/not)

6.比较运算

比较：>,<,>=,<=(gt, lt, ge, le)

等式：==,!= (eq, ne)

7.条件运算

if-then:(if) ? (then)

if-then-else:(if) ? (then) : (else)

default: (value) ?: (defaultvalue)

测试：

@Controller
public class Test2Controller {
    @GetMapping("/test")
    public String test(Model model){
        model.addAttribute("link","http://www.baidu.com");
        return "test2";
    }
}

<a th:href="${link}">点击前往百度</a>

测试结果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8bO1cgoZ-1642398450417)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20220117133837660.png)]$

再看thymeleaf

<nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="sidebar">
//th:fragment相当于提取了这个标签里所有内容：公共部分
//这里我在common包下的common.html定义了sidebar(侧边栏这个公共页面)，接下来在list.html中复用，使用th:replace="~{从哪个地方引入(这里肯定是common)::引入的哪段代码(sidebar)}"
 <div th:replace="~{common/common ::sidebar}"></div>
 //~{…}这个是片段表达式，上面有提到过，类似于jsp中的<jsp:include...>
//在需要引入这部分代码时使用th:replace/th:insert都可以，用处嘛提取导航栏和侧边栏或者footer之类大部分页面都会用到的代码

在这里插入图片描述

另一些使用：

th:href="@{/toAddEmpPage}"
因为th可以绑定html中所有的元素，动态的取值，@{...}就是专门处理链接之类的表达式。
thymeleaf中还提供了一些api，
处理时间的：#dates
${#dates.format(date)}
${#dates.arrayFormat(datesArray)}等等
处理字符串:#strings
${#strings.isEmpty(name)}
${#strings.contains(name,'ez')} 等等
数组：#arrays
${#arrays.toStringArray(object)}
${#arrays.toIntegerArray(object)}
...还有很多类似的api
大家可以自行查看文档：19附录那块

ps:按观看顺序排的，两个视频都说过的知识都写在一起，整理了雷神、狂神讲述的thymeleaf视频，后面再有遇到thymeleaf的知识，会继续更新这篇博客