Thymeleaf的具体使用

  • 一、介绍
  • 1.1 和Vue、React、Angular等异同。
  • 二、使用
  • 2.1 常用的方法
  • 2.1.1 th:block
  • 2.1.2 th:replace
  • 2.1.3 th中标准表达式
  • 2.1.4 th:text
  • 2.1.5 th:each
  • 2.1.6 th:href
  • 2.1.7 th:src
  • 2.1.8 th:value
  • 2.2 使用的技巧
  • 2.2.1 三元表达式
  • 三、参考
  • 3.1 blog
  • 3.2 文档


一、介绍

thymeleaf是一个模板渲染的引擎，类似于Django中的jinja2的模板渲染功能，支持模板的渲染，可以在springboot中作为前端的模板引擎，将后端的数据进行渲染。

1.1 和Vue、React、Angular等异同。

  • 相同：
    在语法上thymeleaf的语法和vue的语法有点类似。同时都是前端展示的文本。
    在功能上thymeleaf是那个JSP的升级品，开发模式和JSP类似。
  • 不同
    vue等这些用于前后端分离的开发也是目前最为主流的开发模式，耦合度较低，而且开发效率比thymeleaf高。
    而thymeleaf则是需要通过数据渲染来完成，耦合度很高。thymeleaf可以直接打开，本质上还是一个超文本文件。而JSP则不能使用HTML文件打开，只能通过JSP的方法去解析，同时可以编写java代码。

二、使用

2.1 常用的方法

2.1.1 th:block

用于隔离代码块，配合replace进行代码替换。
待引入的部分代码

<th:block th:fragment="header">
    <header th:fragment="head" class="main-header">
	···
</th:block>

2.1.2 th:replace

可以用于替换代码块，比如在导航栏和侧栏可以替换成相同的代码块，以次来实现代码的复用。
引入的代码

<header th:replace="header :: head"  ></header>
   <div th:replace="asider :: sider"  ></div>

2.1.3 th中标准表达式

thymeleaf中的组织方法包括下面的几个，这几个方法可以帮助我们实现从thymeleaf中取值。

thymeleaf取值

Value

${…}

变量表达式。

*{…}

选择表达式。

#{…}

消息 (i18n) 表达式。

@{…}

链接 (URL) 表达式

。~{…}

片段表达式。

2.1.4 th:text

用于值的嵌入，这样就可以将文本嵌入到界面中

<td th:text="${score.courseId}">Misc</td>

2.1.5 th:each

用于循环，其中第一个值是循环的参数，第二个值是循环的对象，由后端提供。

<tr th:each="score:${score_list}">

2.1.6 th:href

作为资源链接，引入相应的资源如CSS等资源。

<link rel="stylesheet" href="../../static/plugins/morris/morris.css" th:href="@{/plugins/morris/morris.css}">

2.1.7 th:src

作为资源链接，引入js或者图片等资源。

<script src="../../static/plugins/jQuery/jquery-2.2.3.min.js" th:src="@{/plugins/jQuery/jquery-2.2.3.min.js}"></script>

2.1.8 th:value

给标签附上value的值

<a th:href="@{/student/score(vlaue=${session.user.account})}" id="requestScore" th:value="${session.user.account}">

2.2 使用的技巧

2.2.1 三元表达式

在使用的过程中我们经常会使用三元表达式来进行判断，以此实现多态。

<img th:src="${counselor.photoUrl == null || counselor.photoUrl == '' ? 'https://i.niupic.com/images/2020/07/30/8tmr.png' : counselor.photoUrl}" alt="个人照片" id="img">