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

【SpringBoot学习笔记】04. Thymeleaf模板引擎

news 2025/9/17 0:50:23

模板引擎

 所有的html元素都可以被thymeleaf替换接管  th:元素名

templates下的只能通过Controller来跳转，templates前后端分离，需要模板引擎thymeleaf支持

   模板引擎的作用就是我们来写一个页面模板，比如有些值呢，是动态的，我们写一些表达式。而这些值，从哪来呢，就是我们在后台封装一些数据。然后把这个模板和这个数据交给我们模板引擎，模板引擎按照我们这个数据帮你把这表达式解析、填充到我们指定的位置，然后把这个数据最终生成一个我们想要的内容给我们写出去，这就是我们这个模板引擎，不管是jsp还是其他模板引擎，都是这个思想。只不过呢，就是说不同模板引擎之间，他们可能这个语法有点不一样。其他的我就不介绍了，我主要来介绍一下SpringBoot给我们推荐的Thymeleaf模板引擎，这模板引擎呢，是一个高级语言的模板引擎，他的这个语法更简单。而且呢，功能更强大。

补充：什么是前后端分离

        其实简单来说，就是前端和后端分开开发，分开部署。
我们以Javaweb开发为例子：在学习web开发的时候会接触到SpringMVC，Spring MVC开发的时候一般都用jsp作为页面展示，后端servlet处理请求。再到SpringBoot框架，前端使用thymeleaf或者freemarker作为模版引擎展示，后端用controller处理请求。
        其中jsp和thymeleaf，freemarker都有一个共同点：页面都是可以内嵌java代码的。页面里面嵌入了java（后端程序设计语言）代码，就导致页面和后端服务的耦合度特别高——前后端开发的时候粘在一起了。而如果我们要部署spring mvc/springboot的项目的话，前后端代码也都是打包在一个war包/jar包里的，部署的时候也是一起部署的，就导致前端要修改/后端要修改的话项目都要重新打包部署——前后端部署也粘在一起了。
怎样才算分开开发呢？那当然就是前端页面只用写html + js + css，后端不用写jsp，不用使用thymeleaf等模板引擎来做html的渲染了。
 

引入Thymeleaf

怎么引入呢，对于springboot来说，什么事情不都是一个start的事情嘛，我们去在项目中引入一下。给大家三个网址：

Thymeleaf 官网：https://www.thymeleaf.org/

Thymeleaf 在Github 的主页：https://github.com/thymeleaf/thymeleaf

Spring官方文档：找到我们对应的版本

https://docs.spring.io/spring-boot/docs/2.2.5.RELEASE/reference/htmlsingle/#using-boot-starter

找到对应的pom依赖：可以适当点进源码看下本来的包！

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

Thymeleaf分析

我们可以在其中看到默认的前缀和后缀！

我们只需要把我们的html页面放在类路径下的templates下，thymeleaf就可以帮我们自动渲染了。

使用thymeleaf什么都不需要配置，只需要将他放在指定的文件夹下即可！

Thymeleaf 语法学习

Thymeleaf 官网：https://www.thymeleaf.org/

我们做个最简单的练习 ：我们需要查出一些数据，在页面中展示

1、修改测试请求，增加数据传输

@RequestMapping("/t1")
public String test1(Model model){//存入数据model.addAttribute("msg","Hello,Thymeleaf");//classpath:/templates/test.htmlreturn "test";
}

2、我们要使用thymeleaf，需要在html文件中导入命名空间的约束，方便提示。

我们可以去官方文档的#3中看一下命名空间拿来过来：

 xmlns:th="http://www.thymeleaf.org"

3、我们去编写下前端页面 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>狂神说</title>
</head>
<body>
<h1>测试页面</h1><!--th:text就是将div中的内容设置为它指定的值，和之前学习的Vue一样-->
<div th:text="${msg}"></div>
</body>
</html>

相关文章：

【SpringBoot学习笔记】04. Thymeleaf模板引擎

模板引擎 所有的html元素都可以被thymeleaf替换接管 th:元素名 templates下的只能通过Controller来跳转&#xff0c;templates前后端分离&#xff0c;需要模板引擎thymeleaf支持 模板引擎的作用就是我们来写一个页面模板&#xff0c;比如有些值呢&#xff0c;是动态的&#x…...

编程日记 2023/8/18 20:32:30

【uni-app】 .sync修饰符与$emit(update:xxx)实现数据双向绑定

