正文

“轻松上手：教你如何使用Thymeleaf提交普通HTML表单”

/0 浏览量
0420

在开发基于Spring Boot的Web应用程序时，Thymeleaf是一个流行的模板引擎，它允许我们以简洁的方式创建动态HTML页面。今天，我将带你轻松上手，学习如何使用Thymeleaf来提交一个普通的HTML表单。

了解Thymeleaf

首先，让我们快速了解一下Thymeleaf。Thymeleaf是一个服务器端的Java模板引擎，它允许你将静态内容与动态数据相结合，生成HTML页面。使用Thymeleaf，你可以避免在HTML中直接编写Java代码，从而使页面更加清晰和易于维护。

准备工作

在开始之前，请确保你的开发环境中已经安装了以下内容：

  • Java开发环境
  • Spring Boot项目
  • Thymeleaf依赖

在你的pom.xml文件中，添加以下依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

创建表单

现在，让我们创建一个简单的HTML表单。这个表单将包含一个用户名和一个密码字段，并且当用户提交表单时，数据将被发送到服务器。

在你的Spring Boot项目中，创建一个名为Form.html的Thymeleaf模板文件，并添加以下内容：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf表单示例</title>
</head>
<body>
    <form th:action="@{/submitForm}" th:object="${user}" method="post">
        <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" th:field="*{username}" />
        </div>
        <div>
            <label for="password">密码:</label>
            <input type="password" id="password" th:field="*{password}" />
        </div>
        <div>
            <button type="submit">提交</button>
        </div>
    </form>
</body>
</html>

在上面的代码中，我们创建了一个表单，其中包含两个输入字段：用户名和密码。th:action属性指定了表单提交的URL，th:object属性用于绑定表单数据到Java对象。

处理表单提交

接下来，我们需要创建一个控制器来处理表单提交。在你的Spring Boot项目中，创建一个名为UserController的类，并添加以下内容：

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

@Controller
@RequestMapping("/user")
public class UserController {

    @GetMapping
    public String showForm() {
        return "Form";
    }

    @PostMapping("/submitForm")
    public String submitForm(User user, Model model) {
        // 在这里处理表单提交逻辑
        model.addAttribute("user", user);
        return "result";
    }
}

在上面的代码中，我们定义了两个方法：showForm用于显示表单，submitForm用于处理表单提交。在submitForm方法中，我们使用Model对象将用户数据传递到结果页面。

创建结果页面

最后，我们需要创建一个结果页面来显示提交的数据。在你的Spring Boot项目中，创建一个名为Result.html的Thymeleaf模板文件，并添加以下内容：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>表单提交结果</title>
</head>
<body>
    <h1>表单提交成功</h1>
    <p>用户名: <span th:text="${user.username}"></span></p>
    <p>密码: <span th:text="${user.password}"></span></p>
</body>
</html>

在上面的代码中，我们使用Thymeleaf表达式来显示用户名和密码。

总结

通过以上步骤，你已经学会了如何使用Thymeleaf创建一个简单的HTML表单，并处理表单提交。希望这篇文章能帮助你轻松上手Thymeleaf，并在你的项目中使用它。如果你有任何问题，请随时提问。

-- 展开阅读全文 --