SpringBoot 的Web 开发

最新推荐文章于 2024-07-18 10:48:42 发布

敌军bug

最新推荐文章于 2024-07-18 10:48:42 发布

阅读量229

点赞数

CC 4.0 BY-SA版权

分类专栏： SpringBoot Spring Boot

本文链接：https://blog.youkuaiyun.com/jikefzz1095377498/article/details/79586049

SpringBoot 同时被 2 个专栏收录

29 篇文章

订阅专栏

Spring Boot

25 篇文章

订阅专栏

本文介绍如何在SpringBoot项目中使用Thymeleaf模板引擎，并演示了基本的页面结构、如何在模板中访问和展示Model数据、迭代数据及进行条件判断等操作。

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

SpringBoot 的Thrmeleaf模板引擎
Spring Boot中推荐使用Thrmeleaf作为模板引擎，因为Thrmeleaf 提供了完美的SpringMVC的支持。虽然Spring Boot 中还提供了其他的大量的模板，包括：Free Marker，Groovy，Velocity和Mustache
Thrmeleaf 是一个Java类库，可以作为MVC的Web应用的View层。
Thrmeleaf 还提供了额外的模块与SpringMVC集成，所以我们可以使用Thrmeleaf 完全替代JSP。
下面的代码是一个基本的Thrmeleaf 模板页面：

<!DOCTYPE html>
<html xmlns:th="http://www.thrmeleaf.org"><!-- 可以将静态页面转换成动态的视图，需要进行动态处理的元素将使用"th:"为前缀 -->
<head>
<meta charset="UTF-8">
<title>默认页面</title>
</head>
<body>
	
</body>
</html>

访问model中的数据

<div>
		<div>
			<h3>访问model</h3>
		</div>
		<div>
			<!-- 访问model中的singlePerson 的name属性，注意：需要处理的动态内容需要加上"th:"前缀 -->
			<span th:text="${singlePerson.name}"></span>
		</div>
	</div>

model中的数据迭代：

<div>
		<div>
			<h3>列表</h3>
		</div>
		<div>
			<ul>
				<!-- 使用 th:each来做循环迭代，person作为迭代元素来使用，然后像访问model中的数据那一步一样来访问迭代元素的属性-->
				<li class="list-group-item" th:each="person:${people}">
					<span th:text="person.name"></span>
					<span th:text="person.age"></span>
				</li>
			</ul>
		</div>
	</div>

7.数据判断

<!-- 判断people是否为空，Thrmeleaf支持>、<、>=、<=、==、 !=作为比较条件，同时也支持将SpringEl表达式语言用于条件中  -->
	<div th:if="${not #list.isEmpty(people)}">
		<div>
			<div>
				<h3>列表</h3>
			</div>
			<div>
				<ul>
					<!-- 使用 th:each来做循环迭代，person作为迭代元素来使用，然后像访问model中的数据那一步一样来访问迭代元素的属性-->
					<li class="list-group-item" th:each="person:${people}">
						<span th:text="person.name"></span>
						<span th:text="person.age"></span>
					</li>
				</ul>
			</div>
		</div>
	</div>

8.在JavaScript中访问model

<script th:inline="javascript">
		var single = [${singlePerson}];
		console.log(single.name + "/" + single.age);
	</script>