4.6Thyemeleaf基础语法
1、引入约束
首先引入<html xmlns:th="http://www.thymeleaf.org">
xmlns（XML Namespaces的缩写）是一个属性，是XML命名空间。作用是赋予命名空间一个唯一的名称。
命名空间的语法如下：
xmlns:[prefix]=”[url of name]”
th是前缀，机上前缀以后会将静态页面转换为动态视图，想要获取model对象中的数据的写法是<h1 th:text="${name}">hello</h1>，动态访问时，model中的数据会将hello替换掉，如果是静态访问就显示hello。
直接打开静态文件
2、取值
获取Request、Session、ServletContext、Model对象中的变量值。
编写Controller
@Controller
publicclass Web02Controller {
@RequestMapping("/web02")
public String demo01(Model model,HttpServletRequest req) {
req.setAttribute("requestValue", "我是Request域中的值");
req.getSession().setAttribute("sessionValue", "我是Session域的值");
req.getServletContext().setAttribute("servletContextValue", "我是ServletContext域中的值");
model.addAttribute("modelValue","我是Model中的值");
return"demo02";
}
}
编写静态页面：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Spring boot thymeleaf</title>
</head>
<body>
<h1th:text="${requestValue}">获取request域中的数据</h1>
<h1th:text="${session.sessionValue}">获取session域中的数据</h1>
<h1th:text="${application.servletContextValue}">获取ServletContext域中的数据</h1>
<h1th:text="${modelValue}">获取Model中的数据</h1>
</body>
</html>
${key} 和EL表达式类似，但是在thymeleaf引擎模板中，$取值表达式必须放在th标签内部，否则无效。
直接打开此静态页面效果如下：
运行SprngBoot程序在浏览器动态访问效果如下：
静态访问时显示<h1>标签里面的值。
动态访问时显示th:text标签的值，也就是在动态访问时，th:text标签的值会把<h1>标签的值替换掉。
<h1>标签里面值在前端独立开发时能够起到非常好的展示作用，相比jsp更有优势，更好的体现了前后端独立开发分离。
获取JavaBean数据
新建User对象
publicclass User {
private String name;
private Integer age;
private String address;
省略get…set…
编写Controller
@RequestMapping("/web03")
public String demo02(Model model,HttpServletRequest req) {
User user = new User("张三",18,"成都");
model.addAttribute("user",user);
return"demo03";
}
编写模板
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Spring boot thymeleaf获取JavaBean数据</title>
</head>
<body>
<p>获取JavaBean数据</p>
姓名：<span th:text="${user.name}"></span><br/>
年龄：<span th:text="${user.age}"></span><br/>
地址：<span th:text="${user.address}"></span><br/>
</body>
</html>
浏览器访问：
获取JavaBean数据较为简单，类似于EL表达式，直接key.属性名即可。
3. URL表达式
Thymeleaf对于URL的处理是通过语法@{…}来处理的
<ath:href="@{http://www.baidu.com }">绝对路径</a>
<ath:href="@{/}">相对路径</a>
<ath:href="@{css/bootstrap.min.css}">Content路径,默认访问static下的css文件夹</a>
4.运算符
算数运算符：
+, -, *, /, %
关系运算符：
> , < , >= , <=<> HTML转义 (gt , lt , ge , le)
== , != HTML转义(eq, ne)
在特殊情况下需进行转义字符
布尔运算：
and,or 二元操作符
!,not 非（一元操作符）
<p>运算符</p>
<div>
<ol>
<li>+： 3 + 3 = <span th:text="1+1">1+1</span></li>
<li>-： 8 - 1 = <span th:text="2-1">2-1</span></li>
<li>*： 6 * 3 = <span th:text="2*3">2*3</span></li>
<li>/： 9 / 4 = <span th:text="9/4">9/4</span></li>
<li>%： 9 % 4 = <span th:text="9%4">9%4</span></li>
</ol>
</div>
5、条件判断表达式
if/unless
Thymeleaf中使用th:if和th:unless属性进行条件判断
th:if
标签只有在th:if中条件成立时才显示, session对象中的user对象等于null,才会显示请登录
<a th:href="@{/login}"th:if="${session.user == null}">请登录</a>
th:unless
th:unless与th:if正好相反，只有表达式中的条件不成立，才会显示。session对象中的user对象等于null,!=null不成立才会显示请登录
<a th:href="@{/login}"th:unless="${session.user != null}">请登录</a>
以上两个写法等价
Controller代码
运行访问结果如下：
Switch
Controller编写
publicint getWeeker() {
Date today = new Date();
Calendar c = Calendar.getInstance();
c.setTime(today);
intweekday = c.get(Calendar.DAY_OF_WEEK);
returnweekday -1 ;
}
model.addAttribute("weeker",this.getWeeker());
Thymeleaf支持Switch选择结构,*表示默认值。
<div th:switch="${weeker}">
<p th:case="'1'">星期一</p>
<p th:case="'2'">星期二</p>
<p th:case="'3'">星期三</p>
<p th:case="'4'">星期四</p>
<p th:case="'5'">星期五</p>
<p th:case="'6'">星期六</p>
<p th:case="*">星期天</p>
</div>
1、 迭代循环
th:each
语法：
th:each="obj,obj2:${objList}"
th:each="obj:${objList}"
index:当前迭代对象的index（从0开始计算）
count: 当前迭代对象的index(从1开始计算)
size:被迭代对象的大小
current:当前迭代变量
even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
first:布尔值，当前循环是否是第一个
last:布尔值，当前循环是否是最后一个
编写controller
User u1 = new User("张三",18,1,"成都");
User u2 = new User("李四",28,0,"北京");
User u3 = new User("王五",38,1,"上海");
User u4 = new User("赵六",48,0,"深圳");
User u5 = new User("田七",58,0,"广州");
List<User> list = new ArrayList<User>();
list.add(u1);
list.add(u2);
list.add(u3);
list.add(u4);
list.add(u5);
model.addAttribute("list", list);
编写页面
<div th:if="${not#lists.isEmpty(list)}">
<span>方式一：</span>
<table border="1"cellspacing="0" cellpadding="5">
<tr>
<th>序号</th>
<th>第一行</th>
<th>最后一行</th>
<th>角标</th>
<th>奇数</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>地址</th>
<th>当前对象 </th>
</tr>
<trth:each="ls,row : ${list}" th:style="${row.even}? 'background-color:red' :'background-color:blue'" align="center" >
<tdth:text="${row.count }">1</td>
<tdth:text="${row.first }">true</td>
<tdth:text="${row.last }">false</td>
<tdth:text="${row.index }">0</td>
<tdth:text="${row.odd }">true</td>
<tdth:text="${ls.name}">jack</td>
<tdth:text="${ls.age}">22</td>
<tdth:text=" ( (${ls.sex} == '1')? '男' : '女')" >man</td>
<tdth:text="${ls.address}">America</td>
<tdth:text="${row.current}">当前对象</td>
</tr>
</table>
<div>方式二：</div>
<hr/>
<table border="1"cellspacing="0" cellpadding="5">
<tr>
<th>序号</th>
<th>第一行</th>
<th>最后一行</th>
<th>角标</th>
<th>奇数</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>地址</th>
<th>当前对象 </th>
</tr>
<trth:each="ls: ${list}" th:style="${lsStat.even}? 'background-color:red' :'background-color:blue'" align="center" >
<tdth:text="${lsStat.count }">1</td>
<tdth:text="${lsStat.first }">true</td>
<tdth:text="${lsStat.last }">false</td>
<tdth:text="${lsStat.index }">0</td>
<tdth:text="${lsStat.odd }">false</td>
<tdth:text="${ls.name}">jack</td>
<tdth:text="${ls.age}">22</td>
<tdth:text=" ( (${ls.sex} == '1')? '男' : '女')" >man</td>
<tdth:text="${ls.address}">America</td>
<tdth:text="${lsStat.current}">当前对象</td>
</tr>
</table>
</div>
${not#lists.isEmpty(list)} ：判断当前lsit集合是否为空
lists是内置对象
2、 内置对象
Thymeleaf提供了内置对象，内置于Context中，也可以看做工具类，使用比较方便，可以通过#直接访问：
•dates：java.util.Date的功能方法类。
•calendars: 类似#dates，面向java.util.Calendar
•numbers: 格式化数字的功能方法类
•String：字符串对象的功能类
•objects:对objects的功能类操作。
•bools:对布尔值求值的功能方法。
•arrays：对数组的功能类方法。
•lists:对lists功能类方法
•sets
•maps
•aggregates
代码演示：
内置对象：
<h1>dates相关：</h1>
<p>获取服务器端传过来的时间进行格式化</p>
<p>未格式化前</p>
<pth:text="${currentDate}"/>
<p>格式化后</p>
<pth:text="${#dates.format(currentDate, 'yyyy/MM/ddHH:mm:ss')}"/>
<p>工具类直接获取当前时间包括（年月日时分秒）</p>
<pth:text="${#dates.createNow()}"/>
<p>工具类直接获取当前时间包括（年月日）</p>
<pth:text="${#dates.createToday()}"/>
<h1>calendars相关：</h1>
<p>格式化日期</p>
<pth:text="${#calendars.format(#dates.createNow(), 'yyyy/MM/ddHH:mm:ss')}"/>
<p>获取当前日期属于哪一天</p>
<pth:text="${#calendars.day(#dates.createNow())} "/>
<p>获取当前日期属于哪个月份</p>
<pth:text="${#calendars.month(#dates.createNow())} "/>
<p>获取当前日期属于哪一年</p>
<pth:text="${#calendars.year(#dates.createNow())} "/>
<p>获取当前日期属于周几，不过要减1 </p>
<pth:text="${#calendars.dayOfWeek(#dates.createNow()) - 1}"/>
<h1>numbers相关：</h1>
<p>保留两位小数</p>
<pth:text="${#numbers.formatDecimal(money, 0, 2)}"/>
<p>整数位不足0补齐，保留两位小数</p>
<pth:text="${#numbers.formatDecimal(money, 3, 4)}"/>
<p> strings相关</p>
<h1>strings相关:</h1>
<pth:text="${#strings.startsWith('itcodeschool','it')} "/>
<pth:text="${#strings.equals('itcodeschool','AA')} "/>
<pth:text="${#strings.substring('itcodeschool',3,8)} "/>
<pth:text="${#strings.toUpperCase('itcodeschool')}"/>
<h1>objects相关:</h1>
<p>获取当前类的class </p>
<p th:text="${#objects.getClass()}"/>
<p>${#objects.nullSafe(obj,default)} 如果obj的值不为空，返回obj的值</p>
<pth:text="${#objects.nullSafe(#dates.createNow(),default)}"/>
<h1>bools :</h1>
<p>判断当前值是否为true </p>
<pth:text="${#bools.isTrue(false)}"></p>
<pth:text="${#bools.isTrue(true)}"></p>
<h1>lists相关:</h1>
<p>判断集合大小</p>
<pth:text="${#lists.size(list)}"/>
<p>判断集合对象是否为空</p>
<pth:text="${#lists.isEmpty(list)}"/>
<p>判断集合对象不等于空 </p>
<pth:text="${not #lists.isEmpty(list)}"/>
<h1>arrays相关:</h1>
<pth:text="${#arrays.length(arr)}"/>
<pth:text="${#arrays.isEmpty(arr)}"/>
<pth:text="${#arrays.contains(arr, '北京')}"/>
<h1>sets相关:</h1>
<p>判断set集合大小</p>
<pth:text="${#sets.size(set)}"/>
<p>将set集合的值转成String显示</p>
<pth:text="${#sets.toSet(set)}"/>
<pth:text="${#sets.isEmpty(set)}"/>
<pth:text="${#sets.contains(set, 'java')}"/>
<h1>maps相关：</h1>
<pth:text="${#maps.size(map)}"/>
<pth:text="${#maps.isEmpty(map)}"/>
<pth:text="${#maps.containsKey(map, 'name')}"/>
<pth:text="${#maps.containsValue(map, '张三')}"/>
<h1>aggregates相关：</h1>
<p>计算总和,如果数组或集合为空，则返回null </p>
<p th:text="${#aggregates.sum(arr1)}"/>
<p>计算的平均值。如果数组或集合为空，则返回null。</p>
<p th:text="${#aggregates.avg(arr1)}"/>
Controller编写：
@RequestMapping("/web04")
public String demo03(Model model,HttpServletRequestreq) {
req.getSession().setAttribute("user", null);
model.addAttribute("weeker",this.getWeeker());
User u1 = new User("张三",18,1,"成都");
User u2 = new User("李四",28,0,"北京");
User u3 = new User("王五",38,1,"上海");
User u4 = new User("赵六",48,0,"深圳");
User u5 = new User("田七",58,0,"广州");
List<User> list = new ArrayList<User>();
list.add(u1);
list.add(u2);
list.add(u3);
list.add(u4);
list.add(u5);
model.addAttribute("list", list);
model.addAttribute("currentDate",new Date());
model.addAttribute("money",3.14159265358979323846);
String[] arr = new String[] {"成都","北京","上海","广州","深圳","杭州"};
model.addAttribute("arr",arr);
Set set = new HashSet();
set.add("java");
set.add("C++");
set.add(".net");
set.add("ruby");
model.addAttribute("set",set);
Map map = new HashMap();
map.put("name","张三");
map.put("age",18);
map.put("address", "成都");
model.addAttribute("map",map);
int[] arr1 = newint[] {1,18,31,33,90};
model.addAttribute("arr1",arr1);
return"demo04";
}
有关内置对象详细可以参考官网：
8、字符串拼接
<h1>字符串拼接</h1>
方式一：<br/>
<p th:text="'欢迎你来到 ' + ${name} + '!'"/>
方式二：<br/>
<p th:text="|欢迎你来到 ${name}!|"/>
9、常用标签
10、*表达式
Controller编写：
User u1 = new User("张三",18,1,"成都");
req.getSession().setAttribute("user",u1);
页面编写
<h1>*表达式</h1>
<p>用*{...} 选择对象里的变量</p>
<h2>普通方式：</h2>
<div th:object="${session.user}">
<p>姓名: <span th:text="${session.user.name}">小明</span></p>
<p>年龄: <span th:text="${session.user.age}">18</span></p>
<p>性别: <span th:text="${session.user.sex}== 1 ? '男':'女'">女</span></p>
<p>地址: <span th:text="${session.user.address}">成都</span></p>
</div>
<h2>*表达式方式:</h2>
<div th:object="${session.user}">
<p>姓名: <span th:text="*{name}">小明</span></p>
<p>年龄: <span th:text="*{age}">18</span></p>
<p>性别: <span th:text="*{sex} == 1 ?'男':'女'">女</span></p>
<p>地址: <span th:text="*{address}">成都</span></p>
</div>
11、本地变量
<h2>本地变量：th:with</h2>
<div th:with="u=${session.user}">
<p>
姓名：<span th:text="${u.name}">jack</span>.
</p>
</div>
<div th:with="u=${session.user},name=${session.user.name}">
<p>
<span th:text="${u.name}">jack</span>
</p>
<p>
<span th:text="${name}">jack</span>
</p>
</div>
12、增强的内联机制
现在可无需额外的标签，直接在文本中输出数据：
${name}会原样输出
[[${name}]] 会把name的值输出
JS内联：
<script th:inline="javascript">
window.οnlοad=function(){
var name =[[${name}]];
alert(name);
}
</script>
CSS内联:
<!-- css内联 -->
<styleth:inline="css">
.[[${name}]] {
text-align: [[${name}]];
}
</style>
13、无操作标记（token）
无操作（NO-OP no-operation）标记，下划线”_”，代表什么也不做，什么都不做就会输出标签内的内容。
<h2>无操作标记(token)</h2>
<p th:text="${name} ?: _">我是默认值</p>
<p th:text="${name1} ?: _">我是默认值</p>
14、片段表达式
目录结构
Controller
@RequestMapping("/main")
public String main() {
return"main";
}
include.html
<div th:fragment="header">
<h1>header.......................</h1>
</div>
<div th:fragment="footer">
<h1>footer.........................</h1>
</div>
main.html
<!DOCTYPE html>
<html>
<head th:include="common/include :: header">
</head>
<meta charset="UTF-8">
<title>Insert titlehere</title>
</head>
<body>
<h1>main..........................</h1>
<div th:include="common/include::footer"></div>
</body>
</html>
浏览器访问：
986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
