当前位置: 首页 > news >正文

重学SpringBoot3-集成Thymeleaf

更多SpringBoot3内容请关注我的专栏:《SpringBoot3》
期待您的点赞👍收藏⭐评论✍

重学SpringBoot3-集成Thymeleaf

  • 1. 添加Thymeleaf依赖
  • 2. 配置Thymeleaf属性(可选)
  • 3. 创建Thymeleaf模板
  • 4. 创建一个Controller
  • 5. 运行应用并访问页面
  • Thymeleaf基本语法
    • 小技巧
  • 国际化
    • 步骤 1: 创建资源文件
    • 步骤 2: 配置国际化组件
    • 步骤 3: 使用国际化资源

Thymeleaf主页

Thymeleaf 是一个现代的服务器端Java模板引擎,用于Web和独立环境。它能够处理HTML、XML、JavaScript、CSS甚至纯文本。Thymeleaf 的主要目标是提供一个优雅和高度可维护的创建模板的方式。为了实现这一点,它建立在自然模板的概念上,这意味着你可以将静态原型直接转换成动态模板,无需更改标记。 凭借 Spring Framework 的模块、与你喜爱的工具的大量集成以及插入你自己的功能的能力,Thymeleaf 非常适合现代 HTML5 JVM Web 开发。

1. 添加Thymeleaf依赖

首先,你需要在项目的pom.xml文件中加入Spring Boot的Thymeleaf Starter依赖。如果你使用Maven构建项目,可以添加如下依赖:

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

如果你使用Gradle,可以在build.gradle文件中添加:

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

2. 配置Thymeleaf属性(可选)

虽然Spring Boot的自动配置已经提供了一个合理的默认配置:

org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties

Thymeleaf自动配置类

但你仍然可以通过 application.propertiesapplication.yml 文件自定义 Thymeleaf 的一些属性。例如:

# 设置Thymeleaf模板文件的前缀位置(默认是`src/main/resources/templates`)
spring.thymeleaf.prefix=classpath:/templates/
# 设置模板文件的后缀(默认是`.html`)
spring.thymeleaf.suffix=.html
# 设置模板模式(默认是HTML5,Thymeleaf 3中为`HTML`)
spring.thymeleaf.mode=HTML
# 开启模板缓存(开发时建议关闭,生产时开启)
spring.thymeleaf.cache=false

3. 创建Thymeleaf模板

接下来,在 src/main/resources/templates 目录下创建 Thymeleaf 模板文件。例如,创建一个名为 greeting.html 的模板:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>Greeting</title>
</head>
<body><h1 th:text="'Hello, ' + ${name} + '!'">Hello, World!</h1>
</body>
</html>

4. 创建一个Controller

现在,创建一个Spring MVC Controller,用于处理用户请求并返回Thymeleaf模板视图:

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;@Controller
public class GreetingController {@GetMapping("/greeting")public String greeting(@RequestParam(name="name", required=false, defaultValue="World") String name, Model model) {model.addAttribute("name", name);return "greeting";}
}

在这个Controller中,greeting 方法处理 /greeting 路径的 GET 请求,接受一个名为 name 的请求参数,并将其添加到模型中。然后,它返回 greeting 作为视图的名称,Spring Boot 会自动使用 Thymeleaf 解析器解析 greeting.html 模板。

5. 运行应用并访问页面

启动你的 Spring Boot 应用,并在浏览器中访问 http://localhost:8080/greeting。你应该能看到基于提供的 name 参数(如果没有提供,则默认为"World")渲染的问候消息。

通过这些步骤,你就可以在 Spring Boot 3 项目中使用 Thymeleaf 模板引擎来渲染动态 Web 页面了。这种方式提供了一个强大而灵活的方法来构建交互式的 Web 应用。

接下来将介绍下 Thymeleaf 的一些常用语法,以便更有效地使用它来创建动态 Web 页面。

Thymeleaf基本语法