最近在看uni-app文档&#xff0c;看到.sync修饰符的时候&#xff0c;觉得很有必要记录一下 其实uni-app是一个基于Vue.js和微信小程序开发框架的跨平台开发工具 所以经常会听到这样的说法&#xff0c;只要你会vue&#xff0c;uni-app就不难上手 在看文档的过程中&#xff0c;发…...

编程日记 2023/8/18 20:31:29

链表之第二回

欢迎来到我的&#xff1a;世界 该文章收入栏目&#xff1a;链表 希望作者的文章对你有所帮助&#xff0c;有不足的地方还请指正&#xff0c;大家一起学习交流 ! 目录 前言第一题&#xff1a;反转一个链表第二题&#xff1a;链表内指定区间反转第三题&#xff1a;判断一个链表…...

编程日记 2023/8/18 20:30:28

【sgDragSize】自定义拖拽修改DIV尺寸组件，适用于窗体大小调整

核心原理就是在四条边、四个顶点加上透明的div&#xff0c;给不同方向提供按下移动鼠标监听 &#xff0c;对应计算宽度高度、坐标变化 特性&#xff1a; 支持设置拖拽的最小宽度、最小高度、最大宽度、最大高度可以双击某一条边&#xff0c;最大化对应方向的尺寸&#xff1b;再…...

编程日记 2023/8/18 20:29:27

Gson与FastJson详解

Gson与FastJson详解 Java与JSON 做什么? 将Java中的对象 快速的转换为 JSON格式的字符串. 将JSON格式的字符串, 转换为Java的对象. Gson 将对象转换为JSON字符串 转换JSON字符串的步骤: 引入JAR包 在需要转换JSON字符串的位置编写如下代码即可: String json new Gson().to…...

编程日记 2023/8/18 20:28:25

LeetCode150道面试经典题-- 有效的字母异位词(简单)

1.题目 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的字母异位词。 注意&#xff1a;若 s 和 t 中每个字符出现的次数都相同&#xff0c;则称 s 和 t 互为字母异位词。 2.示例 s"adasd" t"daads" 返回true s"addad" t &q…...

编程日记 2023/8/18 20:27:24

前端与人工智能

前端开发与人工智能的结合在未来将会产生许多有趣和有前景的发展。以下是前端与人工智能结合可能带来的一些趋势和前景&#xff1a; 智能用户体验&#xff1a;人工智能可以用于改善用户体验&#xff0c;例如通过个性化推荐、情感分析等技术来提供更贴近用户需求的内容和功能。…...

编程日记 2023/8/18 20:26:22

神经网络基础-神经网络补充概念-14-逻辑回归中损失函数的解释

概念 逻辑回归损失函数是用来衡量逻辑回归模型预测与实际观测之间差异的函数。它的目标是找到一组模型参数&#xff0c;使得预测结果尽可能接近实际观测。 理解 在逻辑回归中&#xff0c;常用的损失函数是对数似然损失&#xff08;Log-Likelihood Loss&#xff09;&#xff…...

编程日记 2023/8/18 20:25:21

UG NX二次开发（C++）-PK函数创建一条圆弧曲线

文章目录 1、前言2、创建一个项目3、添加头文件4、在do_it中添加创建圆曲线的源代码5、调用dll6、再创建一个长方体验证1、前言 采用PK进行UG NX二次开发，现在看到的文章很多是直接创建实体，然后在UG NX的视图区显示出来，对于创建圆曲线的文章不多，本文讲一下PK函数创建圆…...

编程日记 2023/8/18 20:24:19

AndroidStudio中修改打包生成的apk名称

