thymeleaf页面模板（thymeleaf生成静态页面）

本文目录一览：

• 1、SpringBoot Security 整合thymeleaf模板自定义登录页面，按需提示错误信息
• 2、使用thymeleaf模板引擎抽取公共页面
• 3、「SpringBoot实战」视图技术-Thymeleaf

SpringBoot Security 整合thymeleaf模板自定义登录页面，按需提示错误信息

使用SpringBoot Security进行登录验证，可以结合具体的业务需求来使用。在

SpringBoot Security前后端分离，登录退出等返回json

一文中，描述了前后端分离的情况下，如何进行登录验证和提示错误信息的。现在针对自定义的登录页面，能够精确地提示错误信息，做一个简单的演示demo。

本文使用的SpringBoot版本是2.1.4.RELEASE，下面直接进入使用阶段。

加上这个架包，重启项目后，整个项目就配置了登录拦截和验证。

不输入用户名和密码，直接点击登录时，会有提示信息，输入框的颜色还会变红。查看源码，可以发现，架包默认的登录页面提交方式为表单提交，method为post，并且默认是开启csrf的，在表单里自动生成了一个隐藏域，防止跨域提交，确保请求的安全性。

输入错误的用户名或密码，可以看到页面进行了跳转，跳转后的页面又回到了登录页，只是url地址后面多了一个参数，页面提示错误信息。

从页面源码，我们可以获得以下几个方面的信息：

如果页面是我们自己自定义的，如果要使用默认的过滤器获取登录信息，则必须使用post方式进行提交，如果使用ajax json的方式进行提交，则获取不到参数。

接下来自定义一个登录页面，为了快速构建登录页面，这里使用了thymeleaf模板。

在这个配置中，对登录页面进行了设置，设置使用自定义的登录页面，在Controller需要添加对应的页面渲染。

一个很丑的登录页面，这不是重点。重点是，登录名和密码正确时，页面可以正确的跳转，输入错误时，可以在登录页面进行信息提示。

在MyCustomUserService类中，我们设置了用户名为admin，密码为123456；输入其他的用户名称时，提示用户不存在；不输入用户名称，提示用户不能为空；密码不是123456时，提示密码错误；输入admin，123456时，页面前往index页面，下面进行验证。

使用thymeleaf模板引擎抽取公共页面

1、把公共部分放到一个公共页面common.html,注意：页面里边需要使用thymeleaf的名称空间xmlns:th=""

2、使用thymeleaf中的fragment定义截取片段th：fragment，或者使用id定义

3、定义片段完成后，需要参照官方文档里边的内容，引用片段，有th:insert、th:replace、th:include

这三种内容的区别是：

（1）th:insert:

总结：insert会把标签里边里面的所有内容给插入进去,div依旧保存

（2）th:replace方法

区别是div不见了，也就是说，把div给替换掉了，只保留片段的所有内容

（3）th:include方法

使用include之后，是把片段里边的内容给包含进去

4、演示使用include插入公共片段：（1）先把它的公共样式给删除

（2）使用th:include插入

「SpringBoot实战」视图技术-Thymeleaf

在一个Web应用中，通常会采用MVC设计模式实现对应的模型、视图和控制器，其中，视图是用户看到并与之交互的界面。对最初的Web应用来说，视图是由HTML元素组成的静态界面；而后期的Web应用更倾向于使用动态模板技术，从而实现前后端分离和页面的动态数据展示。Spring Boot框架为简化项目的整体开发，提供了一些视图技术支持，并主要推荐整合模板引擎技术实现前端页面的动态化内容。本文对SpringBoot常用的Thymeleaf进行整合。

Thymeleaf是一种现代的基于服务器端的Java模板引擎技术，也是一个优秀的面向Java的XML、XHTML、HTML5页面模板，它具有丰富的标签语言、函数和表达式，在使用Spring Boot框架进行页面设计时，一般会选择 Thymeleaf模板。我们在这里学习Thymeleaf 常用的标签、表达式。

Thymeleaf标签

使用标签只需要加上一个命名空间就可以了。 即修改原html的第二行就可以了。

变量表达式${..}主要用于获取上下文中的变量值，示例代码如下。

这是标题

- 使用了Thymeleaf模板的变量表达式${..}用来动态获取p标签中的内容 - 如果当前程序没有启动或者当前上下文中不存在title变量，该片段会显示标签默认值“这是标题”； - 如果当前上下文中存在title 变量并且程序已经启动，当前p标签中的默认文本内容将会被tite变量的值所替换，从而达到模板引擎页面数据动态替换的效果。

Thymeleaf为变量所在域提供了一些内置对象

结合上述内置对象的说明，假设要在Thymeleaf模板擎页面中动态获取当前国家信息，可以使用#locale内置对象

选择交量表达式和变量表达式用法类似，一般用于从被选定对象而不是上下文中获取属性值，如果没有选定对象，则和变量表达式一样，示例代码如下。

消息表达式#{..}主要用于Thymeleaf模板页面国际化内容的动态替换和展示。使用消息表这式#{..}进行国际化设置时，还需要提供一些国际化配置文件。关于消息表达式的使用，下文写国际化时会详细说明。

链接表达式@{..}一般用于页面跳转或者资源的引入，在Web开发中占据着非常重要的地位，并且使用也非常频繁。

片段表达式~{..}是一种用来将标记片段移动到模板中的方法。其中，最常见的用法是使用th:insert或th:replace 属性插入片段

Spring Boot默认设置了静态资源的访问路径，默认将/**所有访问映射到以下目录。

我们创建一个springboot项目用于本次实验。项目名为springboot_01_thyme。java8，springboot2.6.6

创建一个LoginController类用于数据替换效果测试。

我们写一个login.html进行测试。我们导入一个bootstrap的样式到static/login里面，并且自己定义一些css。

最后我们通过访问 可以查看效果

在resources目录下创建名为i18n的文件夹，数一数这个单词多少个字母internationalization，就知道为什么叫i18n了。

然后我们在i18n文件夹下面创建login.properties、 login_zh_CN.properties、 login_en_US.properties文件。

目录结构：这个Resource Bundle 'login'时idea自动创建的，我们不需要管，只需要完成我们的就行。

login.properties

login_zh_CN.properties

login_en_US.properties

然后我们在配置文件application.properties里面添加代码

我们在config包下面创建一个MyLocalResovel类，自定义国际化功能区域信息解析器。

这里我们基本就完成了，但是在访问中文的时候会出现乱码现象。

我们打开idea的file-settings-file Encodings.

将Default encoding for properties的编码改为utf-8，同时勾选Transparentnative-to-ascii conversion

然后我们重新编写login.properties和其他相关的

但是这种方法1只对当前项目有效。下次创建还是使用GBK编码

本文我们主要了解了Thymeleaf的基本语法、标签、表达式、基本使用、同时还实现了页面登录页得国际化。

本文作者：hjk-airl

本文链接：

关于thymeleaf页面模板和thymeleaf生成静态页面的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。