基于IDEA的SpringBoot项目创建（三）——thymeleaf

最新推荐文章于 2024-06-28 13:46:50 发布

戒烟失败的老可爱

最新推荐文章于 2024-06-28 13:46:50 发布

阅读量723

点赞数

分类专栏： SpringBoot 文章标签： java html html5 spring boot

本文链接：https://blog.csdn.net/qq_40749255/article/details/109709005

版权

SpringBoot 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

本文介绍了Thymeleaf作为SpringBoot推荐的前端模板引擎，对比了它与传统JSP的区别，并展示了如何引入依赖、基本语法，包括变量显示、条件判断、链接操作以及数据遍历等。Thymeleaf的语法更清晰，降低了前后端耦合。

摘要由CSDN通过智能技术生成

一、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系列博客的第一节。

戒烟失败的老可爱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于IDEA的SpringBoot项目创建（三）——thymeleaf

一、thymeleaf模板引擎的使用在web项目开发中，我们最早接触、同时也是最熟悉的前端页面就是JSP了。Jsp作为动态页面不可缺少的技术，在B/S 架构中长时间占有不可或缺的地位。然而后期出现了一些JSP技术开发伊始未曾想过的问题。那就是耦合度过高，业务逻辑和页面展示同时出现在前端页面在带来开发便利的同时，也造成了每次有需要改动的地方都会造成前端页面的修改，这违反了六原则一法则中的大部分规定。【注】：六原则一法则为软件设计与开发的重要逻辑，建议大家去学习一下。...
复制链接

扫一扫

专栏目录