一、thymeleaf模板引擎的使用
在web项目开发中,我们最早接触、同时也是最熟悉的前端页面就是JSP了。Jsp作为动态页面不可缺少的技术,在B/S 架构中长时间占有不可或缺的地位。然而后期出现了一些JSP技术开发伊始未曾想过的问题。那就是耦合度过高,业务逻辑和页面展示同时出现在前端页面在带来开发便利的同时,也造成了每次有需要改动的地方都会造成前端页面的修改,这违反了六原则一法则中的大部分规定。
【注】:六原则一法则为软件设计与开发的重要逻辑,建议大家去学习一下。
现在大多数人使用的jsp技术泛指单纯的前端页面,我们已经不再将Java代码卸载前端页面,以避免耦合度过高(前文说过耦合度的问题,自己去学)。Jsp前端引擎大家已经了解的差不多了,现在为大家介绍一款SpringBoot框架推荐给大家的另一款前端的模板引擎——thymeleaf。
首先,我们在使用thymeleaf之前依旧要引入thymeleaf的相关依赖,代码如下:
<!--引入thymeleaf依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
曾经有小伙伴问过我,为什么在引入一些相关依赖的时候 porm.xml 文件中还是报红,大家注意每次修改完 porm.xml 文件后页面右上角有一个蓝色的 M 字母图标,这代表我们对于Maven相关的代码有了更改,IDEA提示我们要对项目进行 Maven Update 操作,点击等待更新完成就好。
现在我们已经引入了 thymeleaf 的依赖,现在来介绍一下相关语法:
新建一个 .html 文件,在 <html> 头中加入如下代码:
<html lang="en" xmlns:th="http://www.thymeleaf.org">
这表示我们要在当前前端页面中使用 thymeleaf 的模板引擎。现在我们所有准备工作都已经完成了,接下来介绍这个新的模板引擎如何对数据进行操作。
曾经我们在Jsp模板引擎中想取出变量的值,用到的是 ${key} ,同样还有设定标签中的 value 值,这些在 thymeleaf 中都与Jsp没什么太大的区别,只是需要在前面加上 th: 。代码如下:
<span th:text="${username}"/>
<input th:value="${password}">
同样的还有判断操作以及超链接。不过这两项与曾经的Jsp不太一样,我们先看代码,然后再解释:
<span th:if="${age} le 20"/>
<a th:href="@{/student/getStudent(sid=21)}">查询学生</a>
在判断操作中,le 代表的是小于等于。类似的还有许多运算符,如下所示:
- lt:less than 小于
- le:less than or equal to 小于等于
- eq:equal to 等于
- ne:not equal to 不等于
- ge:greater than or equal to 大于等于
- gt:greater than 大于
我们一般用以上的运算符来对数据进行判断操作。
在超链接语句中我们发现,除了在 href 前加上了thymeleaf特定的前缀,我们还要在路径前加上 @{} ,这个不做过多解释,仅仅为特定用法。需要注意的是,我们在路径中携带参数时,需要使用 括号 携带,这个要搞清楚。
接下来是比较重要的一个,展示多个数据,也就是经常需要使用到的遍历,在 thymeleaf 中,我们使用的是如下方式:
<ul th:each="user:${users}">
<li><span th:text="${user.uid}"></span></li>
<li><span th:text="${user.uname}"></span></li>
<li><span th:text="${user.uage}"></span></li>
</ul>
<!-- 其语法格式为: -->
<th:each="每次遍历的临时变量名 : ${遍历的集合}">
<!--与 foreach 的用法相似,略有不同,需多加注意-->
这就是thymeleaf模板引擎的基本使用了,总体来说与Jsp模板引擎没有太大的区别,主要是体现在一些语法变更上。当然,想更多了解一些thymeleaf的区别,可以参考我的SpringBoot系列博客的第一节。