SpringMVC第八讲：SpringMVC整合thymeleaf

铁达尼灬胖

已于 2023-07-17 12:13:47 修改

阅读量978

点赞数 1

分类专栏： SpringMVC 文章标签： spring java mvc SpringMVC thymeleaf

于 2023-07-09 15:17:18 首次发布

本文链接：https://blog.csdn.net/u010611510/article/details/131623221

版权

SpringMVC 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

十三、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.thymeleaf</groupId>
      <artifactId>thymeleaf-spring5</artifactId>
      <version>3.0.15.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.thymeleaf</groupId>
      <artifactId>thymeleaf</artifactId>
      <version>3.0.15.RELEASE</version>
</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>Title</title>
  </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>新增充电桩xxxxx</title>
<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>
<!--同步请求新增-->
<!--<form th:action="@{/saveCharging}" method="post" >-->
<!--    充电桩维护人：<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>-->
<!--    <input type="submit" value="添加"/>-->
<!--</form>-->
充电桩维护人：<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">
<!--    <c:forEach items="${chargingTypeList}" var="chargingType">-->
<!--        <option value="${chargingType.chargingTypeId}">${chargingType.chargingTypeName}</option>-->
<!--    </c:forEach>-->
<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>

铁达尼灬胖

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
SpringMVC第八讲：SpringMVC整合thymeleaf

Thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可，由Daniel Fernández创建，该作者还是Java加密库Jasypt的作者。Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。
复制链接

扫一扫

专栏目录