springboot使用thymeleaf-CSDN博客

本文链接：https://blog.csdn.net/m0_74825593/article/details/142615737

1.引入依赖

org.springframework.boot spring‐boot‐starter‐thymeleaf

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}"，此标签不太优雅，一般用的比较少。

字符串拼接可用‘|’

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/30de9b5685294a7ea91112457f7a518c.png#pic_center)

在这里插入图片描述

**博主介绍：上海交大毕业，大厂资深Java后端工程师，
《Java全套学习资料》作者，
专注于系统架构设计和高并发解决方案和面试辅导
阿里云开发社区乘风者计划专家博主

/**
 * @author[vx] vip1024p（备注java）
 * @【描述：浏览器打开】docs.qq.com/doc/DUkVoZHlPeElNY0Rw
 */
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello!!!");
    }
}