《Spring Boot框架入门到实践》(15)spring boot集成Thymeleaf

认识Thymeleaf(百里香的叶子)

在这里插入图片描述
Thymeleaf官网
以下引用自该博主
官网部分翻译:

  • Thymeleaf是用来开发Web和独立环境项目的服务器端的Java模版引擎

  • Spring官方支持的服务的渲染模板中,并不包含jsp。而是Thymeleaf和Freemarker等,而Thymeleaf与SpringMVC的视图技术,及SpringBoot的自动化配置集成非常完美,几乎没有任何成本,你只用关注Thymeleaf的语法即可。

Thymeleaf的特点:

  • 动静结合:Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查 看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。

  • 开箱即用:它提供标准和spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果,避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

  • 多方言支持:Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。

  • 与SpringBoot完美整合,SpringBoot提供了Thymeleaf的默认配置,并且为Thymeleaf设置了视图解析器,我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别,就是在模板语法上有区别。

spring boot集成Thymeleaf

  1. 在Manven中引入Thymeleaf的依赖,加入以下依赖即可
    还需要添加web依赖
  <!-- thymeleaf-->
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
  </dependency>
  1. 在Spring boot的核心配置文件application.properties中对Thymeleaf进行配置
    注意
    #开发阶段,建议关闭thymeleaf的缓存
    spring.thymeleaf.cache= false
    #使用遗留的html5以去掉对htm标签的校验
    spring.thymeleaf.mode=LEGACYHTML5
    在使用springboot的过程中,如果使用thymeleaf作为模板文件,则要求HTML格式必须为严格的html5格式,必须有结束标签,否则会报错;
    如果不想对标签进行严格的验证,使用spring.thymeleaf.mode=LEGACYHTML5去掉验证,去掉该验证;
#模板路径
spring.thymeleaf.prefix=classpath:/templates/
#模板后缀
spring.thymeleaf.suffix=.html
#编码方式
spring.thymeleaf.encoding=UTF-8
#校验HTML5格式
spring.thymeleaf.mode=LEGACYHTML5
#关闭缓存,在开发过程中可立即看到页面修改结果
spring.thymeleaf.cache=false
  1. 写一个Controller去映射到模板页面(和SpringMVC基本一致)比如:
    在这里插入图片描述
  2. src\main\resources\templates目录下新建一个index.html页面展示数据
    在这里插入图片描述
    注意:需要在HTML页面的标签中添加属性—xmlns:th="http://www.thymeleaf.org"
    导入 Thymeleaf 命名空间,接下来再需要填充数据的 HTML 原生标签中使用 th:text 完成数据填充,语法与 EL 表达式一致,通过 ${业务数据 key 值} 即可完成。
    Spring boot使用thymeleaf作为试图展示,约定将模板文件放置在src\main\resources\templates目录下,静态资源放置在src\main\resources\static目录下
    在这里插入图片描述
  3. 运行
    在这里插入图片描述
    在这里插入图片描述
    展示出msg的值,说明集成成功了
发布了50 篇原创文章 · 获赞 13 · 访问量 1873

猜你喜欢

转载自blog.csdn.net/qq_43581078/article/details/103593306