【Thymeleaf入门】01、标准表达式、判断与循环、模板布局

最新推荐文章于 2023-05-11 22:42:49 发布

MSC419

最新推荐文章于 2023-05-11 22:42:49 发布

阅读量616

点赞数

分类专栏： Spring全家桶文章标签：前端

本文链接：https://blog.csdn.net/qq_38939822/article/details/121440965

版权

Spring全家桶专栏收录该内容

18 篇文章 2 订阅

订阅专栏

Thymeleaf作用：生成动态的HTML
在这里插入图片描述
模板文件包含了HTML静态页面和一些表达式，这些表达式可以被model中的数据替换，model传进去不同的数据，HTML就可以动态变化
官网：https://www.thymeleaf.org/
文档：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#what-kind-of-templates-can-thymeleaf-process
语法文档上都有，常用语法：标准表达式（对应文档小标题4）、判断与循环（6、7）、模板布局（8）

1 标准表达式

目前用到的有：
网址链接表达式：@{}
变量：${}
组合：|文本${}|

举例：

1.1 `@{}`

html里经常有很多链接，就用@{}包裹
在这里插入图片描述

1.2 `${}`

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>邮件</title>
</head>
<body>
    <p>欢迎你，<span th:text="${username}">xxx</span>！</p>
</body>
</html>

username是个变量，它是什么值，动态模板就拼成什么值
在这里插入图片描述

1.3 `|文本${}|`

有时候需要变量和文字拼在一起，就用||

<a class="page-link" th:href="@{|${page.path}?current=1|}">首页</a>

2 判断与循环

2.1 循环

比方说页面分页，下面这几个数字是循环展示的，只用写一个就好
在这里插入图片描述

<li th:class="|page-item ${i==page.current?'active':''}|" th:each="i:${#numbers.sequence(page.startPage,page.endPage)}">
	<a class="page-link" th:href="@{${page.path}(current=${i})}" th:text="${i}">1</a>
</li>

2.2 判断

还是用分页举例，如果是第一页，”上一页“就点不动

<li th:class="|page-item ${page.current==1?'disabled':''}|">

3 模板布局

实际开发工程中，把一个页面的头部和尾部开发好了，往往会有多个页面复用这些部分，还有比如分页这样的组件也会被复用，Thymeleaf可以实现这样的复用

比方说：register.html头部要复用index里的头部
index.html
在这里插入图片描述
register.html

MSC419

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Thymeleaf入门】01、标准表达式、判断与循环、模板布局

Thymeleaf作用：生成动态的HTML模板文件包含了HTML静态页面和一些表达式，这些表达式可以被model中的数据替换，model传进去不同的数据，HTML就可以动态变化官网：https://www.thymeleaf.org/文档：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#what-kind-of-templates-can-thymeleaf-process语法文档上都有，常用语法：标准表达式（对应文档
复制链接

扫一扫