在Spring Boot中使用Thymeleaf开发Web页面

引言: 为啥写这篇文章呢?我明明就没怎么用过这个Thymeleaf进行web开发,用JSP也行,三剑客也行,或者Vue,React,PHP等等,不好吗?

那我为啥写这篇博客呢?这个写了估计也没几个人看,这是我在写之前就做好心理准备了的,毕竟很多东西都需要参照官网案例进行开发,主要写这个是因为,咱们的Spring Boot官方推荐咱们使用Thymeleaf,Thymeleaf也是有好处的,毕竟他是一种基于java的Web应用程序的服务器端模版引擎,它的主要目标是将模板和业务逻辑分离,使开发人员能够更轻松地开发可维护和可扩展的 Web 应用程序。

  • Thymeleaf:Thymeleaf 是一种服务器端模板引擎,主要用于构建基于 Java 的 Web 应用程序。它的特点是模板语法与 HTML 非常接近,易于编写和理解。Thymeleaf与Spring框架紧密集成,提供了与Spring的标准特性集成的功能。

  • Vue:Vue 是一种用于构建现代化、交互式的前端应用程序的 JavaScript 框架。它采用了组件化的开发方式,使得前端开发更加模块化和可维护。Vue 提供了响应式数据绑定、组件化开发、虚拟 DOM 等特性,使得构建复杂的前端应用变得更加简单和高效。

  • PHP:PHP 是一种服务器端脚本语言,主要用于构建动态网页和 Web 应用程序。PHP 具有广泛的应用领域,可以与各种数据库和 Web 服务器进行集成。PHP 提供了丰富的函数库和框架,使得开发 Web 应用程序变得更加便捷。

  • React:React 是一种用于构建用户界面的 JavaScript 库。它采用了组件化的开发方式,使得前端开发更加模块化和可复用。React 使用虚拟 DOM 技术来提高性能,并提供了状态管理、组件生命周期等特性,使得构建大规模、高性能的前端应用变得更加容易。


Thymeleaf主要用于服务器端模板渲染,Vue和React主要用于构建现代化的前端应用程序,而PHP是一种服务器端脚本语言,用于构建动态网页和 Web 应用程序。

就这么说吧,其实不论我们选择哪个进行开发,都有他自己的特色,根据我们的项目需求和技术团队,以及个人爱好进行选择吧。

以下是一些使用 Thymeleaf 的好处:

  • 自然的模板语法:Thymeleaf 的模板语法非常接近于 HTML,使得模板易于编写和理解。这使得前端开发人员可以更轻松地参与到模板的开发中。

  • 强大的表达式功能:Thymeleaf 提供了丰富的表达式功能,可以在模板中使用这些表达式来动态地生成内容。这些表达式可以用于访问模型数据、迭代集合、条件判断、计算等,使模板更加灵活和动态。

  • 与 Spring 框架的集成:Thymeleaf 是与 Spring 框架紧密集成的,可以无缝地与 Spring MVC、Spring Boot 等框架一起使用。它提供了与 Spring 的标准特性集成的功能,如表单绑定、国际化支持、安全性等。

  • 可扩展性:Thymeleaf 提供了丰富的扩展机制,可以通过自定义标签、方言等来扩展模板的功能。这使得开发人员可以根据项目的需求定制和扩展 Thymeleaf 的功能。

  • 良好的生态系统:Thymeleaf 拥有一个活跃的社区和广泛的用户群体,提供了大量的文档、教程和示例代码。这使得学习和使用 Thymeleaf 变得更加容易。

Thymeleaf官网


好了写了这么多,估计看文章还不如看代码来的轻松,这里只提供一个使用哪个Thymeleaf的小案例,具体的语法请参照Thymeleaf官网进行开发。

老样子第一步先引入依赖:

		<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><scope>provided</scope></dependency><!-- Spring Security --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency>

