Spring Boot 整合Thymeleaf模板
Spring Boot 整合Thymeleaf模板
Thymeleaf是目前较为流行的视图层技术，Spring Boot官方推荐使用Thymeleaf。
什么是Thymeleaf
Thymeleaf 是一个支持原生HTML文件的java模板，可以实现前后端分离的交互方式，即视图与业务数据分开相应，可以直接将服务端返回的数据生成HTML文件，同时也可以处理XML，JavaScript，CSS等格式。
Thymeleaf的最大特点是既可以直接在浏览器打开，也可以结合服务端将业务数据填充到HTML后动态生成页面。
1. 创建Maven工程，不需要创建Web工程。导入pom依赖。
<parent>
<artifactId>spring-boot-starter-parent</artifactId>
<groupId>org.springframework.boot</groupId>
<version>2.2.4.RELEASE</version>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
2.application.xml
spring:
thymeleaf:
prefix: classpath:/templates/ #模板路径，注意classpath后面不要有空格
suffix: .html #模板后缀
servlet:
content-type: text/html #设置模板的content-type（文本和html类型）
encoding: UTF-8 #设置编码方式
mode: HTML5 #校验h5格式
cache: false #关闭缓存，在开发过程中可以随时看到修改后页面的变化
3.HelloHandler
package com.southwind.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
@RequestMapping("/hello")
public class HelloHandler {
@GetMapping("/index")
public ModelAndView index(){
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("index");
modelAndView.addObject("name","张三");
return modelAndView;
}
}
4.启动类
package com.southwind;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class,args);
}
}
5，HTML
<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Index</h1>
<p th:text="${name}">Hello World</p>
</body>
</html>
如果需要加载后台的业务数据，则需要在HTML中使用Thymeleaf标签完成
1. 需要引入模板标签
<html xmlns:th="http://www.thymeleaf.org"></html>
2.通过特定的标签完成操作
<p th:text="${name}">Hello World</p>
Thymeleaf模板标签不同于JSTL，Thymeleaf模板标签直接嵌入到HTML原生标签内部。
Thymeleaf常用标签
-
th:text
th:text 用于文本的显示，将业务数据的值填充到HTML标签中
-
th:if用于条件判断，对业务数据的值进行判断，如果条件成立，则显示内容，否则不显示，具体的使用如下所示。
@GetMapping("/if")
public ModelAndView ifTest(){
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("test");
modelAndView.addObject("score",100);
return modelAndView;
}
html
<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org"></html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--对后台传过来的值进行判断，判断成功则显示标签内容，失败则不加载标签内容。-->
<p th:if="${score>=90}">优秀</p>
<p th:if="${score<90}">良好</p>
</body>
</html>
- th:unless
th:unless也用作条件判断，逻辑恰好与th:if相反，如果条件不成立则显示，如果条件成立则不显示
@GetMapping("/unless")
public ModelAndView unlessTest(){
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("testunless");
modelAndView.addObject("score",90);
return modelAndView;
}
html
<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p th:unless="${score>=90}">优秀</p>
<p th:unless="${score<90}">良好</p>
</body>
</html>
-
th:switch 和th:case
th:switch和th:case结合使用，用作多条件等值判断，逻辑与Java中switch一致，当switch中的某个业务数据等于某个case时，就显示该case对应的内容。
handler
@GetMapping("/switch")
public ModelAndView switchTest(){
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("testswitch");
modelAndView.addObject("studentId",2);
return modelAndView;
}
html
<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:switch="${studentId}">
<p th:case="1">张三</p>
<p th:case="2">李四</p>
<p th:case="3">王麻子 </p>
</div>
</body>
</html>
- th:action
用来指定请求的URL
，相当于form表单的action属性
