SpringBoot 2 处理表单提交

开篇词

该指南将引导你使用 Spring 创建和提交 Web 表单。

你将创建的应用

在该指南中，我们将构建一个 Web 表单，该表单可以通过以下 URL 访问：http://localhost:8080/greeting。
在浏览器中查看该页面将显示该表单。我们可以通过填充 id 和 content 表单字段来提交问候语。提交表单后将显示结果页面。

你将需要的工具

大概 15 分钟左右；
你最喜欢的文本编辑器或集成开发环境（IDE）
JDK 1.8 或更高版本；
Gradle 4+ 或 Maven 3.2+
你还可以将代码直接导入到 IDE 中：
- Spring Too Suite (STS)
- IntelliJ IDEA

如何完成这个指南

像大多数的 Spring 入门指南一样，你可以从头开始并完成每个步骤，也可以绕过你已经熟悉的基本设置步骤。如论哪种方式，你最终都有可以工作的代码。

要从头开始，移步至从 Spring Initializr 开始；
要跳过基础，执行以下操作：
- 下载并解压缩该指南将用到的源代码，或借助 Git 来对其进行克隆操作：git clone https://github.com/spring-guides/gs-handling-form-submission.git
- 切换至 gs-handling-form-submission/initial 目录；
- 跳转至该指南的创建 Web 控制器。

待一切就绪后，可以检查一下 gs-handling-form-submission/complete 目录中的代码。

从 Spring Initializr 开始

对于所有的 Spring 应用来说，你应该从 Spring Initializr 开始。Initializr 提供了一种快速的方法来提取应用程序所需的依赖，并为你完成许多设置。该示例需要 Spring Web 和 Thymeleaf 依赖。下图显示了此示例项目的 Initializr 设置：

上图显示了选择 Maven 作为构建工具的 Initializr。你也可以使用 Gradle。它还将 com.example 和 handling-form-submission 的值分别显示为 Group 和 Artifact。在本示例的其余部分，将用到这些值。

以下清单显示了选择 Maven 时创建的 pom.xml 文件：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.2.2.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>handling-form-submission</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>handling-form-submission</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>

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

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
			<exclusions>
				<exclusion>
					<groupId>org.junit.vintage</groupId>
					<artifactId>junit-vintage-engine</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

以下清单显示了在选择 Gradle 时创建的 build.gradle 文件：

plugins {
	id 'org.springframework.boot' version '2.2.2.RELEASE'
	id 'io.spring.dependency-management' version '1.0.8.RELEASE'
	id 'java'
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	testImplementation('org.springframework.boot:spring-boot-starter-test') {
		exclude group: 'org.junit.vintage', module: 'junit-vintage-engine'
	}
}

test {
	useJUnitPlatform()
}

创建 Web 控制器

在 Spring 建立网站的方法中，HTTP 请求由控制器处理。这些组件可以通过 @Controller 注解来轻松识别。以下清单中的 GreetingController（来自 src/main/java/com/example/handlingformsubmission/GreetingController.java）通过返回 View 的名称（在该例中为 greeting）来处理 /greeting 的 GET 请求。以下 View 负责渲染 HTML 内容：

package com.example.handlingformsubmission;

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

@Controller
public class GreetingController {

  @GetMapping("/greeting")
  public String greetingForm(Model model) {
    model.addAttribute("greeting", new Greeting());
    return "greeting";
  }

  @PostMapping("/greeting")
  public String greetingSubmit(@ModelAttribute Greeting greeting) {
    return "result";
  }

}

该控制器简洁明了，但其处理了很多细节。该节的其余部分将逐步对其进行分析。

映射注释使我们可以将 HTTP 请求映射到特定的控制器方法。该控制器中的两个方法都映射到 /greeting。我们可以使用 @RequestMapping（默认情况下，它映射所有 HTTP 操作，例如 GET、POST 等等）。但是，在这种情况下，greetingForm() 方法通过使用 @GetMapping 注解来专门映射至 GET，而 greetingSubmit() 则通过 @PostMapping 来映射至 POST。该映射使控制器可以区分对 /greeting 端点的请求。

greetingForm() 方法使用 Model 对象将新的 Greeting 暴露给视图模版。以下代码中的 Greeting 对象（来自 src/main/java/com/example/handlingformsubmission/Greeting.java）包含诸如 id 和 content 之类的字段，这些字段与 greeting 视图中的表单字段相对应，并用于从表单中捕获信息：

package com.example.handlingformsubmission;

public class Greeting {

  private long id;
  private String content;

  public long getId() {
    return id;
  }

  public void setId(long id) {
    this.id = id;
  }

  public String getContent() {
    return content;
  }

  public void setContent(String content) {
    this.content = content;
  }

}

方法主体的实现依赖于视图技术，通过将视图名称（greeting）转换为要渲染的模版来执行 HTML 的服务端渲染。在这种情况下，我们使用 Thymeleaf，它解析 greeting.html 模版并评估各种模版表达式以渲染表单。以下清单（来自 src/main/resources/templates/greeting.html）显示了 greeting 模版：

