超酷炫!Spring Boot + Thymeleaf 带你玩转 Web 页面开发!

您所在的位置:网站首页 网站模板哪个好看一点 超酷炫!Spring Boot + Thymeleaf 带你玩转 Web 页面开发!

超酷炫!Spring Boot + Thymeleaf 带你玩转 Web 页面开发!

2024-07-17 06:46| 来源: 网络整理| 查看: 265

🏆本文收录于 《Spring Boot从入门到精通》 ,专门攻坚指数提升

本专栏致力打造最硬核 Spring Boot 从零基础到进阶系列学习内容,🚀均为全网独家首发,打造精品专栏,专栏持续更新中…欢迎大家订阅持续学习。

前言

在Web开发中,不管是MVC框架还是前后端分离,都需要使用模板引擎来渲染生成页面。Thymeleaf 是一款非常优秀的模板引擎,它以自然的方式处理模板,支持 HTML5 标签,同时兼容 HTML4。

本文将介绍如何使用Spring Boot框架,整合 Thymeleaf 模板引擎来开发Web页面。

新建Spring Boot项目

首先我们需要新建一个Spring Boot项目。可以使用Spring官方的 Spring Initializr 来快速生成一个最简单的Spring Boot项目。

在此我们选择使用 Maven 作为项目构建工具,选择Web和Thymeleaf依赖,点击Generate按钮即可生成项目。

配置Thymeleaf模板引擎

新建Spring Boot项目后,我们需要在项目中配置 Thymeleaf 模板引擎。

在application.properties 文件中,添加以下配置:

代码语言:javascript复制# 设置 Thymeleaf 模板文件的路径 spring.thymeleaf.prefix=classpath:/templates/ # 设置 Thymeleaf 模板文件的后缀名 spring.thymeleaf.suffix=.html # 设置 HTML 页面编码 spring.thymeleaf.encoding=UTF-8 # 设置是否缓存 Thymeleaf 模板文件 spring.thymeleaf.cache=false

以上配置中,我们设置了 Thymeleaf 模板文件的路径、后缀名、HTML 页面编码和是否缓存 Thymeleaf 模板文件。

编写HTML页面

在templates文件夹下,新建一个名为 index.html 的 HTML 页面:

代码语言:javascript复制 Thymeleaf Test

以上是一个简单的 HTML 页面,我们使用了Thymeleaf的模板语法,将 msg 这个变量的值渲染到 h1 标签中。

模板引擎使用方法介绍

在编写 HTML 页面时,我们可以使用Thymeleaf的模板语法,对页面进行动态渲染。以下是一些常用的模板语法:

输出变量

Thymeleaf 的表达式,格式为${variable},可以输出变量到HTML页面。

代码语言:javascript复制

条件判断

Thymeleaf 支持条件判断,格式为th:if,可以根据条件渲染不同的HTML片段。

代码语言:javascript复制

Hello World

其他文本

循环语句

Thymeleaf 支持循环语句,格式为th:each,可以循环输出HTML片段。

代码语言:javascript复制 表单绑定

Thymeleaf 支持表单绑定,可以将表单数据绑定到 Model 中,并自动渲染到HTML页面。

代码语言:javascript复制 登录

以上是Thymeleaf模板引擎常用的一些语法,更多语法和用法可以参考 官方文档。

测试用例

在本地运行项目,访问 http://localhost:8080/ ,即可看到页面中显示了 Hello World!,这个信息是从Controller层传递过来的。我们可以在Controller层中添加以下代码来测试:

代码语言:javascript复制@Controller public class TestController { @GetMapping("/") public String index(Model model) { model.addAttribute("msg", "Hello World!"); return "index"; } }全文小结

本文介绍了如何使用Spring Boot框架,整合 Thymeleaf 模板引擎来开发Web页面,并介绍了 Thymeleaf 模板引擎的常用语法。通过本文的学习,读者可以快速上手使用 Thymeleaf 模板引擎开发 Web 页面。

我正在参与2023腾讯技术创作特训营第二期有奖征文,瓜分万元奖池和键盘手表



【本文地址】


今日新闻


推荐新闻


    CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3