一 引入依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
二 配置视图解析器
spring-boot很多配置都有默认配置,比如默认页面映射路径为
classpath:/templates/*.html
同样静态文件路径为
classpath:/static/
在application.properties中可以配置thymeleaf模板解析器属性.就像使用springMVC的JSP解析器配置一样
具体可以配置的参数可以查看
org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties这个类,
上面的配置实际上就是注入到该类中的属性值.
三 后台
项目结构:
后台编写就和之前JSP用EL表达式取值类似,就是正常的mvc编写模式:
源码:
@Controller
public class ThymeleafController {
@Autowired
private UserService userService;
@RequestMapping(value = "/index")
public String index(Model model) {
model.addAttribute("username", "赵超");
// model.addAttribute("user", new User("赵超", "111111", "18701321850", "bruce", "2018-03-19"));
model.addAttribute("user", userService.findByUserName("bb"));
model.addAttribute("count", userService.getCountOfUser());
model.addAttribute("users", userService.findAll());
return "index";
}
}
四 前台
<a href="#" th:href="@{'https://www.zhaochao.top/iBlog/article.html?id=' + ${user.id}}">点击</a>
页面预览效果:
源码:
<!DOCTYPE html>
<!-- 引入模版语法 -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>SpringBootStudy</title>
<!-- 引入css文件,引入url的格式:@{...},类似的标签有:th:href和th:src 直接读取static文件夹中内容 -->
<link type="text/css" th:href="@{/css/index.css}" rel="stylesheet" href="css/index.css"/>
</head>
<body>
<!-- 获取变量值 -->
<p>
您好,<b th:text="${username}">呵呵哒</b>
</p>
<!-- Thymeleaf中使用th:if和th:unless属性进行条件判断,标签中内容只有在th:if中条件成立时才显示; th:unless于th:if恰好相反,只有表达式中的条件不成立,才会显示其内容。 -->
<p th:if="${user.passWord == '111111'}" th:text="密码过于简单1">密码简单1</p>
<p th:unless="${user.passWord == '222222'}" th:text="密码过于简单2">密码简单2</p>
<!-- 逻辑运算符>, <, <=,>=,==,!=都可以使用,唯一需要注意的是使用<,>时需要用它的HTML转义符 -->
<p>
用户数量:<span th:text="${count}"></span> <span th:if="${count} > 2" th:text="人很多"></span>
</p>
<!-- 选择表达式*{} 很像变量表达式,不过它们用一个预先选择的对象来代替上下文变量容器(map)来执行, 被指定的object由th:object属性定义 -->
<div th:object="${user}">
<p>用户名:<span th:text="*{userName}"></span></p>
<p>邮箱:<span th:text="*{email}"></span></p>
</div>
<table>
<tr>
<th>序号</th>
<th>用户名</th>
<th>昵称</th>
<th>邮箱</th>
<th>注册时间</th>
</tr>
<tr th:each="u, i: ${users}">
<!-- i称作状态变量,属性有: index:当前迭代对象的index(从0开始计算) count: 当前迭代对象的index(从1开始计算) size:被迭代对象的大小 current:当前迭代变量 even/odd:布尔值,当前循环是否是偶数/奇数(从0开始计算) first:布尔值,当前循环是否是第一个 last:布尔值,当前循环是否是最后一个 -->
<td th:text="${i.count}"></td>
<!-- 支持switch语句,默认值default使用*替代 -->
<td th:switch="${u.userName}">
<span th:case="'aa'">aa有点简单吧</span>
<span th:case="'bb'">bb有点NC吧</span>
<span th:case="*" th:text="${u.userName}">其他名称</span>
</td>
<td th:text="${u.nickName}"></td>
<td th:text="${u.email}"></td>
<td th:text="${u.regTime}"></td>
</tr>
</table>
<!-- thymeleaf的内置对象:dates、calendars、strings、numbers等等,在${}中通过#号使用 -->
<p th:text="${#dates.format(#dates.createNow(), 'yyyy-MM-dd HH:mm:ss')}">获取当前时间并格式化</p>
<p th:text="${#dates.createToday()}">获取当日</p> <p th:text="${#strings.isEmpty('')}">判断是否为空</p>
<p th:text="${#strings.startsWith('8888', '8')}">判断是否以某字符串开始</p>
<p th:text="${#strings.length('12345678')}">获取字符串长度</p>
<p th:text="${#strings.equalsIgnoreCase('aa', 'AA')}">判断是否相等,忽略大小写</p>
<p th:text="${#strings.randomAlphanumeric(7)}">随机生成7位字母的字符串</p>
</body>
</html>
五 常用th标签