Spring Boot集成Thymeleaf模板引擎

简介: Thymeleaf 是现代Java模板引擎,支持HTML静态原型与动态数据融合,前后端可协作开发。通过 `th:*` 标签绑定数据,浏览器可直接预览页面,结合Spring Boot 使用便捷,广泛应用于服务端渲染场景。
  1. Thymeleaf 介绍
    Thymeleaf 是适用于 Web 和独立环境的现代服务器端 Java 模板引擎。 Thymeleaf 的主要目标是为您的开发工作流程带来优雅的自然模板 - 可以在浏览器中正确显示的HTML,也可以用作静态原型,从而在开发团队中实现更强大的协作。
    以上翻译自 Thymeleaf 官方网站。传统的 JSP+JSTL 组合是已经过去了,Thymeleaf 是现代服务端的模板引擎,与传统的 JSP 不同,Thymeleaf 可以使用浏览器直接打开,因为可以忽略掉拓展属性,相当于打开原生页面,给前端人员也带来一定的便利。
    什么意思呢?就是说在本地环境或者有网络的环境下,Thymeleaf 均可运行。由于 thymeleaf 支持 html 原型,也支持在 html 标签里增加额外的属性来达到 “模板+数据” 的展示方式,所以美工可以直接在浏览器中查看页面效果,当服务启动后,也可以让后台开发人员查看带数据的动态页面效果。比如:

    静态原创信息


    这是静态标题


    类似与上面这样,在静态页面时,会展示静态信息,当服务启动后,动态获取数据库中的数据后,就可以展示动态数据,th:text 标签是用来动态替换文本的,这会在下文说明。该例子说明浏览器解释 html 时会忽略 html 中未定义的标签属性(比如 th:text),所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示数据。
  2. 依赖导入
    在 Spring Boot 中使用 thymeleaf 模板需要引入依赖,可以在创建项目工程时勾选 Thymeleaf,也可以创建之后再手动导入,如下:

    org.springframework.boot
    spring-boot-starter-thymeleaf

    另外,在 html 页面上如果要使用 thymeleaf 模板,需要在页面标签中引入:
  • Thymeleaf相关配置
    因为 Thymeleaf 中已经有默认的配置了,我们不需要再对其做过多的配置,有一个需要注意一下,Thymeleaf 默认是开启页面缓存的,所以在开发的时候,需要关闭这个页面缓存,配置如下。
    spring:
    thymeleaf:
    cache: false #关闭缓存
    否则会有缓存,导致页面没法及时看到更新后的效果。 比如你修改了一个文件,已经 update 到 tomcat 了,但刷新页面还是之前的页面,就是因为缓存引起的。
  • Thymeleaf 的使用
    4.1 访问静态页面
    这个和 Thymeleaf 没啥关系,应该说是通用的,我把它一并写到这里的原因是一般我们做网站的时候,都会做一个 404 页面和 500 页面,为了出错时给用户一个友好的展示,而不至于一堆异常信息抛出来。Spring Boot 中会自动识别模板目录(templates/)下的 404.html 和 500.html 文件。我们在 templates/ 目录下新建一个 error 文件夹,专门放置错误的 html 页面,然后分别打印些信息。以 404.html 为例:
    <!DOCTYPE html>







  • 这是404页面


    我们再写一个 controller 来测试一下 404 和 500 页面:
    @Controller
    @RequestMapping("/thymeleaf")
    public class ThymeleafController {

    @RequestMapping("/test404")
    public String test404() {

     return "index";
    

    }

    @RequestMapping("/test500")
    public String test500() {

     int i = 1 / 0;
     return "index";
    

    }
    }
    当我们在浏览器中输入 localhost:8080/thymeleaf/test400 时,故意输入错误,找不到对应的方法,就会跳转到 404.html 显示。 当我们在浏览器中输入 localhost:8088/thymeleaf/test505 时,会抛出异常,然后会自动跳转到 500.html 显示。
    【注】这里有个问题需要注意一下,前面的课程中我们说了微服务中会走向前后端分离,我们在 Controller 层上都是使用的 @RestController 注解,自动会把返回的数据转成 json 格式。但是在使用模板引擎时,Controller 层就不能用 @RestController 注解了,因为在使用 thymeleaf 模板时,返回的是视图文件名,比如上面的 Controller 中是返回到 index.html 页面,如果使用 @RestController 的话,会把 index 当作 String 解析了,直接返回到页面了,而不是去找 index.html 页面,大家可以试一下。所以在使用模板时要用 @Controller 注解。
    4.2 Thymeleaf 中处理对象
    我们来看一下 thymeleaf 模板中如何处理对象信息,假如我们在做个人博客的时候,需要给前端传博主相关信息来展示,那么我们会封装成一个博主对象,比如:
    public class Blogger {
    private Long id;
    private String name;
    private String pass;
    // 省去set和get
    }
    然后在controller层中初始化一下:
    @GetMapping("/getBlogger")
    public String getBlogger(Model model) {
    Blogger blogger = new Blogger(1L, "倪升武", "123456");
    model.addAttribute("blogger", blogger);
    return "blogger";
    }
    我们先初始化一个 Blogger 对象,然后将该对象放到 Model 中,然后返回到 blogger.html 页面去渲染。接下来我们再写一个 blogger.html 来渲染 blogger 信息:
    <!DOCTYPE html>









    用户编号:

    用户姓名:

    登陆密码:



    可以看出,在 thymeleaf 模板中,使用 th:object="${}" 来获取对象信息,然后在表单里面可以有三种方式来获取对象属性。如下:
    使用 th:value="*{属性名}"使用 th:value="${对象.属性名}",对象指的是上面使用 th:object 获取的对象使用 th:value="${对象.get方法}",对象指的是上面使用 th:object 获取的对象
    可以看出,在 Thymeleaf 中可以像写 java 一样写代码,很方便。我们在浏览器中输入 localhost:8080/thymeleaf/getBlogger 来测试一下数据:

    4.3 Thymeleaf 中处理 List
    处理 List 的话,和处理上面介绍的对象差不多,但是需要在 thymeleaf 中进行遍历。我们先在 Controller 中模拟一个 List。
    @GetMapping("/getList")
    public String getList(Model model) {
    Blogger blogger1 = new Blogger(1L, "倪升武", "123456");
    Blogger blogger2 = new Blogger(2L, "达人课", "123456");
    List list = new ArrayList<>();
    list.add(blogger1);
    list.add(blogger2);
    model.addAttribute("list", list);
    return "list";
    }
    接下来我们写一个 list.html 来获取该 list 信息,然后在 list.html 中遍历这个list。如下:
    <!DOCTYPE html>





    用户编号:

    用户姓名:

    登录密码:



    可以看出,其实和处理单个对象信息差不多,Thymeleaf 使用 th:each 进行遍历,${} 取 model 中传过来的参数,然后自定义 list 中取出来的每个对象,这里定义为 blogger。表单里面可以直接使用 ${对象.属性名} 来获取 list 中对象的属性值,也可以使用 ${对象.get方法} 来获取,这点和上面处理对象信息是一样的,但是不能使用 *{属性名} 来获取对象中的属性,thymeleaf 模板获取不到。
    4.4 其他常用 thymeleaf 操作
    我们来总结一下 thymeleaf 中的一些常用的标签操作,如下:
    标签 功能 例子
    th:value 给属性赋值
    th:style 设置样式 th:style="'display:'+@{(${sitrue}?'none':'inline-block')} + ''"
    th:onclick 点击事件 th:onclick="'getInfo()'"
    th:if 条件判断
    th:href 超链接 Login />
    th:unless 条件判断和th:if
    相反 Login
    th:switch 配合th:case

    th:case 配合th:switch

    administator


    th:src 地址引入 csdn logo
    th:action 表单提交的地址
    Thymeleaf 还有很多其他用法,这里就不总结了,具体的可以参考Thymeleaf的官方文档(v3.0)。主要要学会如何在 Spring Boot 中去使用 thymeleaf,遇到对应的标签或者方法,查阅官方文档即可。
    1. 总结
      Thymeleaf 在 Spring Boot 中使用非常广泛,本节课主要分析了 thymeleaf 的优点,以及如何在 Spring Boot 中集成并使用 thymeleaf 模板,包括依赖、配置,相关数据的获取、以及一些注意事项等等。最后列举了一些 thymeleaf 中常用的标签,在实际项目中多使用,多查阅就能熟练掌握,thymeleaf 中的一些标签或者方法不用死记硬背,用到什么去查阅什么,关键是要会在 Spring Boot 中集成,用的多了就熟能生巧。
    相关文章
    |
    2月前
    |
    XML Java 数据库连接
    Spring Boot集成MyBatis
    MyBatis 是一款优秀的持久层框架,支持SQL映射与注解两种方式,简化数据库操作。本文详解Spring Boot集成MyBatis的配置方法,涵盖依赖引入、YAML配置、XML与注解模式整合,并重点讲解@MapperScan、@Param、@Results等注解使用技巧,助力开发者高效实现数据访问。
    |
    监控 druid Java
    Spring Boot 3 集成 Druid 连接池详解
    在现代的Java应用中,使用一个高效可靠的数据源是至关重要的。Druid连接池作为一款强大的数据库连接池,提供了丰富的监控和管理功能,成为很多Java项目的首选。本文将详细介绍如何在Spring Boot 3项目中配置数据源,集成Druid连接池,以实现更高效的数据库连接管理。
    11778 2
    Spring Boot 3 集成 Druid 连接池详解
    |
    弹性计算 前端开发 小程序
    微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)
    当前的通用文件上传方式是通过前端上传到服务器,再由服务器转存至对象存储。这种方式在处理小文件时效率尚可,但大文件上传因受限于服务器带宽,速度较慢。例如,一个100MB的文件在5Mbps带宽的阿里云ECS上上传至服务器需160秒。为解决此问题,可以采用后端签名的方式,使微信小程序直接上传文件到阿里云OSS,绕过服务器中转。具体操作包括在JAVA后端引入相关依赖,生成签名,并在微信小程序前端使用这个签名进行文件上传,注意设置正确的请求头和formData参数。这样能提高大文件上传的速度。
    3965 1
    |
    2月前
    |
    JSON Java 数据格式
    Spring Boot中的全局异常处理
    本文介绍了Spring Boot项目中如何实现全局异常处理。通过@ControllerAdvice和@ExceptionHandler统一捕获系统异常与自定义业务异常,结合统一JSON返回结构,避免代码耦合,提升可维护性。同时利用枚举管理异常码,实现异常信息的集中管理和友好提示,适用于前后端分离及微服务架构,保障接口返回一致性,降低维护成本。
    |
    2月前
    |
    缓存 JSON 前端开发
    Spring Boot集成Thymeleaf模板引擎
    Thymeleaf 是现代Java模板引擎,支持静态原型与动态数据融合,可直接浏览器预览,提升前后端协作效率,适用于Spring Boot项目,实现页面自然展示与高效开发。
    Spring Boot集成Thymeleaf模板引擎
    |
    5月前
    |
    人工智能 Java 机器人
    基于Spring AI Alibaba + Spring Boot + Ollama搭建本地AI对话机器人API
    Spring AI Alibaba集成Ollama,基于Java构建本地大模型应用,支持流式对话、knife4j接口可视化,实现高隐私、免API密钥的离线AI服务。
    4217 2
    基于Spring AI Alibaba + Spring Boot + Ollama搭建本地AI对话机器人API