Springboot整合Thymeleaf并详解热部署

前言

• Thymeleaf是用来开发Web和独立环境项目的服务器端的Java模版引擎
  
• Spring官方支持的服务的渲染模板中，并不包含jsp。而是Thymeleaf和Freemarker等，而Thymeleaf与SpringMVC的视图技术，及SpringBoot的自动化配置集成非常完美，几乎没有任何成本，你只用关注Thymeleaf的语法即可。
  
• Thymeleaf支持html原型，浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示

POM.XML

这里添加了spring-boot-devtools来使Spring Boot应用支持热部署

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional><!-- 这个需要为 true 热部署才有效 --></dependency><!-- spring-boot-starter-thymeleaf --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId><version>2.2.2.RELEASE</version></dependency>

可以看一下SpringBoot自动配置的路径

说明：

（1） devtools可以实现页面热部署（即页面修改后会立即生效，这个可以直接在application.properties文件中配置spring.thymeleaf.cache=false来实现），实现类文件热部署（类文件修改后不会立即生效），实现对属性文件的热部署。

即devtools会监听classpath下的文件变动，并且会立即重启应用（发生在保存时机），注意：因为其采用的虚拟机机制，该项重启是很快的

（2）配置了true后在修改java文件后也就支持了热启动，不过这种方式是属于项目重启（速度比较快的项目重启），会清空session中的值，也就是如果有用户登陆的话，项目重启后需要重新登陆。默认情况下，/META-INF/maven，/META-INF/resources，/resources，/static，/templates，/public这些文件夹下的文件修改不会使应用重启，但是会重新加载（devtools内嵌了一个LiveReload server，当资源发生改变时，浏览器刷新）。

application.properties

#thymeleaf 配置
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
#缓存设置为false, 这样修改之后马上生效，便于调试
spring.thymeleaf.cache=false
#设置重启的目录
#spring.devtools.restart.additional-paths: src/main/java
#classpath目录下的文件夹内容修改不重启
#spring.devtools.restart.exclude: static/**
#上下文
#server.context-path=/thymeleaf

IDEA设置

当我们修改了Java类后，IDEA默认是不自动编译的，而spring-boot-devtools又是监测classpath下的文件发生变化才会重启应用，所以需要设置IDEA的自动编译：

（1）File-Settings-Compiler-Build Project automatically

（2）ctrl + shift + alt + /,选择Registry,勾上 Compiler autoMake allow when app running

此时实现的效果就是：修改类和配置文件应用会重启，修改页面应用不会重启，但会重新加载，页面会刷新。

通常情况下我不希望一修改它就重启，所以不使用自动编译，而是手动使用Ctrl+F9来重新编译

测试ThymeLeaf

首先在templates下新建index.html页面，如果没有templates文件夹就自己新建一个

index.html:

<!DOCTYPEhtml><htmllang="en"xmlns:th="http://www.w3.org/1999/xhtml"><head><metacharset="UTF-8"><title>首页</title></head><body><pth:text="${tips}"></p></body></html>

controller:

@Controller@RequestMapping("/indexManage")
publicclassIndexController {
@RequestMapping("/toIndex")
publicStringtoIndex(Modelmodel){
model.addAttribute("tips","Hello Thymeleaf");
return"index";
    }
}

访问：http://localhost:8080/indexManage/toIndex

扩展：Thymeleaf其他用法

• thymeleaf引入js、css文件：

<scripttype="text/javascript"src="../js/jquery.js"th:src="@{../js/jquery.js}"></script>

使用 @这种方式引入，在渲染后的html 里会自动生成 上下文路径，此demo没有上下文路径。

如果使用浏览器直接打开当前的 hello.html, 依然可以看到css 和 js 效果，因为前面正常的src语句会起作用

• 几种常用的语法

1、获取对象的属性值

 新建POJO

publicclassStudent {
privateIntegerid;
privateStringsname;
privateIntegerage;
getter...  setter...
}

修改Controller:

@Controller@RequestMapping("/indexManage")
publicclassIndexController {
@RequestMapping("/toIndex")
publicStringtoIndex(Modelmodel){
Studentstudent=newStudent();
student.setSname("亚瑟");
model.addAttribute("student",student);
return"index";
    }
}

在页面中获取对象的属性值：

你好!<pth:text="${student.sname}"></p>

2、包含其他页面

th:fragment   th:replace

新建include.html

<!DOCTYPEhtml><htmllang="en"xmlns:th="http://www.w3.org/1999/xhtml"><head><metacharset="UTF-8"><title>Title</title></head><body><footerth:fragment="footerOne">Copyright</footer><footerth:fragment="footerTwo(start,end)"><pth:text="|${start} - ${end} All Rights Reserved|"></p></footer></body></html>

在index页面使用

<div><divth:replace="include::footerOne"></div><divth:replace="include::footerTwo(2014,2020)"></div></div>

3、条件判断 th:if

Thymeleaf 的条件判断是 通过 th:if 来做的，只有为真的时候，才会显示当前元素

在model中添加一个boolean数据

booleanflag=true;
model.addAttribute("flag",flag);

在index页面中外层div使用：

<divth:if="${flag}"><divth:replace="include::footerOne"></div><divth:replace="include::footerTwo(2014,2020)"></div></div>

取反可以用th:if="${not flag}， 或者用th:unless="${flag}

不只是布尔值的 true 和 false, th:if 表达式返回其他值时也会被认为是 true 或 false，规则如下:

boolean 类型并且值是 true, 返回 true

数值类型并且值不是 0, 返回 true

字符类型(Char)并且值不是 0, 返回 true

String 类型并且值不是 "false", "off", "no", 返回 true

不是 boolean, 数值, 字符, String 的其他类型, 返回 true

值是 null, 返回 false

4、th:each 遍历

修改controller    记得在Student中添加构造方法

@RequestMapping("/toIndex")
publicStringtoIndex(Modelmodel){
List<Student>students=newArrayList<>();
students.add(newStudent(1,"张三",16));
students.add(newStudent(2,"李四",17));
students.add(newStudent(3,"王五",18));
model.addAttribute("students",students);
return"index";
    }

index页面：

<table><thead><tr><th>id</th><th>姓名</th><th>年龄</th></tr></thead><tbody><trth:each="student: ${students}"><tdth:text="${student.id}"></td><tdth:text="${student.sname}"></td><tdth:text="${student.age}"></td></tr></tbody></table>