spring boot 基础学习 - thymeleaf页面模板技术

最新推荐文章于 2024-07-30 14:09:22 发布

破小孩儿乖

最新推荐文章于 2024-07-30 14:09:22 发布

阅读量5.2k

点赞数

分类专栏： spring boot 学习笔记文章标签： thymeleaf 模板技术

本文链接：https://blog.csdn.net/bugs4j/article/details/79165888

版权

本文介绍了Spring Boot结合Thymeleaf实现前后端分离的页面模板技术，详细讲解了Thymeleaf的特点，包括html格式、前后端分离以及页面原型。内容涵盖Thymeleaf的依赖、配置、语法，如th:text、th:utext、变量、URL、消息表达式、对象选择表达式、运算符、条件判断、循环和工具集等，帮助开发者理解如何使用Thymeleaf进行高效开发。

摘要由CSDN通过智能技术生成

随着互联网技术的发展，页面静态化的需求越来越明显，传统的jsp动态页面逐渐的被html静态页面+ajax异步请求所替代，模板技术解决了静态页面的数据更新问题。这篇博客主要是结合spring boot 来介绍一下 thymeleaf模板技术。

thymelaaf的特点：
a.html格式，

模板直接交给浏览器渲染。

b.实现真正意义上的前后端分离，

在标签上引用了thymeleaf表达式后，当页面被浏览器解析后，标签内原有的内容将被表达式的值替换，前端人员只需要将页面演示内容填写好，后台人员你需要要编写正确的表达式返回正确的值，页面就能达到想要的效果。

c.页面即原型，所见即所得

在Web开发过程中一个绕不开的话题就是前端工程师与后端工程师的协作，在传统Java Web开发过程中，前端工程师和后端工程师一样，也需要安装一套完整的开发环境，然后各类Java IDE中修改模板、静态资源文件，启动/重启/重新加载应用服务器，刷新页面查看最终效果。

但实际上前端工程师的职责更多应该关注于页面本身而非后端，使用JSP，Velocity等传统的Java模板引擎很难做到这一点，因为它们必须在应用服务器中渲染完成后才能在浏览器中看到结果，而Thymeleaf从根本上颠覆了这一过程，通过属性进行模板渲染不会引入任何新的浏览器不能识别的标签，例如JSP中的<form:input>，不会在Tag内部写表达式。整个页面直接作为HTML文件用浏览器打开，几乎就可以看到最终的效果，这大大解放了前端工程师的生产力，它们的最终交付物就是纯的HTML/CSS/JavaScript文件。

1.依赖

spring boot 余thymeleaf整合非常的方便，只需要在pom中添加一个依赖即可：

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

spring boot 默认会将templates目录映射为模板目录，因此你只需要讲你的模板放在templates目录下即可。

2.配置

添加了上述依赖之后，spring boot实际上为我们初始化了很多基本配置，我们只需要简单的配置一下页面类型即可，这些配置都简单易懂：

#thymeleaf start
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=false #关闭页面缓存，这样才能实时的看到页面更改
#thymeleaf end

然后你就可以开始编写你的页面模板了，但是需要注意，为了让thymeleaf识别一个模板，你必须使用下面的html头标签：

<html xmlns:th="http://www.thymeleaf.org">
...
</html>

这样thymeleaf才能真缺德解析！

下面就可以开始编写模板了！

3.语法

thymeleaf表达式风格和jsp的EL表达式，Struts的OGNL表达式风格非常类似，所以如果你熟悉上面的表达式的话，thymeleaf的表达式对你来说也和简单,不同的是，thymeleaf的表达值写在html标签的开始标签内，而不像EL表达式那样，可以充斥在页面的任何位置！

3.1 引入普通文本，数字 th:text

尽管使用模板动态的为页面添加普通文本并没有什么意义，但是还是值得一提，铜鼓他，我们将引入thymeleaf中一个常用的标签th：text="文本内容";

这个标签的作用就是将文本内容填充到表达式作用的标签内：例如在模板中这样写

<p th:text="'你好，thymeleaf~~~"> hello world!</p>

显示到页面的效果为：

3.2引入html代码

通th:text的方式，我们只能想页面引入纯文本，即便是你提供的是带有html格式的代码

最低0.47元/天解锁文章