thymeleaf入门基础语法笔记

记录一下，等做项目的时候不需要满世界的百度查语法

什么是thymeleaf

thymeleaf是一个流行的模板引擎，该模板引擎采用java语言开发，模板引擎是一个技术名词,是跨领域跨平台的概念,在java语言体系下有模板引擎，在C#、PHP语言下也有模板引擎,甚至在javascrip中也会用到模板引擎技术。java生态下的模板引擎有Thymeleaf、freemaker、velocity、Beetl（国产）等。

thymeleaf的maven坐标依赖

引入坐标依赖

1、第一步引入maven坐标<!--thymeleaf的起步依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

springboot的核心配置文件application.properties中对thymeleaf进行配置

# 配置thymeleaf
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.check-template=true
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false
spring.thymeleaf.servlet.content-type=text/html
spring.web.resources.static-locations=classpath:/templates/,classpath:/static/

标签的action属性

如果你需要展示动态的数据,类似标签的action属性，比如：

<form id="login" th:action="@{/index.html}"></form>

在使用thymeleaf的时候我们需要在html页面的头顶加入thymeleaf的命名空间

<html xmlns:th="http://www.thymeleaf.org">

<html xmlns:th="http://www.thymeleaf.org"><head><title>Good Thymes Virtual Grocery</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link rel="stylesheet" type="text/css" media="all" href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" /></head><body><p th:text="#{home.welcome}">Welcome to our grocery store!</p></body></html>

展示单个数据

在mvc层设置数据：

 model.addAttribute("name", "小苍");

在html页面获取数据：

<span th:text="${name}"></span>

当展示的数据里有html标签的时候：

 model.addAttribute("username", "<a href=''>数据</a>");

获取数据的时候使用utext解析：

 <span th:utext="${username}"></span>

其他的例子：

<input type="text" name="userName" value="James Carrot" th:value="${name}" />

总结：

使用 th:text="${属性名}" 获取对应数据，获取数据时会将对应标签中的数据清空，因此最好是空标签
使用 th:utext="${属性名}" 获取对应的数据，可以将数据中html先解析再渲染到页面
使用 th:value="${属性名}" 获取数据直接作为表单元素value属性

展示对象数据

@Controller
public class HelloController {@RequestMapping("hello")public String hello(Model model){model.addAttribute("user", new User("21","小三",23,new Date()));return "index";}
}

 <ul><li>id:<span th:text="${user.getId()}"></span></li><li>name:<span th:text="${user.getName()}"></span></li><li>age:<span th:text="${user.getAge()}"></span></li><li>bir:<span th:text="${#dates.format(user.getDate(),'yyyy-MM-dd')}"></span></li> 这里需要对日期进行格式化</ul>

条件展示数据

运算符：
比较：>，<，>=，<=（gt，lt，ge，le）
等号运算符：==，!=（eq，ne）

model.addAttribute("user", new User("21","小三",23,new Date()));

当user.age的值大于23的时候显示user.name

 <span th:if="${user.age} gt 23" th:text="${user.name}"></span>

其他的运算符同理

展示多个数据

直接遍历集合

<ul th:each="user:${users}"><li th:text="${user.id}"></li><li th:text="${user.name}"></li><li th:text="${user.age}"></li><li th:text="${#dates.format(user.date,'yyyy年MM月dd日')}"></li></ul>

遍历时获取遍历状态

<ul th:each="user,userStat:${users}"><li>当前遍历的次数: <span th:text="${userStat.count}"/>当前遍历的索引: <span th:text="${userStat.index}"/>当前遍历是否是奇数行:   <span th:text="${userStat.odd}"/>当前遍历是否是偶数行:   <span th:text="${userStat.even}"/></li><li>集合的总记录数：<span th:text="${userStat.size}"></span></li></ul>

map类型的循环数据展示

 <p th:each="user : ${userMap}">
<span th:text="${user.key}">输出名字</span>
<span th:text="${user.value.name}">输出名字</span>
<span th:text="${user.value.getAge()}">输出年龄</span>
<span th:text="${user.value.getAddress()}">输出地址</span>
<span th:text="${user.value.getPhone()}">输出电话号码</span>
</p>${user.key} 展示的是map中key的值,${user.value}是获取map中的value

定义超链接 th:href

<a class="login" th:href="@{/login}">登录</a>

判断th:if

条件判断，比如后台传来一个变量，判断改变量的值，1为男，2为女：

<span th:if="${sex} == 1">
男：<input type="radio" name="se" th:value="男">
</span>
<span th:if="${sex} == 2">
女：<input type="radio" name="se" th:value="女">
</span>

选择th:switch/th:case

switch，case判断语句,比如
<div th:switch="${sex}">
<p th:case="1">性别：男</p>
<p th:case="2">性别：女</p>
<p th:case="*">性别：未知</p>
</div>星号的那一项代表默认

三目运算

<div th:text="${sex} == '男' ? '男士':'非男士' "></div>
<div th:text="${sex} == '女' ? '女士':'非女士' "></div>

