一.前期工作
1.添加依赖
<!--thymeleaf引擎模板-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>2.thymeleaf 静态资源配置:srcmain esourcesapplication-dev.yml
#默认
spring.thymeleaf.prefix=classpath:/templates/
#默认
spring.thymeleaf.suffix=.html
#默认
spring.thymeleaf.mode=HTML5
#默认
spring.thymeleaf.encoding=UTF-8
#默认
spring.thymeleaf.servlet.content-type=text/html
#关闭缓存，即使刷新（上线时改为true）
spring.thymeleaf.cache=false二.使用
1.显示静态页面
- 新建html:srcmain esources emplatesindex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloThymeleaf</title>
</head>
<body>
<h1>thymeleaf in spring boot</h1>
</body>
</html>- 控制器：toly1994.com.toly01.controller.ThymeleafController
/**
* 作者：张风捷特烈
* 时间：2018/7/16:16:08
* 邮箱：1981462002@qq.com
* 说明：Thymeleaf模板引擎控制器
*/
@Controller //注意由于是RequestBody 所以这里将@RestController拆分出来了
public class ThymeleafController {
@GetMapping("/HelloThymeleaf")
public String say() {
return "index";
}
}
2.使用css
- 配置：srcmain esourcesapplication-dev.yml
mvc:
static-path-pattern: /static/** #启用静态文件夹- 创建css文件：srcmain esourcesstaticcssmy.css
h1{
color: #00f;
}- 引用:srcmain esources emplatesindex.html
<link rel="stylesheet" href="../static/css/my.css">
3.使用js
- 创建js文件：srcmain esourcesstaticjsmy.js
alert("hello toly!")- 引用:srcmain esources emplatesindex.html
<script src="../static/js/my.js"></script>
4.动态替换静态页面数据
- 使用:srcmain esources emplatesindex.html
<body>
<h1 th:text="${replace_text}">thymeleaf in spring boot</h1>
</body>- 控制器：toly1994.com.toly01.controller.ThymeleafController
@GetMapping("/useData")
public String useData(ModelMap map) {
map.addAttribute("replace_text", "张风捷特烈");
return "index";
}