jpetstore-Spring Boot-Thymeleaf

最新推荐文章于 2024-11-05 14:20:46 发布

原创最新推荐文章于 2024-11-05 14:20:46 发布 · 479 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Thymeleaf #Spring Boot #jpetstore

jpetstore 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何在Spring Boot项目中使用Thymeleaf作为前端渲染引擎，包括Thymeleaf的初始化、取值、判断、超链接传值、循环、页面包含等功能的实现方法和示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本博客主要针对基于SpringBoot集成的jpetstore中的前端渲染引擎Thymeleaf进行分析。

在html文件内是无法使用jsp标签的，为了实现类似于jsp标签的功能，这里博主使用到了Thymeleaf前端渲染引擎。它能实现jsp标签的功能，并且可以做到前后端的解耦合。

一、准备工作

首先创建项目工程时就要选择Spring初始化工具，让IntelliJ为我们做好初始化工作。

IntelliJ中的Spring初始化工具能将Thymeleaf的初始化工作完成，省去很多配置部分的步骤。即pom.xml文件中已经为我们写好了Thymeleaf的依赖，随后IntelliJ将从网上下载Thymeleaf。

二、Thymeleaf分析

Thymeleaf为前端渲染引擎，现在只关注前端html代码。

首先每一个需要使用Thymeleaf渲染的html都需要导入th标签库，在html标签中写入属性。

<html lang="en" xmlns:th="http://www.thymeleaf.org">

（1）取值：

Thymeleaf默认从Modelmodel对象中取值，为了展示从后端拿到的数据，可以使用：

th:text="${}"

也可以从session中取值，只需要th:text=”${session.数据}”，前提是后端先将数据存入session中。

对象的取值：具体写法为：

<h2 th:text="${category.name}">category name</h2>

在网页中将会用${category.name}中的值替换标签中的 categoryname。

能这么取值的前提是，控制器将名为category的对象传入了model中，category.name即该对象中有name属性，将name属性的值取出。

如上是前端传来一个对象的取值方式，当前端传来的是一个Map类型的数据：

Map的取值：可以这么取值：

<input type="number" min="0" step="10" th:value="${setting['price']}" >

其中，price为后端Map类型中的key，通过这种方式可以拿到对应Key的value。

除了取值，Thymeleaf也能完成判断超链接传值循环页面包含等操作。

（2）判断：th:if=”判断条件” th:switch="判断内容"

对于 th:if，具体写法：

<td th:if="${item.quantity} le '0'">
Backordered.
</td>
<td th:if="${item.quantity} gt '0'" th:text="${item.quantity}+' in stock.'">

</td>

意思为如果item.quantity的值小于等于0，则在table表格中显示Backordered这一单元格，否则就不显示前一个td转而显示后一个td的内容。这里最终只会有一个单元格在网页上呈现。

注意：th:if属性求Bool值，只有true的时候其所在的标签及该标签中的内容才会被渲染到输出结果中。

Thymeleaf 判断表达式

gt：great than（大于）>

ge：great equal（大于等于）>=

eq：equal（等于）==

lt：less than（小于）<

le：less equal（小于等于）<=

ne：not equal（不等于）!=

当然也可以进行判空操作：

th:if=”${对象}”

若不为空则为true，若为空则为false

对于 th:switch，具体写法：

<div th:switch="${${object}}">
    <p th:case="1">object == 1</p>
    <p th:case="2">object == 2</p>
    <p th:case="3">object == 3</p>
    <p th:case="*">object == 1</p>
</div>

th:switch的写法可以类比Java等语言中的switch写法。需要注意的是：若 object == 1 ，其他不符合条件的p标签都将不会渲染到页面上。也就是当object == 1时，页面表现为：

<div>
    <p>object == 1</p>
</div>

（3）超链接传值，发送请求：th:href="@{url路径(参数名=${传递的数据})}"

具体写法：

<a th:href="@{/catalog/product(productId=${product.productId})}" th:text="${product.productId}">
    product.productId
</a>

在点击该超链接后，将会向后端发送请求，并且将值传入productId参数，后端控制器将通过@RequestParam(“productId”) 拿到该参数中的内容。当然了，也可以使用字符串拼接的方式进行 th:href 的编写：

<a th:href="'/manager/store/order/details?id='+${order.getYsOrder().getId()}" class="add add-g">
    查看
</a>

（4）循环：th:each="循环中的单值:${循环的容器}"

具体写法：

<tr th:each="product:${productList}">

   <td>
        <a th:href="@{/catalog/product(productId=${product.productId})}"th:text="${product.productId}">
            product.productId
        </a>
    </td>
    <td th:text="${product.name}">
        product.name
    </td>
</tr>

可以将th:each类比为java中的forEach循环

（5）页面包含

包含文件：

th:replace="html文件所在路径::包含的片段('传入的参数')"

被包含文件：

th:fragment="片段名(参数)"

具体写法：

<head th:replace="common/template_head::head('searchProduct')">

</head>


<head th:fragment="head(title)">
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen" />
    <title th:text="${title}">Mypetstore</title>
</head>

相当于将包含的标签替换掉包含的标签，也相当于嵌入html代码，不过是以标签形式嵌入。如此可以做到组件化开发和代码的复用。

（6）格式化

在做项目的过程中肯定会遇到数据展示格式化的问题，在这里举出两个最常见的数据展示格式化的例子，日期和小数的数据格式化。

日期：yyyy-MM-dd

<span th:text="${#dates.format(date, 'yyyy-MM-dd')}">
    时间
</span>

小数：小数点后两位

<input type="number" placeholder="输入折后价格" 
    th:value="${#numbers.formatDecimal(number,1,2)}" 
    min="0.0" step="0.1">

以上，是对基于Spring Boot集成的jpetstore中的Thymeleaf的粗略介绍。