Springboot整合Thymeleaf并详解热部署

简介: 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>

    image.gif

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

    20201117132906970.png

    说明:

    (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

    image.gif

    IDEA设置

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

    (1)File-Settings-Compiler-Build Project automatically

    10.png

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

    11.png

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

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

    测试ThymeLeaf

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

    index.html:

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

    image.gif

    controller:

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

    image.gif

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

    12.png

    扩展:Thymeleaf其他用法

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

      image.gif

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

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

      13.png

        • 几种常用的语法

        1、获取对象的属性值

         新建POJO

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

        image.gif

        修改Controller:

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

        image.gif

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

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

        image.gif

        14.png

        2、包含其他页面

        th:fragment   th:replace

        新建include.html

        <!DOCTYPE html><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>

        image.gif

        在index页面使用

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

        image.gif

        15.png

        3、条件判断 th:if

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

        在model中添加一个boolean数据

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

        image.gif

        在index页面中外层div使用:

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

        image.gif

        取反可以用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";
            }

        image.gif

        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>

        image.gif

        16.png

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

        相关文章
        |
        16天前
        |
        前端开发 Java Spring
        SpringBoot项目thymeleaf页面支持词条国际化切换
        SpringBoot项目thymeleaf页面支持词条国际化切换
        45 2
        |
        2月前
        |
        Java 网络架构
        springboot配合thymeleaf,调用接口不跳转页面只显示文本
        springboot配合thymeleaf,调用接口不跳转页面只显示文本
        121 0
        |
        3月前
        |
        前端开发 Java Spring
        springboot+thymeleaf+bootstrap 超级无敌简洁的页面展示 商城管理页面
        这篇文章展示了一个使用Spring Boot、Thymeleaf和Bootstrap框架开发的简洁、响应式的商城管理页面,包括美食介绍、产品详情、购物车等功能,适合初学者学习和使用。
        springboot+thymeleaf+bootstrap 超级无敌简洁的页面展示 商城管理页面
        |
        3月前
        |
        Java 数据库 Spring
        springboot+thymeleaf中前台页面展示中、将不同的数字替换成不同的字符串。使用条件运算符
        这篇文章介绍了如何在Spring Boot和Thymeleaf框架中使用条件运算符来根据数字字段的值动态替换显示不同的字符串,例如将订单状态的数字0和1替换为"未付款"和"已付款"等。
        springboot+thymeleaf中前台页面展示中、将不同的数字替换成不同的字符串。使用条件运算符
        |
        5月前
        |
        前端开发 Java Spring
        Spring Boot中使用Thymeleaf进行页面渲染
        Spring Boot中使用Thymeleaf进行页面渲染
        |
        前端开发 Java
        SpringBoot-6-模板Thymeleaf常用标签
        SpringBoot-6-模板Thymeleaf常用标签
        84 0
        SpringBoot-6-模板Thymeleaf常用标签
        |
        6月前
        |
        SQL 前端开发 JavaScript
        Spring Boot + Thymeleaf 使用PageHelper实现分页
        Spring Boot + Thymeleaf 使用PageHelper实现分页
        |
        6月前
        |
        SQL 前端开发 Java
        springboot + thymeleaf + layui 初尝试
        springboot + thymeleaf + layui 初尝试
        |
        6月前
        |
        Java
        SpringBoot thymeleaf自定义错误页面
        SpringBoot thymeleaf自定义错误页面
        61 0
        |
        6月前
        |
        XML 前端开发 Java
        Spring Boot的Web开发之Thymeleaf模板引擎的解析及使用(Thymeleaf的基础语法以及常用属性)
        Spring Boot的Web开发之Thymeleaf模板引擎的解析及使用(Thymeleaf的基础语法以及常用属性)
        132 0