SpringBoot页面展示Thymeleaf

一、SpringBoot页面展示Thymeleaf

1、开发传统Java WEB工程时，我们可以使用JSP页面模板语言，但是在SpringBoot中已经不推荐使用了。SpringBoot支持如下页面模板语言

2、上面并没有列举所有SpringBoot支持的页面模板技术。其中Thymeleaf是SpringBoot官方所推荐使用的，下面来谈谈Thymeleaf一些常用的语法规则。

3、要想使用Thhymeleaf，首先要在pom.xml文件中单独添加Thymeleaf依赖。

4、 Spring Boot默认存放模板页面的路径在 src/main/resources/templates或者 src/main/view/templates，这个无论是使用什么模板语言都一样，当然默认路径是可以自定义的，不过一般不推荐这样做。另外Thymeleaf默认的页面文件后缀是.html。

5、在MVC的开发过程中，我们经常需要通过 Controller将数据传递到页面中，让页面进行动态展示。

6、创建一个Controller对象，在其中进行参数的传递

7、在SpringBoot默认的页面路径下创建show.html文件，内容如下

8、可以看到在 p标签中有 th:text属性，这个就是thymeleaf的语法，它表示显示一个普通的文本信息。

9、如果我们要显示的信息是存在资源文件中的，同样可以在页面中显示，例如资源文件中定义了内容 welcome.msg=欢迎{0}光临！。可以在页面中将其显示

10、另外，在 th:utext中还能做一些基础的数学运算

11、如果我们想要传递到的页面的信息，它本身是带有CSS样式的，这个时候如何在页面中将携带的样式信息也显示出来？此时我们的控制器方法这样写。

12、此时页面中需要借助 th:utext属性进行显示

13、通过浏览器查看页面源码可以看出 th:utext和 th:text的区别是： th:text会对<和>进行转义，而 th:utext不会转义。

14、我们常常需要将一个bean信息展示在前端页面当中。

15、上面给出了两种展现方式，一种是通过${属性}，另外一种是通过{属性}。

16、关于“${属性}”和“{属性}”的区别？

17、$访问完整信息，而访问指定对象中的属性内容，如果访问的只是普通的内容两者没有区别；

18、在 thymeleaf之中提供有相应的集合的处理方法，例如：在使用 List集合的时候可以考虑采用 get()方法获取指定索引的数据，那么在使用 Set集合的时候会考虑使用 contains()来判断某个数据是否存在，使用 Map集合的时候也希望可以使用 containsKey()判断某个 key是否存在，以及使用get()根据 key获取对应的 value，而这些功能在之前并不具备，下面来观察如何在页面中使用此类操作

19、在传统WEB工程开发时，路径的处理操作是有点麻烦的。SpringBoot中为我们简化了路径的处理。

20、页面之间的跳转也能通过@{}来实现

21、虽然在这种模版开发框架里面是不提倡使用内置对象的，但是很多情况下依然需要使用内置对象进行处理，所以下面来看下如何在页面中使用JSP内置对象。

22、 thymeleaf考虑到了实际的开发情况，因为 request传递属性是最为常用的，但是 session也有可能使用，例如：用户登录之后需要显示用户 id，那么就一定要使用到 session，所以现在必须增加属性范围的形式后才能够正常使用。在 thymeleaf里面也支持有 JSP内置对象的获取操作，不过一般很少这样使用。

23、所有的页面模版都存在各种基础逻辑处理，例如：判断、循环处理操作。在 Thymeleaf之中对于逻辑可以使用如下的一些运算符来完成，例如：and、or、关系比较（>、<、>=、<=、==、!=、lt、gt、le、ge、eq、ne）。

24、通过控制器传递一些属性内容到页面之中：

25、在实际开发过程中常常需要对数据进行遍历展示，一般会将数据封装成list或map传递到页面进行遍历操作。

26、我们常常需要在一个页面当中引入另一个页面，例如，公用的导航栏以及页脚页面。thymeleaf中提供了两种方式进行页面引入。

