使用Spring Boot和Thymeleaf构建Web应用-CSDN博客

本文链接：https://blog.csdn.net/qq836869520/article/details/140354402

使用Spring Boot和Thymeleaf构建Web应用

大家好，我是微赚淘客系统3.0的小编，是个冬天不穿秋裤，天冷也要风度的程序猿！今天我们将探讨如何使用Spring Boot和Thymeleaf构建一个简单而强大的Web应用，这两者结合起来能够提供高效的开发体验和灵活的前端展示能力。

1. 准备工作

首先，确保你已经具备以下环境和工具：

Java开发环境（JDK）
Maven或Gradle构建工具
IDE（推荐使用IntelliJ IDEA）
Spring Boot和Thymeleaf依赖

在开始之前，我们先创建一个基本的Spring Boot项目，并添加Thymeleaf依赖。

<!-- pom.xml -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

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

2. 创建Controller

在Spring Boot中，Controller负责处理用户请求并返回视图或数据。创建一个简单的Controller来处理页面请求。

package cn.juwatech.web;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HelloController {

    @GetMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("message", "Hello, Spring Boot and Thymeleaf!");
        return "hello"; // 视图名为hello.html
    }
}

3. 创建Thymeleaf视图

在resources/templates目录下创建hello.html，这里演示一个简单的Thymeleaf模板。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello Page</title>
</head>
<body>
    <h1 th:text="${message}"></h1>
</body>
</html>

4. 运行和访问

启动Spring Boot应用，访问http://localhost:8080/hello，你将看到页面显示"Hello, Spring Boot and Thymeleaf!"。这就是一个基本的Spring Boot和Thymeleaf集成示例。

5. 数据绑定与模板引擎

Thymeleaf通过使用表达式语言（Expression Language，简称EL）来实现动态数据绑定和页面渲染。在Controller中，我们使用Model对象来传递数据到视图中，而Thymeleaf则通过${...}语法来引用这些数据。

6. 表单处理

除了静态页面展示，Spring Boot和Thymeleaf还能处理表单提交，并且提供了数据绑定和验证的功能。以下是一个简单的表单处理示例：

// Controller
@GetMapping("/form")
public String showForm(Person person) {
    return "form";
}

@PostMapping("/form")
public String submitForm(@Valid Person person, BindingResult result) {
    if (result.hasErrors()) {
        return "form";
    }
    // 处理表单提交逻辑
    return "redirect:/success";
}

<!-- form.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Form Example</title>
</head>
<body>
    <form action="#" th:action="@{/form}" th:object="${person}" method="post">
        <input type="text" th:field="*{name}" />
        <input type="submit" value="Submit" />
    </form>
</body>
</html>