或者

 <div th:text="${outboundPersonnel!=null?outboundPersonnel:null}">

或者

<span th:text="${sex eq 1}?'男':'女'">未知</span><span th:text="${sex eq '1'}?'男':'女'">未知</span>

标准表达式功能摘要

标准表达式功能的快速摘要：

简单表达式：
变量表达式： ${…}
选择变量表达式： *{…}
消息表达： #{…}
链接URL表达式： @{…}
片段表达式： ~{…}
文字
文本文字：‘one text’，‘Another one!’，…
号码文字：0，34，3.0，12.3，…
布尔文字：true，false
空文字： null
文字标记：one，sometext，main，…
文字操作：
字符串串联： +
文字替换： |The name is ${name}|
算术运算：
二元运算符：+，-，*，/，%
减号（一元运算符）： -
布尔运算：
二元运算符：and，or
布尔否定（一元运算符）： !，not
比较和平等：
比较：>，<，>=，<=（gt，lt，ge，le）
等号运算符：==，!=（eq，ne）
条件运算符：
如果-则： (if) ? (then)
如果-则-否则： (if) ? (then) : (else)
默认： (value) ?: (defaultvalue)
-特殊令牌：
无操作： _
官方说了所有的功能都是可以嵌套使用的：

'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))

引入静态资源

引入的静态资源的案例
springboot存放静态资源，建议放在static目录下

项目引入静态资源的时候

 <link rel="stylesheet" th:href="@{/css/index.css}"><script th:src="@{/js/jquery-3.4.1.min.js}"></script>

当跳转资源需要传递参数的时候：

<a href="details.html" th:href="@{/user/details(orderId=1)}">view</a>

多参数传递

<a href="details.html" th:href="@{/user/details(orderId=1,,name='小李')}">view</a>

官方的案例：

<!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html" th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a><!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a><!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

th:chlick 的用法案例

<button type="button"  title="编辑" th:onclick="'javascript:edit('+${i.id}+')' ">编辑</button><button type="button"  title="删除" th:onclick="'javascript:del('+${i.id}+')' ">删除</button>

点击事件：th:οnclick=“getCollect()”

    <span th:attr="data-ref=${user.name}" th:onclick="clickMe()">22</span>
<script>
function clickMe() {alert("click")}
</script>

th:src

此标签用于对外部资源的引入，加入了/相当于加上了项目的上下文：

<script th:src="@{/js/jquery-3.4.1.min.js}"></script>
<img th:src="@{/images/bg.jpg}" alt="图片">

如果你想了解更多：
请点击这里的按钮study Many

thymeleaf入门基础语法笔记相关推荐

Python入门-基础语法笔记
1.vi技巧: 中英切换:shift wq = x 2.注释单行:# 多行:三个单引号或三个双引号 """ print("hello world") ...
python编程语法大全-Python编程入门——基础语法详解
今天小编给大家带来Python编程入门--基础语法详解. 关于怎么快速学python,可以加下小编的python学习群:611+530+101,不管你是小白还是大牛,小编我都欢迎,不定期分享干货每天 ...
python编程语法-Python编程入门——基础语法详解
今天小编给大家带来Python编程入门--基础语法详解. 一.基本概念 1.内置的变量类型: Python是有变量类型的,而且会强制检查变量类型.内置的变量类型有如下几种: #浮点 float_num ...
python编程if语法-Python编程入门基础语法详解经典
原标题:Python编程入门基础语法详解经典一.基本概念 1.内置的变量类型: Python是有变量类型的,而且会强制检查变量类型.内置的变量类型有如下几种: #浮点 float_number = ...
python编程语法-Python编程入门——基础语法详解（经典）
今天小编给大家带来Python编程入门--基础语法详解.温馨提示: 亮点在最后! 在这里还是要推荐下我自己建的Python开发学习群:301056051,群里都是学Python开发的,如果你正在学习P ...
python 判断列表所有元素是否为某个值_这应该是最详细的Python入门基础语法总结！...
这应该是最详细的Python入门基础语法总结! 这应该是最详细的Python入门基础语法总结! 定义变量,使用变量 input 用户自己输入值 print 打印值可以输出多个变量 %d|%s 用于输 ...
python基础编程语法-Python编程入门——基础语法详解
今天小编给大家带来Python编程入门--基础语法详解. 一.基本概念 1.内置的变量类型: Python是有变量类型的,而且会强制检查变量类型.内置的变量类型有如下几种: #浮点 float_num ...
python基础编程语法-Python编程入门——基础语法详解（经典）
今天小编给大家带来Python编程入门--基础语法详解.温馨提示: 亮点在最后! 在这里还是要推荐下我自己建的Python开发学习群:301056051,群里都是学Python开发的,如果你正在学习P ...
Python入门基础总结笔记——正则表达式
Python入门基础总结笔记--正则表达式完整基础知识参看网站:正则表达式总结重点用\d可以匹配一个数字,\w可以匹配一个字母或数字用*表示任意个字符(包括0个),用+表示至少一个字符用?表 ...