springboot整合Thymeleaf

三十小库里

已于 2022-12-22 15:18:44 修改

阅读量638

点赞数

于 2022-12-21 16:01:12 首次发布

本文链接：https://blog.youkuaiyun.com/qq_57512436/article/details/128396231

版权

springboot 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了Thymeleaf模板引擎的基本概念，并详细讲述了如何在SpringBoot项目中结合使用Thymeleaf，包括创建项目、配置模板引擎、添加依赖以及演示了Thymeleaf的常用表达式和属性，如${data}、@{url}、th:each等。

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

Thymeleaf简介

Thymeleaf是一个流行的模板引擎，该模板引擎采用Java语言开发，模板引擎是一个技术名词，是跨领域跨平台的概念，在Java语言体系下有模板引擎除了thymeleaf之外还有Velocity、FreeMarker等模板引擎，功能类似。

结合springboot使用

一、创建项目

第一步（完成以下操作进行下一步）：

第二步：

添加依赖（第二个依赖：thymeleaf会对html中的标签进行严格校验，如果html标签缺少结束标签的话，thymeleaf会报错，我们可以通过下面方式去除thymeleaf的校验）

<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
      <groupId>net.sourceforge.nekohtml</groupId>
      <artifactId>nekohtml</artifactId>
      <version>1.9.22</version>
</dependency>

配置模板引擎

thymeleaf:
  cache: false  #开发阶段，建议关闭thymeleaf的缓存
  mode: HTML5
  suffix: .html   #后缀
  prefix: classpath:/templates/  #前缀
  servlet:
    content-type: text/html

编写html页面：在resources/templates里面创建html页面，注意添加这个 xmlns:th="http://www.thymeleaf.org"

<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>

二、Thymeleaf常用表达式

1.${data}接收key为data的数据，替换所修饰标签内的文本内容

//定义接口
@RequestMapping("/one")
public String one(Model model){
     model.addAttribute("data","苹果");
     return "index";
}

<!-- 这样的我们的“username”的值就被“苹果”给替换掉 -->
<p th:text="${data}">username</p>

2.@{url}主要用于链接、地址的展示，可用于<script th:src="">、<link th:href="">、<a th:href="">、<form th:action="">、<img th:src="">等

<!--有参地址和无参地址差不多，这里展示有参地址-->
<a th:href="@{'/getByIds?id=' + ${id}}">链接相对地址，有参</a>

@RequestMapping("/getByIds")
public String getById(@RequestParam("id") Integer id,Model model){
    Goods byId = goodsService.getById(id);
    model.addAttribute("byId",byId);
    return "update";
}

三、Thymeleaf常用属性

1.th:each用来遍历某个标签内容

<table border="1">
        <tr>
            <td>编号</td>
            <td>名称</td>
            <td>价格</td>
            <td>数量</td>
            <td>简介</td>
            <td>
                操作
            </td>
        </tr>
        <tr th:each="list:${findGoods}">
            <td th:text="${list.id}"></td>
            <td th:text="${list.goodsName}"></td>
            <td th:text="${list.goodsPrice}"></td>
            <td th:text="${list.goodsNum}"></td>
            <td th:text="${list.remark}"></td>
            <td>
                <a th:href="@{'/deleteGoodss?id='+${list.id}}">删除</a>
                <a th:href="@{'/getByIds?id='+${list.id}}">修改</a>
            </td>
        </tr>
</table>

@RequestMapping("/GoodsAndTypes")
public String goodsAndType(Model model){
    List<Goods> findGoods = goodsService.findGoods();
    model.addAttribute("findGoods",findGoods);
    return "index";
}

关键字	功能	案例
th:id	替换id	<input th:id="'xxx' + ${collect.id}"/>
th:text	文本替换	<p th:text="${collect.description}">description</p>
th:object	替换对象	<div th:object="${session.user}">
th:value	属性赋值	<input th:value="${user.name}" />
th:with	变量赋值运算	<div th:with="isEven=${prodStat.count}%2==0"></div>
th:style	设置样式	th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"
th:onclick	点击事件	th:οnclick="'getCollect()'"
th:each	属性赋值	tr th:each="user,userStat:${users}">
th:if	判断条件	<a th:if="${userId == collect.userId}" >
th:href	链接地址	<a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />
th:switch	多路选择配合th:case 使用	<div th:switch="${user.role}">
th:case	th:switch的一个分支	<p th:case="'admin'">User is an administrator</p>
th:fragment	布局标签，定义一个代码片段，方便其它地方引用	<div th:fragment="alert">
th:include	布局标签，替换内容到引入的文件	<head th:include="layout :: htmlhead" th:with="title='xx'"></head> />
th:replace	布局标签，替换整个标签到引入的文件	<div th:replace="fragments/header :: title"></div>
th:selected	selected选择框选中	th:selected="(${xxx.id} == ${configObj.dd})"
th:src	图片类地址引入	<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
th:inline	定义js脚本可以使用变量	<script type="text/javascript" th:inline="javascript">
th:action	表单提交的地址	<form action="subscribe.html" th:action="@{/subscribe}">
th:attr	设置标签属性，多个属性可以用逗号分隔	比如`th:attr="src=@{/image/aa.jpg},title=#{logo}"`，此标签不太优雅，一般用的比较少。