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

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

news 2026/3/27 3:41:08

模板引擎

 所有的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

别再只仿真了！手把手教你用LabVIEW+USRP-2920搭建真实无线通信链路（BPSK/QPSK调制实战）

从仿真到实战&#xff1a;LabVIEW与USRP-2920构建无线通信链路的完整指南 在通信工程领域&#xff0c;仿真与硬件实现之间往往存在一道难以逾越的鸿沟。许多工程师能够熟练使用MATLAB或LabVIEW进行通信系统仿真&#xff0c;但当面对USRP-2920这样的射频硬件时&#xff0c;却常常…...

编程新知 2026/3/27 3:00:59

酷狗音乐API实战指南：解决音乐应用开发的三大核心痛点

酷狗音乐API实战指南&#xff1a;解决音乐应用开发的三大核心痛点 【免费下载链接】KuGouMusicApi 酷狗音乐 Node.js API service 项目地址: https://gitcode.com/gh_mirrors/ku/KuGouMusicApi 在构建现代音乐应用时&#xff0c;开发者常常面临歌词同步不精准、API接口分…...

编程新知 2026/3/27 2:20:42

沈阳装修靠谱的机构

在沈阳装修新家&#xff0c;最怕遇到不靠谱的装修公司——工期拖延、增项不断、工艺粗糙、售后无门。想要省心、放心、安心地完成装修&#xff0c;选择一家经验丰富、工艺扎实、信誉良好的机构至关重要。在众多沈阳装修公司中&#xff0c;沈阳富田装饰装修工程有限公司以其深厚…...

编程新知 2026/3/27 2:12:41

告别重复造轮子，用快马AI一键生成高复用登录组件提升效率

在开发官网登录入口时&#xff0c;我们常常需要重复处理用户认证、表单验证、状态管理等基础逻辑。这些工作虽然不复杂&#xff0c;但每次从零开始确实会消耗不少时间。最近我发现用InsCode(快马)平台可以快速生成高质量的登录组件&#xff0c;大大提升了开发效率。 组件功能设…...

编程新知 2026/3/27 2:08:41

蒙纳什大学发现多模态推理模型的“不确定性陷阱“

这项由蒙纳什大学、佐治亚理工学院、康奈尔大学等多所知名学府联合完成的研究发表于2026年3月的《计算机视觉与模式识别》会议&#xff0c;论文编号为arXiv:2603.13366v1。有兴趣深入了解的读者可以通过该编号查询完整论文。当你问一个AI"这张图片里有什么"时&#x…...

编程新知 2026/3/27 1:11:42

图床项目（二） 接口设计

接口设计 1 . muduo 网络模型 该模型相较于普通的reactor模型复杂一点&#xff0c;其中包括mainReactor 和 多个 subReactor &#xff0c;其中每一个 subReactor对应一个线程。 其中 mainReactor 负责处理新连接 &#xff0c; 并将连接均匀分配给 subReactor &#xff0c;后续…...

编程新知 2026/3/26 22:38:21

OpenClaw任务编排技巧：Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF复杂流程分解策略

OpenClaw任务编排技巧&#xff1a;Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF复杂流程分解策略 1. 为什么需要任务编排 上周我尝试用OpenClaw自动完成一篇技术博客的写作和发布&#xff0c;结果遭遇了连环翻车&#xff1a;模型先花20分钟生成了偏离主题的初稿&…...

编程新知 2026/3/26 22:16:15

美团、腾讯、字节怎么选？3个真实案例告诉你答案

美团、腾讯、字节怎么选&#xff1f;3个真实案例告诉你答案 2026校招季&#xff0c;三个朋友的不同选择 大厂直通车-校招大礼包&#xff1a;入口入口 写在前面 2026届秋招结束了。 我的三个朋友小A、小B、小C都拿到了心仪的offer。有意思的是&#xff0c;他们分别选了字节、腾…...

编程新知 2026/3/26 22:06:05

AI绘画新革命：SDXL-Turbo镜像快速上手与实战测评

AI绘画新革命&#xff1a;SDXL-Turbo镜像快速上手与实战测评 想象一下这样的场景&#xff1a;你刚输入完几个单词&#xff0c;屏幕上就立即呈现出对应的图像。没有等待&#xff0c;没有延迟&#xff0c;就像思维直接转化为画面一样流畅。这就是SDXL-Turbo带来的AI绘画新体验—…...

编程新知 2026/3/26 21:46:01

M.2 SSD硬件电路设计实战：从接口规范到高速信号布局

1. M.2 SSD硬件设计入门&#xff1a;从接口规范说起 第一次接触M.2 SSD设计时&#xff0c;我被各种接口类型和协议搞得晕头转向。现在回想起来&#xff0c;其实只要抓住几个关键点就能快速上手。M.2接口作为Intel推出的新一代存储标准&#xff0c;已经全面取代了老旧的mSATA接口…...

编程新知 2026/3/26 21:40:01