Thymeleaf
1、模板引擎
前端交给我们的页面,是html页面。如果是我们以前开发,我们需要把他们转成jsp页面,jsp好处就是当我们查出一些数据转发到JSP页面以后,我们可以用jsp轻松实现数据的显示,及交互等。
jsp支持非常强大的功能,包括能写Java代码,但是呢,我们现在的这种情况,SpringBoot这个项目首先是以jar的方式,不是war,像第二,我们用的还是嵌入式的Tomcat,所以呢,他现在默认是不支持jsp的。
那不支持jsp,如果我们直接用纯静态页面的方式,那给我们开发会带来非常大的麻烦,那怎么办呢?
SpringBoot推荐你可以来使用模板引擎:
模板引擎,我们其实大家听到很多,其实jsp就是一个模板引擎,还有用的比较多的freemarker,包括SpringBoot给我们推荐的Thymeleaf,模板引擎有非常多,但再多的模板引擎,他们的思想都是一样的,什么样一个思想呢我们来看一下这张图:
模板引擎的作用就是我们来写一个页面模板,比如有些值呢,是动态的,我们写一些表达式。而这些值,从哪来呢,就是我们在后台封装一些数据。然后把这个模板和这个数据交给我们模板引擎,模板引擎按照我们这个数据帮你把这表达式解析、填充到我们指定的位置,然后把这个数据最终生成一个我们想要的内容给我们写出去,这就是我们这个模板引擎,不管是jsp还是其他模板引擎,都是这个思想。只不过呢,就是说不同模板引擎之间,他们可能这个语法有点不一样。其他的我就不介绍了,我主要来介绍一下SpringBoot给我们推荐的Thymeleaf模板引擎,这模板引擎呢,是一个高级语言的模板引擎,他的这个语法更简单。而且呢,功能更强大。
我们呢,就来看一下这个模板引擎,那既然要看这个模板引擎。首先,我们来看SpringBoot里边怎么用。
2、springboot中导入依赖
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
</dependency>
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-java8time</artifactId>
</dependency>
----------------------------------------------------------------------------------------
<!--thymeleaf-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
3、Thymeleaf分析
ThymeleafProperties中规定了默认的前缀和后缀
我们只需要把我们的html页面放在类路径下的templates下,thymeleaf就可以帮我们自动渲染了。
使用thymeleaf什么都不需要配置,只需要将他放在指定的文件夹下即可!
public static final String DEFAULT_PREFIX = "classpath:/templates/";
public static final String DEFAULT_SUFFIX = ".html";
3.1、thymeleaf语法
html页面中<html xmlns:th="http://www.thymeleaf.org">
所有Html元素都可以被Thymeleaf替换接管 th:元素名
3.2、thymeleaf常用命名空间
xmlns:th=http://www.thymeleaf.org
xmlns:sec=http://www.thymeleaf.org/extras/spring-security
xmlns:shiro=http://www.pollix.at/thymeleaf/shiro
3.3、thymeleaf官方文档PDF
thymeleaf官方文档PDF:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
首先,让我们看一下标准表达式特性的快速总结:
- 简单表达:
- 变量表达式:
${...}
- 选择变量表达式:
*{...}
- 讯息表达:
#{...}
- 链接URL表达式:
@{...}
- 片段表达:
~{...}
- 变量表达式:
- 文字
- 文本文字:
'one text'
,'Another one!'
,… - 数字文字:
0
,34
,3.0
,12.3
,… - 布尔文字:
true
,false
- NULL文字:
null
- 文字标记:
one
,sometext
,main
,…
- 文本文字:
- 文本操作:
- 字符串级联:
+
- 字面替换:
|The name is ${name}|
- 字符串级联:
- 算术运算:
- 二进制运算符:
+
,-
,*
,/
,%
- 减号(一元运算符):
-
- 二进制运算符:
- 布尔运算:
- 二进制运算符:
and
,or
- 布尔否定(一元运算符):
!
,not
- 二进制运算符:
- 比较和平等:
- 比较国:
>
,<
,>=
,<=
(gt
,lt
,ge
,le
) - 平等操作员:
==
,!=
(eq
,ne
)
- 比较国:
- 条件运算符:
- 如果-然后:
(if) ? (then)
- 如果-然后-否则:
(if) ? (then) : (else)
- 违约:
(value) ?: (defaultvalue)
- 如果-然后:
- 特殊令牌:
- 不-行动:
_
- 不-行动:
3.4、简易的thymeleaf操作
例如:
你可以通过Model对象传值,在后端通过thymeleaf接受
@Controller
@RequestMapping("/test")
public class ThymeleafController{
@RequestMapping("/thymeleafTest")
public String thymleafTest(Model model){
model.addAttribute("msg","用户密码输入错误!");
List<Dog> dogList=new ArrayList<>();
Dog dog=new Dog("哈士奇",5);
Dog dog2=new Dog("柯基",3);
model.addAttribute("dog",dog);
dogList.add(dog);
dogList.add(dog2);
model.addAttribute("dogList",dogList);
return "test";
}
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>恭喜你进入到Test.html页面上来了</h1>
<hr>
<div th:text="${msg}"></div>
<hr>
<div th:utext="${msg}"></div>
<hr>
<div th:text="*{msg}"></div>
<hr>
<p><input type="text" /></p>
<hr>
<!-- 循环遍历-->
<table border="2">
<tr>
<th>姓名</th>
</tr>
<tr th:each="dogs:${dog}">
<td th:text="${dogs}" ></td>
</tr>
</table>
<hr>
<table border="2">
<tr>
<th>种类</th>
<th>年龄</th>
</tr>
<tr th:each="dogs:${dogList}">
<td th:text="${dogs.getName()}" ></td>
<td th:text="${dogs.getAge()}" ></td>
</tr>
</table>
</body>
</html>
成果图:
成果图:
[外链图片转存中…(img-fkqL1YfS-1627454914170)]
更多操作请参考thymeleaf官方文档