Spring Boot入门(19)：超酷炫！Spring Boot + Thymeleaf 带你玩转 Web 页面开发！

最新推荐文章于 2024-05-03 21:05:41 发布

喵手

最新推荐文章于 2024-05-03 21:05:41 发布

阅读量556

点赞数 20

分类专栏： Springboot 文章标签： spring boot 前端后端

本文链接：https://blog.csdn.net/weixin_66592566/article/details/132516050

版权

Springboot 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

前言

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

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

摘要

本文将分为以下几个部分:

新建Spring Boot项目
配置Thymeleaf模板引擎
编写HTML页面
模板引擎使用方法介绍
测试用例
全文小结

新建Spring Boot项目

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

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

配置Thymeleaf模板引擎

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

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

# 设置 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 页面:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf Test</title>
</head>
<body>
    <!-- 模板语法 -->
    <h1 th:text="${msg}"></h1>
</body>
</html>

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

模板引擎使用方法介绍

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

输出变量

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

<!-- 输出 msg 变量的值 -->
<p th:text="${msg}"></p>

条件判断

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

<!-- 如果 msg 变量等于 'Hello World'，则输出 'Hello World'；否则输出 '其他文本' -->
<p th:if="${msg == 'Hello World'}">Hello World</p>
<p th:if="${msg != 'Hello World'}">其他文本</p>

循环语句

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

<!-- 循环输出 list 变量中的元素 -->
<ul>
    <li th:each="item : ${list}" th:text="${item}"></li>
</ul>

表单绑定

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

<form th:action="@{/login}" method="post">
    <input type="text" th:field="${user.username}" />
    <input type="password" th:field="${user.password}" />
    <button type="submit">登录</button>
</form>

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

测试用例

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

@Controller
public class TestController {
    @GetMapping("/")
    public String index(Model model) {
        model.addAttribute("msg", "Hello World!");
        return "index";
    }
}

全文小结

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

喵手

关注

20
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot入门(19)：超酷炫！Spring Boot + Thymeleaf 带你玩转 Web 页面开发！

在Web开发中，不管是MVC框架还是前后端分离，都需要使用模板引擎来渲染生成页面。Thymeleaf 是一款非常优秀的模板引擎，它以自然的方式处理模板，支持 HTML5 标签，同时兼容 HTML4。本文将介绍如何使用Spring Boot框架，整合 Thymeleaf 模板引擎来开发Web页面。新建Spring Boot项目配置Thymeleaf模板引擎编写HTML页面模板引擎使用方法介绍测试用例全文小结。
复制链接

扫一扫