【JavaWeb】-- thymeleaf视图模板技术

Thymeleaf是一个用于服务器端渲染的模板引擎,它可以与SpringBoot完美集成,提供HTML、XML、JavaScript、CSS等模板支持。Thymeleaf允许在HTML中使用th属性来动态替换内容,如th:text、th:utext、th:with等,实现视图和数据的结合。此外,它支持条件判断(th:if、th:unless)、迭代(th:each)、开关(th:switch)等功能,简化了前端开发。Thymeleaf通过设置模板解析器和模板引擎,可以方便地在Web应用程序中处理模板数据。

什么是thymeleaf?

在html页面上加载java内存数据,这个过程称为渲染,thymeleaf是用来帮助我们做视图渲染的一个技术,当通过 Web 应用程序访问时,Thymeleaf 会动态地替换掉静态内容,使页面动态显示。

thymeleaf特点

  • 动静结合:Thymeleaf 既可以直接使用浏览器打开,查看页面的静态效果,也可以通过 Web 应用程序进行访问,查看动态页面效果。
  • 开箱即用:Thymeleaf 提供了 Spring 标准方言以及一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。
  • 多方言支持:它提供了 Thymeleaf 标准和 Spring 标准两种方言,可以直接套用模板实现 JSTL、 OGNL 表达式;必要时,开发人员也可以扩展和创建自定义的方言。
  • 与 SpringBoot 完美整合:SpringBoot 为 Thymeleaf 提供了的默认配置,并且还为 Thymeleaf 设置了视图解析器,因此 Thymeleaf 可以与 Spring Boot 完美整合。

th属性

Thymeleaf 还提供了大量的 th 属性,这些属性可以直接在 HTML 标签中使用,其中常用 th 属性及其示例如下表。

属性 描述 示例
th:id 替换 HTML 的 id 属性
 
    
  • <input id="html-id" th:id="thymeleaf-id" />
th:text 文本替换,转义特殊字符
 
    
  • <h1 th:text="hello,bianchengbang" >hello</h1>
th:utext 文本替换,不转义特殊字符
 
    
  • <div th:utext="'<h1>欢迎来到编程帮!</h1>'" >欢迎你</div>
th:object 在父标签选择对象,子标签使用 *{…} 选择表达式选取值。
没有选择对象,那子标签使用选择表达式和 ${…} 变量表达式是一样的效果。
同时即使选择了对象,子标签仍然可以使用变量表达式。
 
    
  • <div th:object="${session.user}" >
  • <p th:text="*{fisrtName}">firstname</p>
  • </div>
th:value 替换 value 属性
 
    
  • <input th:value = "${user.name}" />
th:with 局部变量赋值运算
 
    
  • <div th:with="isEvens = ${prodStat.count}%2 == 0" th:text="${isEvens}"></div>
th:style 设置样式
 
    
  • <div th:style="'color:#F00; font-weight:bold'">编程帮 www.biancheng.net</div>
th:onclick 点击事件
 
    
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

四月天行健

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值