Thymeleaf 的表达式和操作主要在HTML模板中以属性的形式出现,使用th:前缀。以下是一些常用的Thymeleaf语法:

  1. 变量表达式 ${...}:用于访问模型中的数据。

    <p th:text="${message}">默认消息</p>
    
  2. 选择变量表达式 *{...}:用于选择上下文变量的属性,通常与th:object结合使用。

    <div th:object="${user}"><p>Name: <span th:text="*{name}">Name</span></p><p>Email: <span th:text="*{email}">Email</span></p>
    </div>
    
  3. 消息表达式 #{...}:用于国际化和消息。

    <p th:text="#{welcome.message}">Welcome to our site!</p>
    
  4. 链接URL表达式 @{...}:用于生成URL。

    <a th:href="@{/login}">Login</a>
    
  5. 条件表达式 ifunless:用于条件渲染元素。

    <div th:if="${user.isAdmin}"><p>Admin features</p>
    </div>
    <div th:unless="${user.isAdmin}"><p>Regular user features</p>
    </div>
    
  6. 循环 th:each:用于遍历集合。

    <ul><li th:each="user : ${users}" th:text="${user.name}">User Name</li>
    </ul>
    
  7. 属性值替换 th:attr:用于动态设置HTML属性的值。

    <input type="text" th:attr="placeholder=#{enter.username},value=${user.name}"/>
    
  8. 内联文本 [[]][(...)]:用于在HTML属性或文本中直接显示变量和表达式的值。

    <p th:text="'Welcome, ' + ${user.name} + '!'">Welcome, User!</p>
    <!-- 内联使用 -->
    <p>Welcome, [[${user.name}]]!</p>
    
  9. 布局属性:Thymeleaf + Thymeleaf Layout Dialect 允许使用布局来重用模板片段,如th:fragmentth:replace

    <!-- 定义片段 -->
    <div th:fragment="headerFragment"><p>Header content here...</p>
    </div>
    <!-- 引用片段 -->
    <div th:replace="~{fragments/common :: headerFragment}"></div>
    

