Spring Boot(四):Thymeleaf 使用详解(下)

简介: 在上篇文章Spring Boot (二):Web 综合开发中简单介绍了一下 Thymeleaf,这篇文章将更加全面详细的介绍 Thymeleaf 的使用。Thymeleaf 是新一代的模板引擎,在 Spring4.0 中推荐使用 Thymeleaf 来做前端模版引擎。

几种常用的使用方法

1、赋值、字符串拼接

65.png

字符串拼接还有另外一种简洁的写法

66.png

2、条件判断 If/Unless

Thymeleaf中使用th:if和th:unless属性进行条件判断,下面的例子中, <a>标签只有在 th:if中条件成立时才显示:


67.png

th:unlessth:if 恰好相反,只有表达式中的条件不成立,才会显示其内容。

也可以使用 (if)?(then):(else)这种语法来判断显示的内容

3、for 循环

68.png

iterStat称作状态变量,属性有:

  • index:当前迭代对象的 index(从0开始计算)
  • count: 当前迭代对象的 index(从1开始计算)
  • size:被迭代对象的大小
  • current:当前迭代变量
  • even/odd:布尔值,当前循环是否是偶数/奇数(从0开始计算)
  • first:布尔值,当前循环是否是第一个
  • last:布尔值,当前循环是否是最后一个

4、URL

URL 在 Web 应用模板中占据着十分重要的地位,需要特别注意的是 Thymeleaf 对于 URL 的处理是通过语法 @{...} 来处理的。 如果需要 Thymeleaf 对 URL 进行渲染,那么务必使用 th:hrefth:src 等属性,下面是一个例子

69.png

设置背景

70.png

根据属性值改变背景

71.png几点说明:

  • 上例中 URL 最后的 (orderId=${o.id})表示将括号内的内容作为 URL 参数处理,该语法避免使用字符串拼接,大大提高了可读性
  • @{...}表达式中可以通过 {orderId}访问 Context 中的 orderId 变量
  • @{/order}是 Context 相关的相对路径,在渲染时会自动添加上当前 Web 应用的 Context 名字,假设 context 名字为 app,那么结果应该是 /app/order

5、内联 js

内联文本:[[...]] 内联文本的表示方式,使用时,必须先用 th:inline="text/javascript/none"激活, th:inline可以在父级标签内使用,甚至作为 body 的标签。内联文本尽管比 th:text的代码少,不利于原型显示。


72.png

js 附加代码:

73.png


js 移除代码:74.png


6、内嵌变量

为了模板更加易用,Thymeleaf 还提供了一系列 Utility 对象(内置于 Context 中),可以通过 # 直接访问:

  • dates : java.util.Date的功能方法类。
  • calendars : 类似#dates,面向java.util.Calendar
  • numbers : 格式化数字的功能方法类
  • strings : 字符串对象的功能类,contains,startWiths,prepending/appending等等。
  • objects: 对objects的功能类操作。
  • bools: 对布尔值求值的功能方法。
  • arrays:对数组的功能类方法。
  • lists: 对lists功能类方法
  • sets
  • maps
    ...

下面用一段代码来举例一些常用的方法:

dates75.png

strings

76.png

使用 Thymeleaf 布局

Spring Boot 2.0 将布局单独提取了出来,需要单独引入依赖:thymeleaf-layout-dialect。

77.png

定义代码片段

78.png

在页面任何地方引入:79.png

th:insert 和 th:replace 区别,insert 只是加载,replace 是替换。Thymeleaf 3.0 推荐使用 th:insert 替换 2.0 的 th:replace。

返回的 HTML 如下:

80.png下面是一个常用的后台页面布局,将整个页面分为头部,尾部、菜单栏、隐藏栏,点击菜单只改变 content 区域的页面

81.png

任何页面想使用这样的布局值只需要替换中见的 content 模块即可

82.png

也可以在引用模版的时候传参

83.png

layout 是文件地址,如果有文件夹可以这样写 fileName/layout:htmlhead,htmlhead 是指定义的代码片段 如 th:fragment="copy"

文章示例项目

示例代码-https://github.com/ityouknow/spring-boot-examples/tree/master/spring-boot-thymeleaf

相关文章
|
2月前
|
Java 应用服务中间件 Maven
SpringBoot 项目瘦身指南
SpringBoot 项目瘦身指南
46 0
|
4月前
|
前端开发 Java 开发者
Spring Boot 3 集成 Thymeleaf
Thymeleaf是一款用于Web和独立环境的现代化服务器端Java模板引擎。它能够处理HTML、XML、JavaScript、CSS甚至纯文本。Thymeleaf的语法简单易懂,它允许开发者在模板中嵌入表达式,以便动态地渲染数据。
77 1
Spring Boot 3 集成 Thymeleaf
|
13天前
|
安全 Java 应用服务中间件
江帅帅:Spring Boot 底层级探索系列 03 - 简单配置
江帅帅:Spring Boot 底层级探索系列 03 - 简单配置
28 0
江帅帅:Spring Boot 底层级探索系列 03 - 简单配置
|
15天前
|
XML Java C++
【Spring系列】Sping VS Sping Boot区别与联系
【4月更文挑战第2天】Spring系列第一课:Spring Boot 能力介绍及简单实践
【Spring系列】Sping VS Sping Boot区别与联系
|
23天前
|
SQL 前端开发 JavaScript
Spring Boot + Thymeleaf 使用PageHelper实现分页
Spring Boot + Thymeleaf 使用PageHelper实现分页
|
3月前
|
XML 监控 druid
【Java专题_02】springboot+mybatis+pagehelper分页插件+druid数据源详细教程
【Java专题_02】springboot+mybatis+pagehelper分页插件+druid数据源详细教程
|
3月前
|
前端开发 JavaScript Java
防止spring把静态资源识别thymeleaf模板
防止spring把静态资源识别thymeleaf模板
12 0
|
4月前
|
开发框架 Java .NET
SpringBoot3中的属性绑定注解和YMAL配置文件、日志
SpringBoot3中的属性绑定注解和YMAL配置文件、日志
|
4月前
|
安全 前端开发 Java
Spring Boot+Mybatis+Thymeleaf实现宠物医院管理系统
Spring Boot+Mybatis+Thymeleaf实现宠物医院管理系统
|
4月前
|
Java
springboot项目打包瘦身
springboot项目打包瘦身