文章目录
- 一、SpringBoot快速使用
- 1.引入启动器
- 2.Service
- 3.Controller
- 4.users.html
- 5.启动项目进行测试
- 二、Thymeleaf详解
- 1.Thymeleaf介绍
- 2.thymeleaf模板缓存机制
- 3.标准表达式语法
- 3.1 变量表达式
- 3.2 选择(星号)表达式
- 3.3 文字国际化表达式
- 3.4 URL表达式
- 问: ${...}和*{...}区别?
- 4.常见用法
- 4.1 赋值、字符串拼接
- 4.2 条件判断 If/Unless
- 4.3 each循环
- 4.4 内联文本/JS
- 4.5 内嵌变量
- 5.使用thymeleaf布局
- 三、未完待续... ...
先启动感受一下Thymeleaf的效果,之后在深入了解学习。
一、SpringBoot快速使用
环境:jdk1.8+,maven,IDEA,internet,… …
在Springboot中使用h2数据库依赖可实现。在 整合h2数据库+mybatis plus的项目(点击跳转搭建)
1.引入启动器
thymeleaf启动器依赖:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
thymeleaf与解析JSP的InternalViewResolver类似,Thymeleaf默认会根据前缀和后缀来确定模板文件的位置:
- 默认前缀: classpath:/templates/
- 默认后缀: .html
所以如果我们返回视图: users ,会指向到 classpath:/templates/users.html。
2.Service
UserService
@Service
public class UserService {
@Autowired
private UserMapper userMapper;
public List<User> queryAll() {
return this.userMapper.selectList(null); // 传入null 表示查询所有数据
}
}
3.Controller
编写一个请求(all
)
@Controller
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("/all")
public String all(Model model) {
List<User> list = userService.queryAll();
model.addAttribute("users", list);
// 返回模板名称(就是classpath:/templates/目录下的html文件名)
return "users";
}
}
4.users.html
在HTML中使用thymeleaf,需要在html页面当中写入命名空间xmlns:th="http://www.thymeleaf.org"
。
users.html是为了展示后端发送过来的数据,所以这里是要循环采用th:each
循环标签显示数据。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>首页</title>
<style type="text/css">
table {
border-collapse: collapse;
font-size: 14px;
width: 80%;
margin: auto
}
table, th, td {
border: 1px solid darkslategray;
padding: 10px
}
</style>
</head>
<body>
<div style="text-align: center">
<span style="color: #0a14ef; font-size: 30px">欢迎光临!</span>
<hr/>
<table class="list">
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
<tr th:each="user,status:${users}" th:object="${user}">
<td th:text="${user.id}">-</td>
<td th:text="*{name}">-</td>
<td th:text="*{age}">-</td>
<td th:text="${user.email}">-</td>
<td>
<a th:href="@{/delete(id=${user.id})}">删除</a>
<a th:href="|/update/${user.id}|">修改</a>
<a th:href="'/approve/' + ${user.id}">审核</a>
</td>
</tr>
</table>
</div>
</body>
</html>
5.启动项目进行测试
访问localhost:8080/all
,结果显示如下:
二、Thymeleaf详解
参看:https://www.jianshu.com/p/76d3d4cb2520
1.Thymeleaf介绍
Thymeleaf 是一个跟 FreeMarker 类似的模板引擎,它可以完全替代 JSP 。相较与其他的模板引擎,它有如下特点:
- 动静结合,Thymeleaf 在有网络和无网络的环境下皆可运行,无网络显示静态内容,有网络得到后台数据替换静态内容。
- 它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行。
- 与SpringBoot完美整合,springboot默认整合thymeleaf。可以快速的实现表单绑定、属性编辑器、国际化等功能。
2.thymeleaf模板缓存机制
Thymeleaf会在第一次对模板解析之后进行缓存,极大的提高了并发处理能力。但是这给我们开发时,修改页面后并不会立刻看到效果,我们开发阶段可以关掉模板缓存(yaml格式,去其他格式配置文件类似)
# 开发阶段关闭thymeleaf的模板缓存
spring:
thymeleaf:
cache: false
3.标准表达式语法
标准表发生语法分为四类:
- 变量表达式
- 选择或星号表达式
- 文字国际化表达式
- URL表达式
3.1 变量表达式
变量表达式即OGNL表达式或者Spring EL表达式(在spring中用来获取model,attribute的数据)。格式:
${session.user.name}
它将以一个HTML标签的一个属性来表示:
<h5>变量表达式</h5>
<span>${text}</span>
<span th:text="${text}">你好 thymleaf</span>
<li th:each="book:${books}">
3.2 选择(星号)表达式
用一个预先选择的对象来代替上下文变量容器(map)来执行。格式
*{customer.name}
被指定object的由th:object属性定义,比如:
users.html
<tr th:each="user : ${users}" th:object="${user}">
<td th:text="${user.id}">1</td>
<td th:text="*{name}">张三</td>
...
3.3 文字国际化表达式
文字国际化表达式允许我们从一个外部文件获取区域文字信息(.properties),用Key索引Value,还可以提供一组参数(可选)。格式:
{main.title}
{message.entrycreated(${entryId})}
在模板文件中:
<!--# 内嵌表达式 -->
<th th:text="#{header.address.city}">...</th>
<th th:text="#{header.address.country}">...</th>
3.4 URL表达式
URL表达式指的是把一个有用的上下文或会话信息添加到URL,这个过程经常被叫做URL重写。格式:
@{/order/list}
@{/order/details(id=${orderId})} 传参
@{../documents/report} 相对路径
使用
<!-- 1.链接地址-->
<a href="main.html" th:href="@{/main}"/>
<!-- 2.传递参数-->
<a th:href="@{/delete(id=${user.id}, username=*{username})}">删除</a>
<!-- 3.文本替换-->
<a th:href="|/update/${user.id}|">修改</a>
<!-- 4.字符串拼接-->
<a th:href="'/approve/' + ${user.id}">审核</a>
问: ${…}和*{…}区别?
如果不考虑上下文的情况下,两者没有区别;星号语法评估在选定对象上表达,而不是整个上下文。下面两者等价:
<div th:object="${session.user}">
<p>Name: <span th:text="*{name}">Sebastian</span></p>
<p>Name: <span th:text="${session.user.name}">Sebastian</span></p>
</div>
4.常见用法
4.1 赋值、字符串拼接
<a th:href="|/update/${user.id}|">修改</a>
<a th:href="'/approve/' + ${user.id}">审核</a>
4.2 条件判断 If/Unless
th:if
判断为假,不显示此标签。th:unless
判断为假,显示此标签。
<h5>if指令</h5>
<a th:if="${users.size() > 0}">查询结果存在</a><br>
<a th:if="${users.size() <= 0}">查询结果不存在</a><br>
<a th:unless="${session.user != null}" href="#">登录</a><br>
也可以使用 (if) ? (then) : (else)
语法判断显示的内容。
4.3 each循环
<tr th:each="user, status : ${users}" th:object="${user}" th:class="${status.even} ?
'grey'">
<td th:text="${user.id}">1</td>
</tr>
status称作状态变量,属性有:
- index:当前迭代对象的index(从0开始计算)
- count: 当前迭代对象的index(从1开始计算)
- size:被迭代对象的大小
- current:当前迭代变量
- even/odd:布尔值,当前循环是否是偶数/奇数(从0开始计算)
- first:布尔值,当前循环是否是第一个
- last:布尔值,当前循环是否是最后一个
4.4 内联文本/JS
内联文本:[[…]]
,必须先用th:inline=”text/javascript/none”
激活,th:inline可以在 父级标签内使用,甚至作为body的标签。
<!-- 1.用内联文本显示model attribute-->
<h5>内联文本</h5>
<div>
<h6 th:inline="text">[[${text}]]</h6>
<h6 th:inline="none">[[${text}]]</h6>
<h6>[[${text}]]</h6>
</div>
<!-- 1.用内联js-->
<h5>内联js</h5>
<script th:inline="javascript">
var text = '[[${text}]]';
alert(text);
</script>
尽量用th,少用内联。
4.5 内嵌变量
Thymeleaf还提供了一系列Utility对象(内置于Context中),内嵌变量可以通过#
直接访问。
dates : java.util.Date**的功能方法类。
calendars : 类似#dates,面向java.util.Calendar
numbers : 格式化数字的功能方法类
strings : 字符串对象的功能类,contains,startWiths,prepending/appending等等。
objects: 对objects的功能类操作。
bools: 对布尔值求值的功能方法。
arrays:对数组的功能类方法。
lists: 对lists功能类方法。
…
示例
<!-- 1.dates-->
<h5>内置变量</h5>
<h6 th:text="${#dates.createNow()}">获取当前日期</h6>
<!-- 2.stirngs-->
<h6 th:text="${#strings.substring(text, 6, 9)}">截取字符串</h6>
<h6 th:text="${#strings.length(text)}">获得长度</h6>
<h6 th:text="${#strings.randomAlphanumeric(6)}">随机字符串</h6>
5.使用thymeleaf布局
使用thymeleaf布局非常的方便。
在/resources/templates/目录下创建footer.html,内容如下
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="copy(title)">
©Copyright 2021
<span th:text="${title}">title footer</span>
</footer>
</body>
</html>
在页面任何地方引入:
<!-- 1.保留自己的主标签,保留th:fragment的主标签-->
<div th:insert="footer :: copy('彭德华')"></div>
<!-- 2.不保留自己的主标签,保留th:fragment的主标签-->
<div th:replace="footer :: copy('彭德华')"></div>
之后效果就显现出来了。
三、未完待续… …
到这里为止,我都只是整理了关于Thymeleaf很少的一部分知识,以后有机会更新的!!!!