第二步,在resources目录下建立一个templates文件夹。之后建立一个login.html文件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Login</title><link rel="stylesheet" th:href="@{/css/style.css}" />
</head>
<body><h2>Login</h2><form th:action="@{/login}" method="post"><input type="text" name="username" placeholder="Username" required /><br/><input type="password" name="password" placeholder="Password" required /><br/><button type="submit">Login</button></form>
</body>
</html>

在新建一个主页,home.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Home</title>
</head>
<body><h2>欢迎来到miaow的主页!</h2><p>Logged in successfully!</p>
</body>
</html>

之后我们在src/main/resources/static/css目录下创建一个style.css文件,用于自定义登录页面的样式

body {background-color: #f2f2f2;font-family: Arial, sans-serif;text-align: center;
}h2 {color: #333333;
}form {margin-top: 50px;
}input[type="text"],
input[type="password"] {width: 200px;padding: 10px;margin-bottom: 10px;
}button {padding: 10px 20px;background-color: #333333;color: #ffffff;border: none;cursor: pointer;
}

第三步,我们创建一个LoginController类,用来处理登录页面和主页的请求

@Controller
public class LoginController {@GetMapping("/login")public String login() {return "login";}@GetMapping("/home")public String home() {return "home";}
}

第四步,我们使用Spring security创建一个SecurityConfig类,用来配置Spring Security 包括登录页面和验证逻辑:

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {@Overrideprotected void configure(HttpSecurity http) throws Exception {http.authorizeRequests().antMatchers("/login", "/css/**").permitAll().anyRequest().authenticated().and().formLogin().loginPage("/login").defaultSuccessUrl("/home").permitAll().and().logout().permitAll();}@Overrideprotected void configure(AuthenticationManagerBuilder auth) throws Exception {auth.inMemoryAuthentication().withUser("admin").password("{noop}admin").roles("USER");}
}

在上述代码中,我们配置了登录页面为/login,主页为/home。用户名为admin,密码为admin

ok,至此,我们就简单实现了一个登录页面跳转到主页了,可以通过直接访问:http://localhost:8080/login,账号密码均为admin,输入后跳转到主页:

在这里插入图片描述
在这里插入图片描述
如果账号密码不对是跳不进去主页的。

关于更多的Thymeleaf语法请参照官网,这里给出我们常用的:

th:text:用于将文本内容设置到元素的文本中。

<span th:text="${variable}">Default Text</span>

th:if:用于条件性地显示或隐藏元素。

<div th:if="${condition}">Visible if condition is true</div>

th:each:用于迭代集合或数组中的元素,并生成相应的HTML。

<ul><li th:each="item : ${items}" th:text="${item}">Item</li>
</ul>

th:href:用于设置链接的目标URL。

<a th:href="@{/path/to/page}">Link</a>

th:src:用于设置图像或脚本的源URL。

<img th:src="@{/path/to/image.jpg}" alt="Image">

th:style:用于设置元素的样式。

<div th:style="'color: red; font-size: 14px'">Styled Text</div>

th:class:用于设置元素的CSS类。

<div th:class="${condition} ? 'class1' : 'class2'">Conditional Class</div>

th:switch、th:case和th:default:用于实现类似于Java的switch-case语句的逻辑。

<div th:switch="${variable}"><p th:case="'value1'">Case 1</p><p th:case="'value2'">Case 2</p><p th:default>Default Case</p>
</div>

需要更多请参照官方文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/154416.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于安卓android微信小程序的刷题系统

项目介绍 面试刷题系统的开发过程中&#xff0c;采用B / S架构&#xff0c;主要使用jsp技术进行开发&#xff0c;中间件服务器是Tomcat服务器&#xff0c;使用Mysql数据库和Eclipse开发环境。该面试刷题系统包括会员、答题录入员和管理员。其主要功能包括管理员&#xff1a;个…

Oracle-分析函数(累计求和,排序等)

