0. 使用的项目名字:test_spring_boot
对应模块名字:test_thymeleaf
参考博文:Thymeleaf一篇就够了
1. 导入依赖
1.1. 创建项目时
勾选即可
1.2. 已有项目,添加依赖
<!-- 开始:01. thymeleaf模板引擎-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- 结束:01. thymeleaf模板引擎-->
2. 静态资源位置
在这个包下创建html文件即可
3. 第一个Thymeleaf程序
3.1. 在resources/templates包中新建html文件
新建index.html,在任一标签中写上th:text=${xxx}
<body>
<p th:text="${data}">没有数据传过来时,显示这个</p>
</body>
3.2. 编写controller
在这个controller中,传入参数Map<String,Object> map,
在方法体中对这个map赋值,那么这个值就可以在返回时,为html赋值
@RequestMapping("testThymeleaf")
public String testThymeleaf(Map<String,Object> map){
//为thymeleaf准备数据
map.put("data", "这是从后端传过来的数据");
return "index";
}
3.3. 访问这个接口
启动项目后,访问这个接口,就会带着map的键值对跳转到index.html
随后再将map里的数据,赋给对应的地方
3.4. 运行结果
4. thymeleaf进阶:各种表达式
基于上述表格,有以下常用的用法:
4.1. 链接表达式@{ xxx }
超链接
<a th:href="@{index.html}">超链接</a>
引入css
<link rel= "stylesheet" th:href="@{testCss.css}">
引入JavaScript
<script type="text/javascript" th:src="@{index.js}"></script>
当程序启动,并且通过controller访问到这些资源时,Thymeleaf表达式就会生效
4.2. 变量表达式${ xxx }
为方便演示,此处先编写如下接口:
@RequestMapping("toTestVariable")
public String toTestVariable(Map<String, Object> map) {
//01. 普通字符串
String name = "小红";
//02. 对象
Student student1 = new Student();
student1.setStuName("妮妮");
student1.setStuNo(1);
student1.setStuSex("女");
Student student2 = new Student();
student2.setStuName("敏敏");
student2.setStuNo(2);
student2.setStuSex("女");
//03. List
List<Student> studentsList = new ArrayList<>();
studentsList.add(student1);
studentsList.add(student2);
//04. map
Map<String, Object> studentsMap = new HashMap<>();
studentsMap.put("student1", student1);
studentsMap.put("student2", student2);
//05. 级联对象
StuClass stuClass = new StuClass();
stuClass.setStuClassId(1);
stuClass.setStuClassName("一班");
stuClass.setStudents(studentsList);
//返回给前端
map.put("name", name);
map.put("student1", student1);
map.put("studentsList", studentsList);
map.put("studentsMap", studentsMap);
map.put("stuClass", stuClass);
return "testVariable";
}
此时返回给testVariable的时候,就有了五个数据
4.2.1. 普通字符串
普通字符串直接用${xxx}即可
4.2.2. 对象
对象同样用${xxx}获取,要获取对象的属性,用${对象名.属性名}即可
4.2.3. List
List可以用${ List名[0] }取值
当然,常用做法都是遍历这个List,用th:each = “单个元素名 : ${List名}”
具体看下图:
可以看到,这个标签写在DIV标签中
则每遍历一个元素,都将生成这样的一个DIV。也可以用等各种标签实现,甚至是
4.2.4. Map
Map的取值很简单:
(1) ${ map名.get(’ Key ') }
(2) ${ map名[ ‘key’ ] }
(3) ${ map名.key }
其中的 student1 和 student2 都是key
4.2.5. 遍历Map
没想到吧,Map也可以遍历
类似对List的遍历,用th:each = “单个元素名 : ${Map名}”
具体如下图
4.2.6. 级联对象
4.3. 选择变量表达式*{ xxx }
如果接下来的操作大部分是取同一个对象的各种属性
可以先用 th:object = ${ 对象 } 来选择对象
随后便可以直接用==*{ 属性名 }==取值,具体如下
4.4. 消息表达#{ xxx }
简单地说,其实就是从配置信息中获取数据(类似SPEL)
如果直接获取application.properties的数据,则是SPEL
如果有一些数据单纯在html中使用,可以在templates中新建properties文件
然后在application.propertis中引入,这样就可以通过#{ xxx }获取数据了
操作如下:
(1) 在templates文件夹下新建properties
(2)在application.properties中引入
#引入其他的properties文件
spring.messages.basename=templates/studentData
(3) 使用