27、可以看到页面当中还存在一个变量projectName，这个变量的值可以在引入页面中通过 th:with="projectName=百度"传过来。

二、vue和thymeleaf区别

1、Vue和Thymeleaf是两种不同的前端框架，它们的主要区别在于使用场景、开发方式和功能特点。

2、Vue.js主要用于构建用户界面和单页面应用，通过组件化的开发方式，实现页面的模块化、可复用和可维护。它侧重于前端开发和视图层的处理，可以与多种后端技术结合使用。

3、Thymeleaf则是一个用于Web和独立环境的现代服务器端Java模板引擎。它主要用于服务端渲染，能够直接生成HTML页面，并可以与Spring等后端框架无缝集成。

4、Vue.js采用前端开发的常见模式，通过JavaScript实现前后端数据交互和页面渲染。Vue支持响应式编程，具有声明式渲染系统，通过组件系统实现页面的模块化开发。

5、Thymeleaf则是服务器端模板引擎，通过Java代码和Thymeleaf模板结合，实现页面渲染。它支持HTML、XML等多种格式，并提供了丰富的标签和表达式，方便开发者在模板中进行数据绑定和逻辑处理。

6、Vue.js具有轻量级、灵活性和数据驱动视图的特点。Vue通过虚拟DOM实现高效的数据更新和渲染，提供丰富的内置组件和指令，方便开发者快速构建用户界面。

7、Thymeleaf则注重服务端渲染的可靠性和安全性。它具有高度的灵活性，支持多种开发场景，并提供了丰富的模板语法和标签库，方便开发者在模板中进行数据绑定和逻辑处理。Thymeleaf还可以与Java后端技术无缝集成，方便开发者进行后端开发。

8、Vue和Thymeleaf分别适用于不同的开发场景和需求。Vue主要用于前端开发和视图层的处理，通过组件化的开发方式构建用户界面；而Thymeleaf则主要用于服务端渲染，通过Java代码和模板结合实现页面渲染。两者各有优势，根据具体需求和项目特点选择合适的框架进行开发。

三、别再写jsp了,Thymeleaf它不香吗

1.啥是 Thymeleaf

在学 Thymeleaf之前我们先看一下使用 jsp开发遇到的主要问题：

在学 Thymeleaf之前我们先看一下使用 jsp开发遇到的主要问题：

1.页面包含大量 java代码，代码太混乱

2.jsp技术已经是很多年前的老技术了，现在的主流框架都不推荐使用，基本被淘汰了。

虽然 jsp基本被淘汰了，但是它的技术替代品如雨后春笋，层不出穷。

我们都知道传统的页?开发通常采? HTML+ JS技术，?现在?部分?站都采?标签化+模块化的设计。

模板引擎技术就是根据这种?式，使?户界?与业务数据分离?产?的。

它可以?成特定格式的?档，?于?站的模板引擎就会?成?个标准的 HTML?档在原有的 HTML页?中来填充数据，最终达到渲染页?的?的。

模板引擎技术说白了就是把数据和页?整合在?起的技术。

Thymeleaf是一种可以替代 jsp的模板引擎技术。它有如下优点：

1.与 SpringBoot完美整合：SpringBoot提供了 Thymeleaf的默认配置，我们可以像以前操作 jsp一样来操作 Thymeleaf。

2.开箱即用：支持 JSTL格式语法。

3.多方言支持：Thymeleaf提供 spring标准方言和一个与 SpringMVC完美集成的可选模块，可以快速的实现表单绑定、国际化等功能。

在 springboot的配置文件中，我们配置了 thymeleaf的默认前缀和后缀。

3.html文件引入 Thymeleaf的命名空间

html文件必须引入 thymeleaf的命名空间才能使用相关语法。

作用：如果变量有值，则替换标签里面的默认值，否则展示标签的默认值。

作用：用来配置 form表单的请求路径

作用：条件判断，如果判断为真就显示数据或者执行相关操作。

场景：用户登录成功之后，展示用户信息和用户列表。