在Oracle中分析函数又称为开窗函数 分为以下两类&#xff1a; 第一类&#xff1a;是聚合分析函数&#xff0c;主要包含&#xff08;sum&#xff0c;count&#xff0c;AVG、MAX、MIN等&#xff09;&#xff0c;主要是对内部分组的数值按照要求内部聚合处理&#xff1b; 第二类&a…

开发《猫咪攻略》小游戏的意义

开发《猫咪攻略》小游戏的意义有以下几点&#xff1a; 学习和掌握游戏开发的基本技能&#xff1a;通过开发《猫咪攻略》小游戏&#xff0c;可以学习和掌握游戏开发的基本技能&#xff0c;包括游戏策划、游戏设计、游戏编程和游戏测试等方面的技能。增强对猫咪的了解和认识&…

【Linux系统化学习】进程的状态 | 僵尸进程 | 孤儿进程

个人主页点击直达&#xff1a;小白不是程序媛 Linux专栏&#xff1a;Linux系统化学习 目录 操作系统进程的状态 运行状态 阻塞状态 进程阻塞的现象 挂起阻塞状态 Linux进程状态 Linux内核源代码怎么说 R&#xff08;running状态&#xff09;运行状态 S&#xff08;sl…

关于漏洞:检测到目标SSL证书已过期【原理扫描】

这个漏洞是监听443端口的&#xff0c;如果我们是正式的网站且使用了https那么更新证书即可。 但是我的服务器上面几乎是个空服务器&#xff0c;谁会用443呢&#xff1f; 找不到谁用了那我就部署一个nginx&#xff0c;用nginx代理443&#xff0c;找个证书配一下呗。 然而当我…

CNN卷积神经网络Python实现

import torch from torch import nn# ①定义互相关运算 def corr2d(X, K):"""计算二维互相关运算。"""# 获取K的形状 行为h,列为wh, w K.shape# 生成全0的矩阵&#xff0c;行为X的行减去h加上1&#xff0c;列为X的列减去w加上1Y torch.zeros((…

rabbit MQ的延迟队列处理模型示例(基于SpringBoot)

说明&#xff1a; 生产者P 往交换机X&#xff08;typedirect&#xff09;会发送两种消息&#xff1a;一、routingKeyXA的消息&#xff08;消息存活周期10s&#xff09;&#xff0c;被队列QA队列绑定入列&#xff1b;一、routingKeyXB的消息&#xff08;消息存活周期40s&#xf…

Prolog 中的逻辑探险:学习9组逻辑蕴涵公式

引言 上次写了16组等价公式定律,今天继续用Prolog写9组逻辑蕴涵公式。 感觉这些公式的名称与公式挺难一一对应来记忆的,只能多练习了. 1. 附加律 (Addition) A ⇒ A∨B 当你拿到一个苹果&#xff08;A&#xff09;&#xff0c;突然你知道&#xff0c;即使有了梨&#xff08;…

用向量数据库Milvus Cloud搭建GPT大模型+私有知识库的定制商业文案助手

随着智能助手的不断普及和发展,商业文案的创作也变得更加智能化和定制化。在这个信息爆炸的时代,商业文案的撰写已经不再是简单的文字表达,而是需要结合大数据分析和人工智能技术,以更好地满足目标客群的需求。在本文中,我们将介绍如何利用向量数据库Milvus Cloud搭建GPT大…

Nosql的redis概述及基本操作

关系数据库与非关系型数据库概述 关系型数据库 关系型数据库是一个结构化的数据库&#xff0c;创建在关系模型&#xff08;二维表格模型&#xff09;基础上&#xff0c;一般面向于记录。SQL语句(标准数据查询语言)就是一种基于关系型数据库的语言&#xff0c;用于执行对关系型…

tokenizers Tokenizer 类

Tokenizer 类 依赖安装 pip install tensorflow pip install tensorflow -i https://pypi.tuna.tsinghua.edu.cn/simple基类原型 tokenizers.Tokenizer(model)基类说明 Tokenizer 函数构造一个分词器对象。分词方式主要有word-level、subword-level、char-level三种&#x…

