SpringMVC第八讲：SpringMVC整合thymeleaf
十三、SpringMVC整合thymeleaf模版
13、1什么是thymeleaf模版
Thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可，由Daniel Fernández创建，该作者还是Java加密库Jasypt的作者。
Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码，开发者只需将标签属性添加到模板中即可。接下来，这些标签属性就会在DOM（文档对象模型）上执行预先制定好的逻辑。
Thymeleaf官网：https://www.thymeleaf.org/
Thymeleaf官方文档：https://www.thymeleaf.org/documentation.html（官网文档为英文）
Thymeleaf模版在HTML中通过html标签进行引入
<html lang="en" xmlns:th="http://www.thymeleaf.org">
13、2thymeleaf模版基本语法
13、2、1常用标签
| 标签名称 | 标签作用 |
|---|---|
| th:text | 文本替换，显示为页面内容 |
| th:utext | 文本替换，显示为带有HTML标签的页面内容 |
| th:value | 描述为标签组件的value属性 |
| th:each | 遍历循环属性，类似JSTL的c:foreach |
| th:if | 判断条件 |
thymeleaf模版标签还有很多，不同组件也包含不同的标签
13、2、2常用表达式
${...} 变量表达式，Variable Expressions
@{...} 链接表达式，Link URL Expressions
13、2、3时间格式化表达式
页面中经常会显示时间类型的信息，${…}表达式内置了时间格式化方法，通过使用#dates调用方法对时间内容进行格式化处理
<p>时间信息 : <span th:text="${#dates.format(itdragonDate)}"/>p>
<p>yyyy-MM-dd HH:mm:ss时间信息 : <span th:text="${#dates.format(itdragonDate, 'yyyy-MM-dd HH:mm:ss')}"/>p>
13、3引入thymeleaf模版资源
<dependency>
<groupId>org.thymeleafgroupId>
<artifactId>thymeleaf-spring5artifactId>
<version>3.0.15.RELEASEversion>
dependency>
<dependency>
<groupId>org.thymeleafgroupId>
<artifactId>thymeleafartifactId>
<version>3.0.15.RELEASEversion>
dependency>
13、4设置SpringMVC视图解析
<bean id="templateResolver" class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver">
<property name="prefix" value="/page/"/>
<property name="suffix" value=".html"/>
<property name="templateMode" value="HTML"/>
<property name="cacheable" value="false"/>
<property name="characterEncoding" value="UTF-8"/>
bean>
<bean id="templateEngine" class="org.thymeleaf.spring5.SpringTemplateEngine">
<property name="templateResolver" ref="templateResolver"/>
bean>
<bean id="viewResolver" class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
<property name="templateEngine" ref="templateEngine"/>
<property name="characterEncoding" value="UTF-8"/>
bean>
13、5实现CRUD
13、5、1查询页面
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<table>
<tr>
<td colspan="5">
<a th:href="@{/save}"><button>新增button>a>
td>
tr>
<tr>
<th>充电桩维护人th>
<th>充电桩地址th>
<th>充电桩最高电量th>
<th>充电桩分类th>
<th>操作th>
tr>
<tr th:each="charging:${chargingList}">
<td th:text="${charging.chargingName}">td>
<td th:text="${charging.chargingAddress}">td>
<td th:text="${charging.chargingMax}">td>
<td th:text="${charging.chargingType.chargingTypeName}">td>
<td><a th:href="@{/update/{chargingId}(chargingId=${charging.chargingId})}">修改a>|<a th:href="@{/delete/{chargingId}(chargingId=${charging.chargingId})}">删除a>td>
tr>
table>
body>
html>
13、5、2新增页面
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>新增充电桩xxxxxtitle>
<script src="js/jquery-3.7.0.js">script>
<script>
$(function () {
$("#btn").click(function () {
$.ajax({
url:"/saveCharging",
type:"POST",
data:JSON.stringify({
chargingName:$("#chargingName").val(),
chargingAddress:$("#chargingAddress").val(),
chargingMax:$("#chargingMax").val(),
chargingTypeId:$("#chargingTypeId").val()
}),
contentType:"application/json;charset=UTF-8",
dataType:"JSON",
success:function (data) {
console.log(data);
}
});
});
});
script>
head>
<body>
充电桩维护人：<input type="text" name="chargingName" id="chargingName">
充电桩地址：<input type="text" name="chargingAddress" id="chargingAddress">
充电桩电量：<input type="text" name="chargingMax" id="chargingMax">
充电桩分类：<select name="chargingTypeId" id="chargingTypeId">
<option th:each="chargingType:${chargingTypeList}" th:value="${chargingType.chargingTypeId}" th:text="${chargingType.chargingTypeName}">option>-->
select>
<button id="btn">新增button>
body>
html>
13、5、3修改页面
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>修改充电桩title>
<script src="../js/jquery-3.7.0.js">script>
<script>
$(function () {
$("#btn").click(function () {
$.ajax({
url:"/updateCharging",
type:"PUT",
data:{
chargingId:$("#chargingId").val(),
chargingName:$("#chargingName").val(),
chargingAddress:$("#chargingAddress").val(),
chargingMax:$("#chargingMax").val(),
chargingTypeId:$("#chargingTypeId").val()
},
dataType:"JSON",
success:function (data) {
console.log(data);
}
});
});
});
script>
head>
<body>
<input type="hidden" name="_method" value="put">
<input type="hidden" name="chargingId" id="chargingId" th:value="${charging.chargingId}">
充电桩维护人：<input type="text" name="chargingName" id="chargingName" th:value="${charging.chargingName}">
充电桩地址：<input type="text" name="chargingAddress" id="chargingAddress" th:value="${charging.chargingAddress}">
充电桩电量：<input type="text" name="chargingMax" id="chargingMax" th:value="${charging.chargingMax}">
充电桩分类：<select name="chargingTypeId" id="chargingTypeId">
<option th:each="chargingType:${chargingTypeList}" th:value="${chargingType.chargingTypeId}" th:text="${chargingType.chargingTypeName}" th:selected="${chargingType.chargingTypeId eq charging.chargingTypeId}">option>-->
select>
<button id="btn">修改button>
body>
html>