随笔 - 367  文章 - 0  评论 - 20  阅读 - 63万 

thymeleaf 学习笔记

thymeleaf 学习笔记

什么是 thymeleaf？

在后端渲染html页面方面，有多种模板引擎（JSP的替代物）可以使用(关于后端渲染/页面直出的好处，可以参考一下：Web性能优化之“直出”理论与实践总结。

实际开发或学习中，有多种模板引擎可供选择：
- Thymeleaf
- FreeMarker
- Velocity
- Groovy
- Mustache

总体上，thymeleaf 相较与其他的模板引擎，它有如下三个特点（该总结来源于网上！）：
1. Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。（当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。）
2. Thymeleaf 开箱即用的特性。（它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果。）
3. Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

另外，Thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可，由Daniel Fernández创建，该作者还是Java加密库Jasypt的作者。

thymeleaf 基础知识

  • maven 导包
?
1
2
3
4
5
<dependency>
      <groupId>org.thymeleaf</groupId>
      <artifactId>thymeleaf</artifactId>
      <version>3.0.2.RELEASE</version>
    </dependency>
  •  增加头文件属性
?
1
2
3
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
  •  用th标签动态替换掉静态数据
  1. 后台传出的message会将静态数据“Old Message”替换掉　　
  2. 访问静态页面，则显示数据“Old Message”　　
?
1
<td th:text="${message}">Old Message</td>

 

springMVC 框架整合 thymeleaf

  1. maven 导包
  2. spring-web.xml 配置文件(即spring配置servlet的servlet.xml中)
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--springMVC+thymeleaf的跳转页面配置-->
<bean id="templateResolver"
    class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
    <property name="prefix" value="/WEB-INF/" />
    <property name="suffix" value=".html" />
    <property name="templateMode" value="Html5" />
    <property name="characterEncoding" value="UTF-8"/>
</bean>
<bean id="templateEngine" class="org.thymeleaf.spring3.SpringTemplateEngine">
    <property name="templateResolver" ref="templateResolver" />
</bean>
<bean  id="thymeleafResolver"  class="org.thymeleaf.spring3.view.ThymeleafViewResolver">
    <property name="templateEngine" ref="templateEngine" />
    <property name="characterEncoding" value="UTF-8"/>
</bean>

 

spring boot 框架整合 thymeleaf

将总结于 spring boot 学习之中。

thymeleaf 的 th 标签

一、th 标签的分类
1. 变量表达式 ${……}
如th:value= "${user.name}"：将引用user对象的name值。
2. 文字国际化表达式 #{……}
3. 选择/星号表达式 *{……}
4. URL表达式 @{……}
注意： @{……}支持决定路径和相对路径。其中相对路径又支持跨上下文调用url和协议的引用

二、 常用的th标签
简单数据转换（数字，日期）

?
1
2
3
4
<dt>价格</dt>
<dd th:text="${#numbers.formatDecimal(product.price, 1, 2)}">180</dd>
<dt>日期</dt>
<dd th:text="${#dates.format(product.availableFrom, 'yyyy-MM-dd')}">2017-01-01</dd>

 字符串拼接

?
1
<dd th:text="${'$'+product.price}">235</dd>

 条件判断：不能用”<”，”>”等符号，要用”lt”等替代

?
1
<span th:if="${product.price lt 100}" class="offer">Special offer!</span>

 三、 更多Thymeleaf的页面语法，还请访问Thymeleaf的官方文档查询使用

 

posted on   巨象  阅读(650)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示