Thymeleaf-模板引擎
SpringBoot提供了大量的模板引擎,包括FreeMarker、Groovy、Thymeleaf、Velocity和Mustache,SpringBoot推荐使用Thymeleaf作为模板引擎,因为 Thymeleaf提供了完美的SpringMVC支持。
Thymeleaf-基础
基本Thymeleaf模板页面
<html xmlns:th="http://www.thymeleaf.org"><!-- 将镜头页面转换为动态的视图,需要进行动态处理的元素将使用‘th:’为前缀 -->
<head>
<meta content="text/html;charset=UTF-8"/>
<link th:src="@{base/css/bootstrap.min.css}" rel="stylesheet"/><!-- ‘@{}引用web静态资源’ -->
<link th:src="@{base/css/bootstrap-theme.min.css}" rel="stylesheet"/>
<script th:src="@{base/js/jquery-3.2.1.js}" type="text/javascript"></script>
<script th:src="@{base/js/bootstrap.min.js}"></script>
</head>
</html>
Thymeleaf-访问model中的数据
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">Model Data</h2>
</div>
<div>
<span th:text="${singlePerson.name}"></span>
</div>
</div>
Thymeleaf-数据迭代
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">列表</h3>
</div>
<div class="panel-body">
<ul class="list-group">
<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>
Thymeleaf-数据判断
<div th:if="${not #lists.isEmpty{people}}"><!-- 判断是否为空,Thymeleaf支持 >、<、>=、<=、==、!=比较条件,也支持SpringEL表达式用于条件中 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">列表</h2>
</div>
<div class="panel-body">
<ul class="list-group">
<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>
Thymeleaf-JS中访问model中的数据
<script th:inline="javascript">
var single=[[${singlePerson}]];
console.log(single.name+";"+single.age);
</script>