springboot使用thymeleaf

最新推荐文章于 2024-07-22 08:30:00 发布

汤飞

最新推荐文章于 2024-07-22 08:30:00 发布

阅读量3.3k

点赞数

文章标签： springboot

本文链接：https://blog.csdn.net/weixin_44206171/article/details/123674483

版权

本文介绍了Thymeleaf模板引擎的配置和基本使用，包括在Spring Boot项目中引入依赖，创建测试HTML页面，并展示了如何使用th:text、th:href等属性进行数据渲染和条件判断。此外，还列举了Thymeleaf的常用语法，如th:id、th:object、th:each等，以及它们在实际应用中的功能和示例。

摘要由CSDN通过智能技术生成

1.引入依赖

<dependency> 
        <groupId>org.springframework.boot</groupId> 
        <artifactId>spring‐boot‐starter‐thymeleaf</artifactId> 
</dependency> 
<properties> 
        <thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
        <thymeleaf‐layout‐dialect.version>2.2.2</thymeleaf‐layout‐dialect.version> 
</properties>

thymeleaf会自动渲染resource/templates下的html文件，静态资源存放在resource/static中

2.新建测试html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:text="${msg}">这是显示欢迎信息</div>
<br/>
id: <span th:text="${user.name}"></span>
name: <span th:text="${user.age}"></span>
age: <span th:text="${user.sex}"></span>
<br/>
<br/>
<a href="#" th:href="'http://localhost:8080/user?id=' + ${user.age}">a标签文本内容</a>
<br/>
<p th:each="user: ${userList}">
    <span th:text="${user.sex}" >xxx</span>
    <span th:text="${user.name}" >xxx</span>
    <span th:text="${user.age}" >xxx</span>
</p>
<span th:if="${user.sex eq '男'}">1</span>
<span th:if="${user.sex eq '女'}">2</span>
</div>
</body>
</html>

展示效果

3.常用写法

关键字	功能介绍	案例
th:id	替换id	`<input th:id="'xxx' + ${collect.id}"/>`
th:text	文本替换	`<p th:text="${collect.description}">description</p>`
th:utext	支持html的文本替换	`<p th:utext="${htmlcontent}">conten</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:onclick="'getCollect()'"`
th:each	属性赋值	`tr th:each="user,userStat:${users}">`
th:if	判断条件	`<a th:if="${userId == collect.userId}" >`
th:unless	和th:if判断相反	`<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>`
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:remove	删除某个属性	`<tr th:remove="all"> 1.all:删除包含标签和所有的孩子。`
th:attr	设置标签属性，多个属性可以用逗号分隔	比如 `th:attr="src=@{/image/aa.jpg},title=#{logo}"`，此标签不太优雅，一般用的比较少。