3.什么是Spring IOC 容器?有什么作用?

什么是Spring IOC 容器 控制反转即IoC (Inversion of Control)&#xff0c;它把传统上由程序代码直接操控的对象的调用权交给容器&#xff0c;通过容器来实现对 象组件的装配和管理。所谓的“控制反转”概念就是对组件对象控制权的转移&#xff0c;从程序代码本身转移到了外部…

软件测试/人工智能丨人工智能取代软件测试团队

在数字时代&#xff0c;人工智能&#xff08;AI&#xff09;和软件测试如同两位不同领域的英雄&#xff0c;各自拥有独特的技能和力量。然而&#xff0c;当这两者碰撞在一起时&#xff0c;究竟会擦出怎样的火花呢&#xff1f;让我们进入这场奇妙的对决&#xff0c;探索AI如何改…

如何快速让苹果TF上架

苹果TF上架是一个相对复杂的过程&#xff0c;需要经过多个步骤和审核环节。以下是一些建议&#xff0c;可以帮助你快速让苹果TF上架&#xff1a; 确保应用程序符合苹果的审核指南和规则。在提交应用程序之前&#xff0c;仔细阅读苹果的审核指南&#xff0c;并确保你的应用程序…

MFC项目添加CUDA支持

文章目录 前言一、开启项目CUDA支持二、链接CUDA库三、链接cu文件 前言 我目前的项目状况是&#xff1a; 拥有一个MFC项目&#xff1b;拥有现成的 .cuh文件 和 .cu文件。 我想做的是&#xff1a;将.cuh和.cu文件放到我的项目中&#xff0c;并且编译成功跑起来 一、开启项目C…

如何使用清华源镜像下载python相关的包?

目的&#xff1a;当使用pip3默认安装python相关插件遇到网络不可达问题时&#xff0c;更换镜像源尝试下载&#xff5e; &#xff03;使用如下命令&#xff0c;以下网址都是Python Package Index (PyPI)的一个镜像站点 ##########清华 pip3 install 包名 -i https://pypi.tuna.…

【python学习】基础篇-常用函数-sorted() 对可迭代对象进行排序

sorted()函数是Python中的内置函数&#xff0c;用于对可迭代对象进行排序操作。 它会返回一个新的已排序的列表&#xff0c;而不会修改原始的可迭代对象。 sorted()函数的基本语法如下&#xff1a; sorted(iterable, keyNone, reverseFalse)参数说明&#xff1a; iterable:表…

Halcon (0):C# 联合Halcon方式简介和就业市场说明

文章目录 文章专栏视频资源前言相关视频联合C#开发直接导出C#代码Halcon引擎调用开发函数封装库工程导出 总结就业市场 文章专栏 Halcon开发 视频资源 机器视觉之C#联合Halcon 前言 根据我的测试&#xff0c;我发现Halcon和WPF中的halcon插件&#xff0c;代码具有对应性。就是…

反序列化漏洞(4), phar文件反序列化, 漏洞实验, 漏洞利用

一, 简介 1. phar文件 PHAR&#xff0c;全称PHP Archive&#xff0c;是一种将PHP代码和资源打包成一个自包含的文件的格式。这种文件格式可以将PHP代码文件和其他资源集合在一起&#xff0c;实现应用程序、库或插件的分发。在PHP中&#xff0c;Phar广泛应用于打包应用程序、库…

Unity - 实现模型动态伸长缩短,贴图不变形(材质球参数篇)

思路为修改模型材质球的Tiling参数&#xff0c;根据与自身localScale的值得到合适的比例&#xff0c;再修改Tiling值 var mat target.transform.GetComponent<Renderer>().material; var oriValue mat.mainTextureScale;//沿着Y轴伸缩 oriValue.y 1 * target.transfo…