springboot使用thymeleaf-程序员宅基地

技术标签： springboot

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

字符串拼接可用‘|’

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

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

使用curl在命令行中下载文件_bat脚本 curl 下载文件夹下所有文件-程序员宅基地

文章浏览阅读1w次，点赞2次，收藏5次。今天帮同学从一个网站上下载点数据，但是上面有上百个链接，一个一个点击下载实在是工作量太大。于是自己就想找一个命令行下载工具并用Python写一个简单的脚本来替代这些工作。百度了一下，找到了curlcurl： curl是利用URL语法在命令行方式下工作的文件传输工具。 [百科： http://baike.baidu.com/view/1326315.htm]官网： http:_bat脚本 curl 下载文件夹下所有文件

[cesium] 数字孪生 | 超图 | UE4 | Unity | 基于三维GIS + 游戏引擎结合示例 | UE4 和 Unity的效果展示_cesium ue4-程序员宅基地

文章浏览阅读3.1w次，点赞21次，收藏142次。更新中..._cesium ue4

常用的原型开发工具-程序员宅基地

文章浏览阅读67次。1、Axure RP（Rapid Prototyping）Axure（读音为Ack-Sure）无疑是目前最受关注的原型开发工具，其能通过组件的方式帮助网站或软件设计师快速建立带有注释的原型（流程图、线框图），并凭借自定义可重用的元件、动态面板以及丰富的script能够建立基本功能或页面逻辑的动态演示文件。Axure借鉴了office的界面，能够让用户快速上手，并且提供了..._程序员原型法常用工具

nuiapp请求网络_uni-app 接口 - 网络请求-程序员宅基地

文章浏览阅读145次。1、 uni.request(OBJECT) 发起网络请求参数名类型必填默认值说明url String 是开发者服务器接口地址data Object/String/ArrayBuffer 否请求的参数header Object 否设置请求的 header，header 中不能设置 Referer。method String 否 GET (需大写)有效值：OPTIONS, GET...

Vim命令学习参考_hadoop vim是什么操作-程序员宅基地

文章浏览阅读368次。1. 关于Vim1.1 Vim的几种模式2. 启动Vim3. 文档操作4. 光标的移动4.1 基本移动4.2 翻屏4.3 标记5. 插入文本5.1 基本插入5.2 改写插入6. 剪切复制和寄存器6.1 剪切和复制、粘贴6.2 文本对象6.3 寄存器7. 查找与替换7.1 查找7.2 替换7.3 正则表达式8. 排版8.1 基本排版8..._hadoop vim是什么操作

应用加速，数字人民币接入多地交通出行场景 | 产业区块链发展周报-程序员宅基地

文章浏览阅读3.1k次。摘要产业动态：微众银行多方大数据隐私计算平台通过信通院权威评测欧洲最大移动运营商沃达丰将为AI智能协议移动终端提供移动通信服务汇丰银行加入迪拜经济的阿联酋KYC区块链平台重庆市先进区块链研..._交通联合小额支付