SpringBoot中Thymeleaf 快速入门
Thymeleaf 是现代化服务器端的Java模板引擎，不同与JSP和FreeMarker，Thymeleaf的语法更加接近HTML，并且也有不错的扩展性和兼容性。
1、Maven引入
在 pom.xml 文件引入依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2、Controller
package com.huven.springboot.comtroller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
/**
* Created by v20 Luna on 2019/11/26 14:54
*/
@Controller
public class UserController {
@GetMapping("/user")
public String Hello(Model m){
m.addAttribute("msg","Hello Thymeleaf");
return "user";
}
}
3、html
html 文件在 resource/templates 下面创建
注意: html标签一定要引入 xmlns:th="http://www.thymeleaf.org"
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Hello User</h1>
<p th:text="${msg}"></p>
</body>
</html>
二、Thymeleaf 语法
1 text value string 操作
我的 Controller
@GetMapping("/test")
public String test(Model m){
m.addAttribute("msg","Hello");
return "test";
}
我的 html
<h1>text文字显示</h1>
<p th:text="${msg}"></p>
<h1>value给值</h1>
<input type="text" th:value="${msg}" disabled/>
<h1>string操作</h1>
是否为空:<span th:text="${#strings.isEmpty(msg)}" ></span><br>
是否包含指定的字符串:<span th:text="${#strings.contains(msg,'he')}" ></span><br>
是否以'h'字符串开头:<span th:text="${#strings.startsWith(msg,'h')}" ></span><br>
是否以'o'字符串结尾:<span th:text="${#strings.endsWith(msg,'o')}" ></span><br>
返回字符串的长度:<span th:text="${#strings.length(msg)}" ></span><br>
查找字符串的位置,获取'h'下标:<span th:text="${#strings.indexOf(msg,'h')}" ></span><br>
截取字符串:<span th:text="${#strings.substring(msg,2)}" ></span><br>
截取字符串:<span th:text="${#strings.substring(msg,1,3)}" ></span><br>
字符串转大写:<span th:text="${#strings.toUpperCase(msg)}" ></span><br>
字符串转小写:<span th:text="${#strings.toLowerCase(msg)}" ></span><br>
打开浏览器输出结果
text文字显示
Hello
value给值
string操作
是否为空:false
是否包含指定的字符串:false
是否以'h'字符串开头:false
是否以'o'字符串结尾:true
返回字符串的长度:5
查找字符串的位置,获取'h'下标:-1
截取字符串:llo
截取字符串:el
字符串转大写:HELLO
字符串转小写:hello
2 Date操作
controller
@GetMapping("/date")
public String date(Model m){
m.addAttribute("date",new Date());
return "date";
}
html
<h1>Date处理</h1>
格式化日期(浏览器的标准): <span th:text="${#dates.format(date)}" ></span><br>
格式化日期(自定义): <span th:text="${#dates.format(date,'yyyy年MM月dd日 HH时mm分ss秒')}" ></span><br>
日期获取年份: <span th:text="${#dates.year(date)}" ></span><br>
日期获取月份: <span th:text="${#dates.month(date)}" ></span><br>
日期获取日: <span th:text="${#dates.day(date)}" ></span><br>
日期获取小时: <span th:text="${#dates.hour(date)}" ></span><br>
日期获取分钟: <span th:text="${#dates.minute(date)}" ></span><br>
日期获取秒数: <span th:text="${#dates.second(date)}" ></span><br>
日期获取毫秒值: <span th:text="${#dates.millisecond(date)}" ></span><br>
页面输出结果
Date处理
格式化日期(浏览器的标准): 2019年11月26日 下午04时41分27秒
格式化日期(自定义): 2019年11月26日 16时41分27秒
日期获取年份: 2019
日期获取月份: 11
日期获取日: 26
日期获取小时: 16
日期获取分钟: 41
日期获取秒数: 27
日期获取毫秒值: 890
3 if switch使用
controller
@GetMapping("/testIf")
public String testIf(Model m){
m.addAttribute("age",18);
m.addAttribute("sex","男");
return "testIf";
}
html
<h1>If测试</h1>
<span th:if="${age} lt 16">你已经不是青少年了</span><br/>
<span th:if="${age} ge 18">你已经成年了</span><br/>
<h1>switch测试</h1>
<span th:switch="${age}">
<span th:case="16">16岁</span>
<span th:case="17">17岁</span>
<span th:case="18">18岁</span>
<span th:case="19">19岁</span>
<span th:case="20">20岁</span>
</span>
Thymeleaf 常用比较符号
| 比较符号 | 解释 |
|---|---|
| lt | 小于 < |
| gt | 大于 > |
| eq | 等于 == |
| le | 小于等于 <= |
| ge | 大于等于 >= |
页面输出结果
If测试
你已经成年了
switch测试
18岁
4 each 遍历list中的对象
map集合的话也是一样的
controller
@GetMapping("/each")
public String each(Model m){
ArrayList<User> list = new ArrayList<User>();
list.add(new User(1,"小明","男",18));
list.add(new User(2,"小红","女",17));
list.add(new User(3,"小花","女",18));
m.addAttribute("list",list);
return "each";
}
html
<h1>each遍历</h1>
<p>写法一</p>
<table border="1">
<tr th:each="user : ${list}">
<td th:text="${user.getId()}"></td>
<td th:text="${user.getName()}"></td>
<td th:text="${user.getSex()}"></td>
<td th:text="${user.getAge()}"></td>
</tr>
</table>
<p>写法二</p>
<table border="1">
<tr th:each="user : ${list}">
<td th:text="${user.id}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.sex}"></td>
<td th:text="${user.age}"></td>
</tr>
</table>
页面输出:
each遍历
写法一
1 小明 男 18
2 小红 女 17
3 小花 女 18
写法二
1 小明 男 18
2 小红 女 17
3 小花 女 18
5 测试作用域
1、Request
2、Session
3、Attribute
controller：
@GetMapping("/area")
public String area(HttpServletRequest request){
request.setAttribute("req","我是request");
request.getSession().setAttribute("ses","我是session");
request.getServletContext().setAttribute("att","我是attribute");
return "area";
}
html:
<h1> area 测试,三大作用域</h1>
<h2>request</h2>
1<p th:text="${req}"></p>
2<p th:text="${#request.getAttribute('req')}"></p>
3<p th:text="${#httpServletRequest.getAttribute('req')}"></p>
<h2>session</h2>
1<p th:text="${ses}"></p>
2<p th:text="${#httpSession.getAttribute('ses')}"></p>
3<p th:text="${#session.getAttribute('ses')}"></p>
<h2>attribute</h2>
1<p th:text="${att}"></p>
2<p th:text="${#servletContext.getAttribute('att')}"></p>
输出结果:
area 测试,三大作用域
request
1
我是request
2
我是request
3
我是requestsession
12
我是session
3
我是sessionattribute
1
2
我是attribute
注意: 这里发现 <p th:text="${ses}"></p> 是取不到 Session 和 Attribute 对象的
6 URL用法
html：
<h1> URL 的表示</h1>
<a href="http://www.baidu.com">百度-普通html写法</a><br/>
<a th:href="@{http://www.baidu.com}">百度-绝对路径</a><br/>
<p>-------------相对路径----------------</p>
<a th:href="@{/user}">相对路径</a>
<a th:href="@{~/user}">相对服务器的根目录</a>
<a th:href="@{/user(id=6,name=wang)}">相对路径+传参数</a>
实测都可以访问！