小技巧

  • 格式化:Thymeleaf 提供了一系列的 Utility 对象(#dates, #calendars, #numbers, #strings等)来帮助格式化数据。

    • param:请求参数对象
    • session:session对象
    • application:application对象
    • #execInfo:模板执行信息
    • #messages:国际化消息
    • #uris:uri/url工具
    • #conversions:类型转换工具
    • #dates:日期工具,是java.util.Date对象的工具类
    • #calendars:类似#dates,只不过是java.util.Calendar对象的工具类
    • #temporals: JDK8+ **java.time** API 工具类
    • #numbers:数字操作工具
    • #strings:字符串操作
    • #objects:对象操作
    • #bools:bool操作
    • #arrays:array工具
    • #lists:list工具
    • #sets:set工具
    • #maps:map工具
    • #aggregates:集合聚合工具(sum、avg)
    • #ids:id生成工具
  • 条件类:可以使用 th:classappend 根据条件动态添加CSS类,而不是完全替换 class 属性。

  • JavaScript内联:Thymeleaf 支持在 JavaScript 代码块中内联变量,使用 th:inline="javascript"

  • 引入 devtools 依赖:修改页面后;ctrl+F9 刷新效果;

国际化

Spring Boot 3 对国际化(Internationalization,简称 i18n)的支持继承自 Spring Framework,并且提供了一系列的便捷配置来帮助开发者实现应用的国际化。国际化使得你的应用可以支持多种语言和地区,主要通过使用资源文件来实现,这些资源文件包含了特定语言或地区的文本信息。

实现步骤

步骤 1: 创建资源文件

Spring Boot 在类路径根下查找 messages 资源绑定文件。文件名为:messages.properties,多语言可以定义多个消息文件,命名为 messages_区域代码.properties

# messages_en_US.properties
welcome.message=Welcome to our application!# messages_zh_CN.properties
welcome.message=欢迎使用我们的应用程序!

步骤 2: 配置国际化组件

需要配置 Spring Boot 应用以使用这些资源文件。这通常通过定义一个 MessageSource bean 和一个 LocaleResolver bean 来完成。

import org.springframework.context.MessageSource;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.support.ReloadableResourceBundleMessageSource;
import org.springframework.web.servlet.LocaleResolver;
import org.springframework.web.servlet.i18n.SessionLocaleResolver;import java.util.Locale;@Configuration
public class InternationalizationConfig {@Beanpublic MessageSource messageSource() {ReloadableResourceBundleMessageSource messageSource = new ReloadableResourceBundleMessageSource();messageSource.setBasename("classpath:messages");messageSource.setDefaultEncoding("UTF-8");return messageSource;}@Beanpublic LocaleResolver localeResolver() {SessionLocaleResolver sessionLocaleResolver = new SessionLocaleResolver();sessionLocaleResolver.setDefaultLocale(Locale.US); // 设置默认区域return sessionLocaleResolver;}
}

步骤 3: 使用国际化资源

在 Spring Boot 应用中,你可以通过 MessageSource 获取国际化的消息。例如,在一个控制器中,你可以这样做:

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.MessageSource;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.LocaleResolver;import javax.servlet.http.HttpServletRequest;
import java.util.Locale;@RestController
public class WelcomeController {@Autowiredprivate MessageSource messageSource;@Autowiredprivate LocaleResolver localeResolver;@GetMapping("/welcome")public String welcome(HttpServletRequest request) {Locale locale = localeResolver.resolveLocale(request);return messageSource.getMessage("welcome.message", null, locale);}
}

通过这种方式,根据客户端请求的 Accept-Language 头或会话中的区域设置信息,welcome 接口会返回相应语言的欢迎信息。

Thymeleaf 的强大之处在于它提供了丰富的表达式来处理几乎所有的 Web 应用场景,从简单的变量替换到复杂的条件逻辑和列表处理,再到布局和模板重用,都可以用直观且易于理解的方式完成。

相关文章:

重学SpringBoot3-集成Thymeleaf

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-集成Thymeleaf 1. 添加Thymeleaf依赖2. 配置Thymeleaf属性&#xff08;可选&#xff09;3. 创建Thymeleaf模板4. 创建一个Controller5. 运行应用并访问页…...

【数据可视化】Echarts最常用图表

个人主页 &#xff1a; zxctscl 如有转载请先通知 文章目录 1. 前言2. 准备工作3. 柱状图3.1 绘制堆积柱状图3.2 绘制标准条形图3.3 绘制瀑布图 4. 折线图4.1 绘制堆积面积图和堆积折线图4.2 绘制阶梯图 5. 饼图5.1 绘制标准饼图5.2 绘制圆环图5.2 绘制嵌套饼图5.3 绘制南丁格尔…...

flink:通过table api把文件中读取的数据写入MySQL

当写入数据到外部数据库时&#xff0c;Flink 会使用 DDL 中定义的主键。如果定义了主键&#xff0c;则连接器将以 upsert 模式工作&#xff0c;否则连接器将以 append 模式工作 package cn.edu.tju.demo2;import org.apache.flink.streaming.api.environment.StreamExecutionE…...

【Java 多线程 哈希表】 HashTable, HashMap, ConcurrentHashMap 之间的区别

HashTable、HashMap和ConcurrentHashMap都是Java中用于存储键值对的集合框架的一部分&#xff0c;但它们之间存在一些重要的联系和区别。 联系 键值对存储&#xff1a;它们都用于存储键值对&#xff0c;并允许你根据键来检索值。基于哈希&#xff1a;它们内部都使用了哈希表来…...

有趣之matlab-烟花

待整合1 2 3 动态 有趣编程之11 静态 逼真 3 .m文件路径下放back1.jpg back4.jpg…背景照片 点击screen 就会有小白点升起&#xff0c;爆炸 function yanhuamoban()clear all;%定义全局变量global ah ;%坐标轴句柄global styleNum ;%爆炸图案样式global multiColor; %多颜色变换…...

C语言指针与数组(不适合初学者版):一篇文章带你深入了解指针与数组!

&#x1f388;个人主页&#xff1a;JAMES别扣了 &#x1f495;在校大学生一枚。对IT有着极其浓厚的兴趣 ✨系列专栏目前为C语言初阶、后续会更新c语言的学习方法以及c题目分享. &#x1f60d;希望我的文章对大家有着不一样的帮助&#xff0c;欢迎大家关注我&#xff0c;我也会回…...

springboot Mongo大数据查询优化方案

前言 因为项目需要把传感器的数据保存起来&#xff0c;当时设计的时是mongo来存储&#xff0c;后期需要从mongo DB里查询传感器的数据记录。由于传感器每秒都会像mongo数据库存500条左右的数据&#xff0c;1天就有4320万条数据&#xff0c;要想按照时间条件去查询&#xff0c;…...

Ollama管理本地开源大模型,用Open WebUI访问Ollama接口

现在开源大模型一个接一个的&#xff0c;而且各个都说自己的性能非常厉害&#xff0c;但是对于我们这些使用者&#xff0c;用起来就比较尴尬了。因为一个模型一个调用的方式&#xff0c;先得下载模型&#xff0c;下完模型&#xff0c;写加载代码&#xff0c;麻烦得很。 对于程…...

Linux--基本知识入门

一.几个基本知识 终端: CtrlAltT 或者桌面/文件夹右键,打开终端切换为管理员: sudo su 退出:exit查看内核版本号: uname -a内核版本号含义: 5 代表主版本号;13代表次版本号;0代表修订版本号;30代表修订版本的第几次微调;数字越大表示内核越新. 二.目录…...

基于springboot+vue实现的大学计算机课程管理平台的设计与实现(全套资料)

一、系统架构 前端&#xff1a;vue | antv 后端&#xff1a;springboot | mybatis-plus 环境&#xff1a;jdk17 | mysql | maven | node | redis 二、代码及数据库 三、功能介绍 01. 登录页 02. 首页 03. 系统基础模块-用户管理 04. 系统基础模块-部门…...

LeetCode2115. 从给定原材料中找到所有可以做出的菜

拓扑排序 题面 题目链接&#xff1a;2115. 从给定原材料中找到所有可以做出的菜 - 力扣&#xff08;LeetCode&#xff09; 你有 n 道不同菜的信息。给你一个字符串数组 recipes 和一个二维字符串数组 ingredients 。第 i 道菜的名字为 recipes[i] &#xff0c;如果你有它 所有…...

项目性能优化—性能优化的指标、目标

项目性能优化—性能优化的指标、目标 性能优化的终极目标是什么 性能优化的目标实际上是为了更好的用户体验&#xff1a; 一般我们认为用户体验是下面的公式&#xff1a; 用户体验 产品设计&#xff08;非技术&#xff09; 系统性能 ≈ 系统性能 快 那什么样的体验叫快呢…...

蓝桥杯刷题(三)

一、P8752 [蓝桥杯 2021 省 B2] 特殊年份&#xff08;洛谷&#xff09; 题目描述 今年是 2021 年&#xff0c;2021 这个数字非常特殊, 它的千位和十位相等, 个位比百位大 1&#xff0c;我们称满足这样条件的年份为特殊年份。 输入 5 个年份&#xff0c;请计算这里面有多少个…...

20240312-算法复习打卡day21||● 530.二叉搜索树的最小绝对差 ● 501.二叉搜索树中的众数 ● 236. 二叉树的最近公共祖先

530.二叉搜索树的最小绝对差 1.中序遍历得到升序数组 class Solution { private:vector<int> vec;void traversal(TreeNode* root) {if (root NULL) return;if (root->left) traversal(root->left);vec.push_back(root->val);if (root->right) traversal(r…...

今天我们来学习一下关于MySQL数据库

目录 前言: 1.MySQL定义&#xff1a; 1.1基础概念&#xff1a; 1.1.1数据库&#xff08;Database&#xff09;&#xff1a; 1.1.2表&#xff08;Table&#xff09;&#xff1a; 1.1.3记录&#xff08;Record&#xff09;与字段&#xff08;Field&#xff09;&#xff1a; …...

长期护理保险可改善老年人心理健康 | CHARLS CLHLS CFPS 公共数据库周报(3.6)...

欢迎报名2024年“真实世界临床研究”课程&#xff01; 本周郑老师开讲&#xff1a;“真实世界临床研究”培训班&#xff0c;3月16-17日两天&#xff0c;欢迎报名&#xff01; CHARLS公共数据库‍ CHARLS数据库简介中国健康与养老追踪调查(China Health and Retirement Longitud…...

49、C++/友元、常成员函数和常对象、运算符重载学习20240314

一、封装类 用其成员函数实现&#xff08;对该类的&#xff09;数学运算符的重载&#xff08;加法&#xff09;&#xff0c;并封装一个全局函数实现&#xff08;对该类的&#xff09;数学运算符的重载&#xff08;减法&#xff09;。 代码&#xff1a; #include <iostream…...

SQL Server错误:15404

执行维护计划失败&#xff0c;提示SQL Server Error 15404 无法获取有关... 异常如下图&#xff1a; 原因&#xff1a;数据库用户名与计算机名称不一致 解决办法&#xff1a;1.重名称数据库用户名 将前缀改成计算机名 2.重启SQL Server代理...

Halcon文件操作

1、Region读写操作 region&#xff08;区域&#xff09;是一种重要的数据类型&#xff0c;用于表示图像中的特定区域。这些区域可以代表图像中的目标、感兴趣的区域、边缘、形状等等 read_image (Image, printer_chip/printer_chip_01) dev_open_window (0, 0, 512, 512, black…...

【测试知识】业务面试问答突击版1

高内聚低耦合 高内聚指的是将相关的功能或数据组织在一起&#xff0c;使得模块内部的各个元素紧密地联系在一起&#xff0c;完成特定的任务。 低耦合指的是模块之间的依赖关系尽可能地降低&#xff0c;模块之间的接口简单清晰&#xff0c;减少模块之间的相互影响。 文章目录 整…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

GraphQL 实战篇:Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...