Thymeleaf:
1.导入所需的依赖 xmlns:th=“http://www.thymeleaf.org”
2.常用的一些标签
th:text不会对html进行解析
th:utext会对html进行解析
{}与${}:正常情况下,两者是一样的,但{}一般与<th:object>
一起使用来完成对对象属性的简写操作
#{} 一般用于读取.properties文件中的属性
~{…} 片段表达式
@{…} 连接表达式,一般与th:src和th:href配套使用
重点注意: 传参注意
<a th:href="@{/.....(id1=${a}),id2=${b}">
th:unless 当条件为false则显示类似于else
th:if
th:switch
th:case
th:for
th:each 遍历集合(循环操作)
遍历的对象可以是List,Map,数组。。。
在循环时,会产生一个状态变量,该变量有以下属性:
index:当前迭代对象的index(索引)
count:表示第几个对象
size:被迭代的集合的大小
current:当前迭代的变量
even/odd:boolean值(true/false),判断当前循环是否是偶数/奇数(从0开始)
first:判断当前循环是否是第一个
last:。。。。。。。。。最后一个
<!--
[[]]相当于th:text标签
[()]相当于th:utext标签
-->
Thymeleaf常用的内置方法:
1.strings:字符串格式化的方法
2.numbers:数值格式化的常用方法
3.bools:boolean类型操作
4.arrays:数组
5.lists:集合
6.maps
7.datas:日期类型操作
运算符:
二元运算:+,-,*,/,%
布尔运算:and,or,!,not
比较运算:>,<,>=,<= (gt,lt,ge,le) , ==,!= (eq,ne)
测试java代码
package com.springboot.controller;
import com.springboot.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import java.util.*;
@Controller
public class ThymeleafController {
@RequestMapping(value = "thymeleafTest")
public ModelAndView indexModel(){
ModelAndView mv = new ModelAndView();
//设置属性
mv.addObject("title","测试");
mv.addObject("desc","Thymeleaf模板引擎测试操作");
mv.addObject("textTest","<h1 style='color:red'>Text</h1>");
mv.addObject("utextTest","<h1 style='color:green'>uText</h1>");
mv.addObject("a",1);
mv.addObject("b",2);
mv.addObject("bool",true);
mv.addObject("sex",0);
mv.addObject("show",true);
mv.addObject("thstr","hello world");
mv.addObject("thnum",567.456);
mv.addObject("tharray",new Integer[]{1,2,3,4,5,6,7,8,9,10});
mv.addObject("thlist", Arrays.asList(9,8,7,6,5,4,3,2,1,0));
Map<String,Object> map = new HashMap<>();
map.put("test01",1);
map.put("testDate",new Date());
User user = new User();
user.setUsername("lala");
user.setPassword("123");
mv.addObject("user",user);
List<String> list = new ArrayList<>();
list.add("HAHA");
list.add("LALA");
list.add("WUWU");
list.add("ll");
list.add("HUHU");
mv.addObject("strList",list);
//设置跳转的视图
mv.setViewName("index");
return mv;
}
}
测试HTML代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title th:title="${title}">Title</title>
</head>
<body>
<h2 th:text="${desc}">Hello</h2>
<hr>
<h3>输出对象中的内容</h3>
<p th:text="${user.getUsername()}">默认值</p>
<p th:text="${user.password}">***</p>
<!--
th:text不会对html进行解析
th:utext会对html进行解析
-->
<p th:text="${textTest}">***</p>
<p th:utext="${utextTest}">***</p>
<p th:text="${a}+${b}">***</p> <!--1+2=3,结果为3-->
<p th:text="|${a} ${b}|">***</p> <!--1 2-->
<p th:text="${a}>${b}">***</p> <!--false-->
<p th:text="!${bool}">***</p> <!--false-->
<p th:text="${!bool}">***</p> <!--false-->
<p th:text="!${!bool}">***</p> <!--true-->
<p th:text="!${!!bool}">***</p> <!--false-->
<!--<p th:text="!!${!!bool}">***</p> 报错-->
<div th:object="${user}">
<p th:text="*{username}"></p>
</div>
<div th:switch="${user.username}">
<p th:case="lala">LALALA</p>
<p th:case="haha">HAHAHA</p>
</div>
<table>
<tr th:each="str,strStat:${strList}">
<td th:if="${str.length()==4}" style="color: blue" th:text="${str}"></td>
<td style="color: red" th:text="${strStat.index}+${strStat.count}+${strStat.current}"></td>
</tr>
</table>
<div th:if="${a==1}">
<p>HHHH</p>
</div>
<br>
<input type="text" th:id="${desc}" th:value="${desc}"/>
<select>
<option>请选择</option>
<option th:selected="${sex}==1">男</option>
<option th:selected="${sex}==0">女</option>
</select>
<!--<p th:style="'display:'+@{(${show} ? 'none': 'block')}">lalala</p>-->
<!--<p th:style="'display:' + @{(${value} ? 'none' : 'inline-block')} + ''">lalala</p>-->
<h2>Thymeleaf常用的内置方法</h2>
<h3>strings</h3>
<p>old thstr : <span th:text="${thstr}"></span></p>
<p>转化为大写 : <span th:text="${#strings.toUpperCase(thstr)}"></span></p>
<p>Equals: <span th:text="${#strings.equals(thstr,'Spring')}"></span></p>
<p>忽略大小写比较:<span th:text="${#strings.equalsIgnoreCase(thstr,'Hello World')}"></span></p>
<p>获取索引:<span th:text="${#strings.indexOf(thstr,'e')}"></span></p>
<p>字符串截取:<span th:text="${#strings.substring(thstr,2,3)}"></span></p>
<p>开头:<span th:text="${#strings.startsWith(thstr,'hello')}"></span></p>
<p>包含:<span th:text="${#strings.contains(thstr,'world')}"></span></p>
<br>
<hr>
<h3>numbers</h3>
<p>保留小数位:<span th:text="${#numbers.formatDecimal(thnum,0,2)}"></span></p>
<p>保留小数位:<span th:text="${#numbers.formatDecimal(thnum,1,2)}"></span></p>
<br>
<hr>
<h3>bools</h3>
<div th:if="${#bools.isTrue(bool)}">
<p th:text="bool"></p>
</div>
<br>
<hr>
<h4>arrays</h4>
<div th:if="${#arrays.isEmpty(tharray) == false}">
<p>length: <span th:text="${#arrays.length(tharray)}"></span></p>
</div>
<br>
<hr>
<p>当前时间:<span th:text="${#dates.format(#dates.createNow(),'yyyy-MM-dd HH:mm:ss')}"></span></p>
<br>
<hr>
<h3>三目运算符</h3>
<b th:text="${bool==true ? 'bool==true':'bool==false'}"></b>
</body>
</html>