1.配置手机架构 splits {abi {enable truereset()include armeabi-v7a,arm64-v8auniversalApk false} } 2.多渠道 productFlavors {normal {applicationId "*****"manifestPlaceholders [appName: "string/app_name_normal"]}driver {applicationId &qu…...

编程日记 2023/8/18 20:23:18

多个springboot整合使用rabbitmq(使用注解的方式)

一、简述 先参考单个springboot使用rabbitmq和了解rabbitmq的五种模式 单个springboot整合rabbitmq_java-zh的博客-CSDN博客 二、创建项目 1、先创建两个springboot项目&#xff0c;一个做生产者&#xff0c;一个做消费者 2、导包(生产者和消费者对应的内容都是一样) <…...

编程日记 2023/8/18 20:22:17

《Effective C++中文版，第三版》读书笔记2

条款06&#xff1a;若不想使用编译器自动生成的函数&#xff0c;就该明确拒绝 为驳回编译器自动&#xff08;&#xff09;提供的机能&#xff0c;可将相应的成员函数声明为私有的&#xff0c;同时不实现它。 #include <iostream>class MyClass { public:MyClass(int in…...

编程日记 2023/8/18 20:21:15

虫情测报系统的工作原理及功能优势

KH-CQPest虫情测报系统能够在不对虫体造成任何破坏的情况下&#xff0c;无公害的杀死虫子&#xff0c;利用高倍显微镜和高清摄像头拍摄虫体照片&#xff0c;并将虫体照片发送到远端平台&#xff0c;让工作人员无需要到现场&#xff0c;通过平台就可以观察害虫的种类和数量&…...

编程日记 2023/8/18 20:20:13

UWB定位技术详细介绍

UWB&#xff08;Ultra-Wideband&#xff09;定位技术是一种通过利用信号的超宽频带特性进行高精度定位的技术。其原理是通过测量信号在空间传播中的时间延迟差异来计算物体的位置。 UWB技术与传统无线通信技术不同&#xff0c;它利用非常宽的频带进行通信&#xff0c;通常超过…...

编程日记 2023/8/18 20:19:12

PiplineADC学习一：

PiplineADC结构&#xff1a; PiplineADC起源之FlashADC PiplineADC起源之Sub-Ranging-ADC 比较器存在失调&#xff1a; 因此每级1bit不实用&#xff0c;需要做冗余位设计。 多比较一次&#xff0c;两个阈值&#xff0c;三个区间&#xff0c;分别对于输出00,01,10。正常2bit应该…...

编程日记 2023/8/18 20:18:11

Linux elasticsearch设置为开机自启动服务

Linux elasticsearch怎么设置为设置为开机自启动服务 1、进入/etc/init.d目录 cd /etc/init.d 2、新建文件elasticsearch&#xff0c;注意&#xff0c;没有扩展名 vi elasticsearch 3、新建文件elasticsearch的内容如下 说明&#xff1a; &#xff08;1&#xff09;“su…...

编程日记 2023/8/18 20:17:10

WinForm内嵌Unity3D

Unity3D可以C#脚本进行开&#xff0c;使用vstu2013.msi插件&#xff0c;可以实现在VS2013中的调试。在开发完成后&#xff0c;由于项目需要&#xff0c;需要将Unity3D嵌入到WinForm中。WinForm中的UnityWebPlayer Control可以载入Unity3D。先看效果图。 一、为了能够动态设置ax…...

编程日记 2023/8/18 20:16:09

关于vue中v-for绑定数据重新渲染的问题

我修改被v-for绑定的数据&#xff0c;发现居然不能重新渲染。 查找后得知一下方法: $set 是 Vue 提供的一个全局方法&#xff0c;用于向响应式对象中添加或更新属性&#xff0c;并触发视图更新。它接受三个参数&#xff1a;对象、要添加/更新的属性名或索引&#xff0c;以及新…...

编程日记 2023/8/18 20:15:08

全面解析 Axios 请求库的基本使用方法

Axios 是一个流行的基于 Promise 的 HTTP 请求库&#xff0c;用于在浏览器和 Node.js 中进行 HTTP 请求。它提供了简单易用的 API&#xff0c;可以发送各种类型的请求&#xff08;如 GET、POST、PUT、DELETE等&#xff09;&#xff0c;并处理响应数据&#xff0c;Axios 在前端工…...

编程日记 2023/8/18 20:14:07

rust踩雷笔记3——生命周期的理解

目录 概念和基本使用一个例子彻底理解最基本的内容 一个例子理解函数签名为什么要有生命周期标注⭐️能不能对编译器蒙混过关&#xff1f; 生命周期是rust中最难的概念——鲁迅 这一块内容即便是看rust圣经&#xff0c;第一遍也有点懵。今天早上二刷突然有了更直观的认识&…...

编程日记 2023/8/18 20:13:05

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2025/9/13 18:53:26

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2025/9/13 15:30:49

pam_env.so模块配置解析

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

编程新知 2025/8/21 21:33:01

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/9/6 18:01:23

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2025/8/24 17:55:00

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2025/8/26 6:51:02

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2025/9/16 21:10:14

CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

编程新知 2025/9/12 22:08:06

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

编程新知 2025/9/9 10:09:02

数学建模-滑翔伞伞翼面积的设计，运动状态计算和优化 ！

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态，并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

编程新知 2025/9/9 10:08:31