欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  Thymeleaf[ta?m lif],百里香叶,是一个流行的模板引擎,该模板引擎采用 Java 语言开发。Java 中常见的模板引擎有 Velocity、Freemaker、Thymeleaf 等。不同的模板引擎都会具有自己的特定的标签体系,而 Thymeleaf 以 HTML 标签为载体,在 HTML 的标签下实现对数据的展示。
 
  Thymeleaf 本身与 SpringBoot 是没有关系的,但 SpringBoot 官方推荐使用 Thymeleaf 作为前端页面的数据展示技术,SpringBoot 很好地集成了这种模板技术。
 
  Thymeleaf 的官网为:
 
  2.1 创建工程
 
  创建一个 Spring Boot 工程,命名为 thymeleaf,并在创建工程时导入如下依赖。
 
  2.2 定义配置文件
 
  2.3 定义处理器
 
  2.4 定义 index.html 页面
 
  在  目录下定义 index.html 页面。
 
  在页面的<html>标签中需要添加 Thymeleaf 的命名空间属性:
 
  效果():
 
  常用的 Thymeleaf 标准表达式有三种。标准表达式都是,只不过获取方式不同而已。
 
  以下举例均在前面的 thymeleaf 工程基础上直接修改,无需再创建新的 Module。
 
  使用${…}括起来的表达式,称为变量表达式。该表达式的内容会显示在 HTML 标签体文本处。
 
  该表达式一般都是通过 th:text 标签属性进行展示的。
 
  (1) 修改处理器类
 
  (2) 创建 VO 类
 
  (3) 修改 index 页面
 
  直接在页面中添加如下内容:
 
  (4) 测试效果
 
  选择表达式,也称为星号表达式,其是使用*{…}括起来的表达式。一般用于展示对象的属性。该表达式的内容会显示在HTML标签体文本处。但其,先使用 th:object 标签选择了对象,再使用*{…}选择要展示的对象属性。该表达式可以有效降低页面中代码的冗余。
 
  不过,。该表达式一般都是通过 th:text 标签属性进行展示的。
 
  ( 1) 修改 index 页面
 
  直接在页面中添加如下内容:
 
  (2) 测试效果
 
  使用@{…}括起来,并且其中只能写一个绝对 URL 或相对 URL 地址的表达式,称为 URL表达式。这个绝对/相对 URL 地址中一般是包含有动态参数的,需要结合变量表达式${…}进行字符串拼接。
 
  @{…}中的 URL 地址具有三种写法。为了演示这三种写法的区别,先为当前工程添加一个上下文路径,然后直接在 index.html 文件中修改。
 
  (1) 以 http 协议开头的绝对地址
 
  在进行字符串拼接时使用加号(+)连接,容易出错。但使用双竖线则无需字符串拼接,简单易读。但是,Idea 会对其中的问号(?)报错,不过其不影响运行。
 
  在页面通过查看源码可以看到其解析结果。当然,对于 and 符(&)Thymeleaf 会将其解析为实体形式(&),但浏览器会对(&)进行正确解析。
 
  (2) 以/开头的相对地址
 
  在 URL 表达式中,Thymeleaf 会将开头的斜杠(/)解析为当前工程的上下文路径ContextPath,而浏览器会自动为其添加“http://主机名:端口号”,即其即为一个绝对路径。
 
  在页面通过查看源码可以看到其解析结果中已经添加了上下文路径。
 
  而在页面则可以看到浏览器对其解析的结果已经添加了
 
  (3) 不以/开头的相对地址
 
  在页面通过查看源码可以看到其解析结果中是未添加任何东西的,即没有上下文路径。也就是说,其是相对于当前请求路径的一个相对地址。
 
  而在页面则可以看到浏览器对其解析的结果已经添加了 这是相对于当前请求路径的的一个相对地址的转换结果。
 
  (1) th:if
 
  该属性用于逻辑判断,类似于 JSTL 中的<c:if/>。
 
  A、修改处理器
 
  在处理器中添加如下语句。
 
  B、 修改 index 页面
 
  在 index.html 文件中添加如下语句。
 
  C、 效果
 
  (2) th:switch/th:case
 
  该属性用于多分支判断,类似于 Java 中的 Swith-Case 语句。
 
  A、修改处理器
 
  在处理器中添加如下语句。
 
  B、 修改 index 页面
 
  在 index.html 文件中添加如下语句。
 
  一旦某个 case 与 switch 的值相匹配了,剩余的 case 则不再比较。th:case=”*”表示默认的 case,前面的 case 都不匹配时候执行该 case。
 
  (3) th:each
 
  该属性用于遍历数组、List、Set、Map,类似于 JSTL 中的<c:forEach/>。
 
  A、遍历 List
 
  遍历数组、Set 与遍历 List 方式是相同的。
 
  a、 修改处理器
 
  在 Controller 中添加如下代码。
 
  b、修改 index 页面
 
  前面的 stu 为当前遍历对象,而${students}为遍历的集合。
 
  c、 效果
 
  B、 遍历状态对象
 
  a、修改 index 页面
 
  b、 效果

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h60978.shtml