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:

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

controller:

@Controller
@RequestMapping("/indexManage")
public class IndexController {

    @RequestMapping("/toIndex")
    public String toIndex(Model model){
        model.addAttribute("tips","Hello Thymeleaf");
        return "index";
    }
}

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

扩展:Thymeleaf其他用法

  • thymeleaf引入js、css文件:
<script type="text/javascript" src="../js/jquery.js" th:src="@{../js/jquery.js}"></script>

使用 @这种方式引入,在渲染后的html 里会自动生成 上下文路径,此demo没有上下文路径。
 如果使用浏览器直接打开当前的 hello.html, 依然可以看到css 和 js 效果,因为前面正常的src语句会起作用

  • 几种常用的语法

1、获取对象的属性值

  新建POJO

public class Student {

    private Integer id;

    private String sname;

    private Integer age;

    getter...  setter...

}

修改Controller: 

@Controller
@RequestMapping("/indexManage")
public class IndexController {

    @RequestMapping("/toIndex")
    public String toIndex(Model model){
        Student student = new Student();
        student.setSname("亚瑟");
        model.addAttribute("student",student);
        return "index";
    }
}

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

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

2、包含其他页面

th:fragment   th:replace

新建include.html

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

 在index页面使用

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

3、条件判断 th:if

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

在model中添加一个boolean数据

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

在index页面中外层div使用:

<div th:if="${flag}">
    <div th:replace="include::footerOne"></div>
    <div th: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")
    public String toIndex(Model model){
       List<Student> students = new ArrayList<>();
        students.add(new Student(1,"张三",16));
        students.add(new Student(2,"李四",17));
        students.add(new Student(3,"王五",18));
        model.addAttribute("students",students);
        return "index";
    }

index页面:

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

 更多用法在后续的实战篇再说吧

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Spring Boot 可以很方便的集成 Thymeleaf 模板引擎,下面是整合步骤: 1.添加 Thymeleaf 依赖 在 pom.xml 文件中添加以下依赖: ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> ``` 2.配置 Thymeleaf 模板 在 `src/main/resources/templates/` 目录下创建一个 thymeleaf 模板文件,例如 index.html: ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Thymeleaf Demo</title> </head> <body> <h1 th:text="${message}">Hello World!</h1> </body> </html> ``` 其中 `${message}` 表示从后台传递过来的数据。 3.配置视图解析器 在 application.properties 或 application.yml 文件中添加以下配置: ```yaml spring: thymeleaf: cache: false prefix: classpath:/templates/ suffix: .html encoding: utf-8 ``` 其中: - `cache` 表示是否开启缓存 - `prefix` 表示模板文件所在目录 - `suffix` 表示模板文件后缀 - `encoding` 表示模板文件编码 4.在 Controller 中使用 Thymeleaf 在 Controller 中设置需要传递到前端的数据,并指定要返回的模板文件名: ```java @Controller public class DemoController { @GetMapping("/hello") public String hello(Model model) { model.addAttribute("message", "Hello, Thymeleaf!"); return "index"; } } ``` 其中: - `@Controller` 表示这是一个控制器 - `@GetMapping("/hello")` 表示处理 GET 请求,路径为 /hello - `Model` 用于存储需要传递到前端的数据 - `return "index"` 表示返回名为 index 的模板文件 5.运行项目 启动 Spring Boot 项目,访问 http://localhost:8080/hello 即可看到效果。 以上就是 Spring Boot 整合 Thymeleaf 的基本步骤,希望能对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LoneWalker、

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值