<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
    <title>Getting Started: Handling Form Submission</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<h1>Form</h1>
    <form action="#" th:action="@{/greeting}" th:object="${greeting}" method="post">
    	<p>Id: <input type="text" th:field="*{id}" /></p>
        <p>Message: <input type="text" th:field="*{content}" /></p>
        <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
    </form>
</body>
</html>

th:action="@{/greeting}" 表达式将表单定向至 /greeting 的 POST 端点，而 th:object="${greeting}" 表达式声明用于收集表单数据的模型对象。用 th:field="{id}" 和 th:field="{content}" 表示的两个表单字段对应于与 Greeting 对象中的字段。

这涵盖了用于渲染表单的控制器、模型以及视图。现在，我们可以回顾提交表单的过程。如前所述，该表单通过使用 POST 调用提交到 /greeting 端点。greetingSubmit() 方法接收由表单填充的 Greeting 对象。Greeting 是一个 @ModelAttribute，因此它被绑定至表单传入的内容。同时，还可以通过按名称引用提交的数据来渲染 result 视图（默认情况下为方法参数的名称，在该案例中为 greeting）。id 在 <p th:text="'id: ' + ${greeting.id}" /> 表达式中被渲染。以下清单（来自 src/main/resources/templates/result.html）显示了结果模版：

<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
    <title>Getting Started: Handling Form Submission</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<h1>Result</h1>
    <p th:text="'id: ' + ${greeting.id}" />
    <p th:text="'content: ' + ${greeting.content}" />
    <a href="/greeting">Submit another message</a>
</body>
</html>

为清晰起见，该示例使用两个单独的视图模版来呈现表单和显示提交的数据。但是，我们可以同时使用两个视图。

使应用可执行

尽管我们可以将该服务打包为传统的 WAR 文件，以部署至外部应用服务器，但是更简单的方法是创建一个独立的应用。我们将所有内容打包至一个可执行的 JAR 文件中，由一个普通 Java main() 方法来驱动。在该过程中，我们使用 Spring 的支持来将 Tomcat servlet 容器作为 HTTP 运行时嵌入其中，而不是部署到外部实例。以下清单（来自 src/main/java/com/example/handlingformsubmission/HandlingFormSubmissionApplication.java）显示了应用类：

package com.example.handlingformsubmission;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class HandlingFormSubmissionApplication {

  public static void main(String[] args) {
    SpringApplication.run(HandlingFormSubmissionApplication.class, args);
  }

}

@SpringBootApplication 是一个便利的注解，它添加了以下所有内容：

@Configuration：将类标记为应用上下文 Bean 定义的源；
@EnableAutoConfiguration：告诉 Spring Boot 根据类路径配置、其他 bean 以及各种属性的配置来添加 bean。
@ComponentScan：告知 Spring 在 com/example 包中寻找他组件、配置以及服务。

main() 方法使用 Spring Boot 的 SpringApplication.run() 方法启动应用。

构建可执行 JAR

我们可以结合 Gradle 或 Maven 来从命令行运行该应用。我们还可以构建一个包含所有必须依赖项、类以及资源的可执行 JAR 文件，然后运行该文件。在整个开发生命周期中，跨环境等等情况下，构建可执行 JAR 可以轻松地将服务作为应用进行发布、版本化以及部署。

如果使用 Gradle，则可以借助 ./gradlew bootRun 来运行应用。或通过借助 ./gradlew build 来构建 JAR 文件，然后运行 JAR 文件，如下所示：

java -jar build/libs/gs-handling-form-submission-0.1.0.jar

由官网提供的以上这条命令的执行结果与我本地的不一样，我需要这样才能运行：java -jar build/libs/handling-form-submission-0.0.1-SNAPSHOT.jar。

如果使用 Maven，则可以借助 ./mvnw spring-boot:run 来运行该用。或可以借助 ./mvnw clean package 来构建 JAR 文件，然后运行 JAR 文件，如下所示：

java -jar target/gs-handling-form-submission-0.1.0.jar

由官网提供的以上这条命令的执行结果与我本地的不一样，我需要这样才能运行：java -jar target/handling-form-submission-0.0.1-SNAPSHOT.jar。

我们还可以将 JAR 应用转换成 WAR 应用。

显示日志记录输出。该服务应在几秒内启动并运行。

测试服务

现在，该网站正在运行，请访问 http://localhost:8080/greeting，在其中我们可以看到以下表单：

提交 ID 和消息以查看结果：

概述

恭喜你！我们刚刚使用 Spring 创建并提交了一个表单。

参见

以下指南也可能会有所帮助：

验证表单输入（尽请期待～）
文件上传

想看指南的其他内容？请访问该指南的所属专栏：《Spring 官方指南》

Snow Hide

发布了151 篇原创文章 · 获赞 10 · 访问量 1万+

私信关注