在本教程中,您将学习如何编写代码以显示从用户那里获取信息的表单,以及如何编写代码以在用户提交表单时获取表单数据。我将引导您开发一个 Spring Boot 应用程序,该应用程序向用户呈现以下表单:

springboot前端页面表单提交代码 springboot 表单_spring

 

如您所见,此表单包含几乎标准的 HTML 输入字段,如文本框、单选按钮、选择框(下拉列表)、复选框和文本区域——以及标签和提交按钮。

我们将使用带有 Spring MVC、Spring Form 标签和 JSP 的 Spring Boot。您可以使用任何 Java IDE,例如 Eclipse 或 Spring Tool Suite。

如果您是 Spring Boot 新手,我建议您先学习本教程。然后回到这个。

 

1.创建Spring Boot项目

您可以使用Spring Initializr 工具创建一个 Spring Boot 项目,然后将该项目导入 Eclipse IDE。如果您使用 Spring Tool Suite,则可以直接在 IDE中创建 Spring Boot 项目。无论如何,项目在pom.xml文件中必须有以下依赖信息:

<?xml version="1.0" encoding="UTF-8"?>
<project ...>
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.4.RELEASE</version>
<relativePath />
</parent>
 
<groupId>net.codejava</groupId>
<artifactId>SpringBootFormHandling</artifactId>
<version>1.0</version>
 
<name>SpringBootFormHandling</name>
<description>Form handling with Spring Boot</description>
 
<properties>
<java.version>1.8</java.version>
</properties>
 
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>    
</dependencies>
 
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
 
</project>

如您所见,这里我们使用 Spring Boot 2.2.4 和 Java 1.8。spring-boot-starter-web依赖项为在嵌入式 Tomcat 服务器上运行的Spring MVC Web 应用程序提供了默认配置。spring-boot-maven-plugin可以将我们的 Spring Boot 应用程序打包到 JAR/WAR 文件中。

并确保项目具有以下目录结构:

 

springboot前端页面表单提交代码 springboot 表单_表单_02

Spring MVC 应用程序的所有配置都是由 Spring Boot 在后台完成的。

提示: 使用 Spring Boot DevTools 进行自动重启 ,因此您不必在开发过程中手动重启应用程序。

 

2. 使用 Spring Boot 启用 JSP

要将 JSP (JavaServer Pages) 与 Spring Boot 一起使用,您必须在pom.xml文件中添加以下依赖项:

<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<scope>provided</scope>
</dependency>

并在application.properties文件中配置 Spring MVC 解析器如下:

spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp

这意味着您必须将 JSP 文件放在项目中的此目录下:

src/main/webapp/WEB-INF/views

 

3.创建Spring MVC控制器类

使用以下初始代码创建一个名为MvcController的 Spring MVC 控制器类:

package net.codejava;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
public class MvcController {
 
@RequestMapping("/")
public String home() {
System.out.println("Going home...");
return "index";
}
}

您可以看到处理程序方法home()将向应用程序的主页(上下文根 /)提供请求。它返回名为 index 的视图,该视图将被解析为/WEB-INF/views/index.jsp下的 JSP 文件。

 

4. 更新主页

接下来,使用以下 HTML 代码在src/main/webapp/WEB-INF/views目录下创建主页index.jsp :

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Spring Boot Form Handling Example</title>
</head>
<body>
<h1>Spring Boot Form Handling Example</h1>
<h2>Spring Form Tags with JSP</h2>
<a href="/register">Click here</a>
</body>
</html>

运行 Spring Boot 应用程序,并在 localhost 访问 Web 应用程序,您将看到如下所示的主页:

springboot前端页面表单提交代码 springboot 表单_应用程序_03

当用户单击超链接时,将显示用户注册表单。

 

5. 代码域模型类

在注册表单中创建代表用户详细信息的 User r类,如下所示:

package net.codejava;
 
import java.sql.Date;
 
public class User {
private String name;
private String email;
private String gender;
private String password;
private String profession;
private String note;
private Date birthday;
private boolean married;
 
// getters...
// setters...
 
// override toString()
 
}

请注意,为简洁起见,未显示 getter 和 setter 方法。您还应该覆盖返回用户所有详细信息的toString()方法。

 

6.代码展示表单处理方法

当用户点击主页中的超链接时,为了处理应用程序的请求,在控制器类中添加以下方法:

public String showForm(Model model) {
User user = new User();
List<String> professionList = Arrays.asList("Developer", "Designer", "Tester");
 
model.addAttribute("user", user);
model.addAttribute("professionList", professionList);
 
return "register_form";
}

使用以下导入语句:

import java.util.Arrays;
import java.util.List;
 
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

当用户单击主页中的超链接/register时,将调用showForm()处理程序方法。它创建两个对象并将其添加到模型中:

-用于捕获表单上字段值的用户对象。

-显示表单上下拉列表(选择框)值的职业列表。

然后它返回视图名称register_form

 

7.代码Spring MVC表单页面

要向用户显示用户注册表单,请使用以下代码在/WEB-INF/views下创建register_form.jsp文件:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>   
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>User Registration Form</title>
</head>
<body>
<div align="center">
<h2>User Registration</h2>
<form:form action="register" method="post" modelAttribute="user">
<form:label path="name">Full name:</form:label>
<form:input path="name"/><br/>
 
<form:label path="email">E-mail:</form:label>
<form:input path="email"/><br/>
 
<form:label path="password">Password:</form:label>
<form:password path="password"/><br/>      
 
<form:label path="birthday">Birthday (yyyy-mm-dd):</form:label>
<form:input path="birthday"/><br/>
 
<form:label path="gender">Gender:</form:label>
<form:radiobutton path="gender" value="Male"/>Male
<form:radiobutton path="gender" value="Female"/>Female<br/>
 
<form:label path="profession">Profession:</form:label>
<form:select path="profession" items="${professionList}" /><br/>
 
<form:label path="married">Married?</form:label>
<form:checkbox path="married"/><br/>
 
<form:label path="note">Note:</form:label>
<form:textarea path="note" cols="25" rows="5"/><br/>
 
<form:button>Register</form:button>
</form:form>
</div>
</body>
</html>

我们使用 Spring 表单标签将模型中的对象与表单中的字段进行映射,因此需要在文件开头声明以下指令:

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

然后我们使用<form:form>标签来创建一个表单:

<form:form action="register" method="post" modelAttribute="user">

在这里,请注意modelAttribute属性,该属性指定映射到此表单的模型中对象的名称。还记得showForm()方法中的用户对象吗?

然后对于每个表单字段,我们使用 Spring 表单标签作为标签和字段:

<form:label path="email">E-mail:</form:label>
<form:input path="email"/>

请注意,路径属性的值必须引用模型对象中的字段。

要格式化表单,请将以下 CSS 样式添加到页面的 head 部分:

<head>
...
<style type="text/css">
label {
display: inline-block;
width: 200px;
margin: 5px;
text-align: left;
}
input[type=text], input[type=password], select {
width: 200px;  
}
input[type=radio] {
display: inline-block;
margin-left: 45px;
}
input[type=checkbox] {
display: inline-block;
margin-right: 190px;
}  
 
button {
padding: 10px;
margin: 10px;
}
</style>
</head>

运行时,表单如下图所示:

springboot前端页面表单提交代码 springboot 表单_应用程序_04

 

8.代码表单提交处理方法

要在用户单击表单上的注册按钮时处理表单提交,请将以下方法添加到控制器类:

@PostMapping("/register")
public String submitForm(@ModelAttribute("user") User user) {
 
System.out.println(user);
 
return "register_success";
}

使用以下导入语句:

import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

如您所见,表单的方法是 post,因此@PostMapping注解用于处理程序方法来处理 HTTP POST 请求。

请注意,@ModelAttribute注释用于方法参数User user

submitForm()方法简单地将用户对象的详细信息打印到控制台,并返回名为register_success的视图,该视图解析到下面描述的 JSP 页面。

 

9.代码结果页面

最后,使用以下代码创建register_success.jsp文件:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Registration Success</title>
<style type="text/css">
span {
display: inline-block;
width: 200px;
text-align: left;
}
</style>
</head>
<body>
<div align="center">
<h2>Registration Succeeded!</h2>
<span>Full name:</span><span>${user.name}</span><br/>
<span>E-mail:</span><span>${user.email}</span><br/>
<span>Password:</span><span>${user.password}</span><br/>
<span>Birthday:</span><span>${user.birthday}</span><br/>
<span>Gender:</span><span>${user.gender}</span><br/>
<span>Profession:</span><span>${user.profession}</span><br/>
<span>Married?:</span><span>${user.married}</span><br/>
<span>Note:</span><span>${user.note}</span><br/>
</div>
</body>
</html>

该页面简单地使用了 JSP 的表达式语言(EL)来显示用户提交的表单信息,如下图所示:

springboot前端页面表单提交代码 springboot 表单_开发语言_05

那是关于在 Spring Boot 中使用 Spring 表单标签和 JSP 处理表单的教程。您可以下载下面附加的示例项目。

要验证用户对表单的输入,请参阅 Spring Boot 表单验证教程。

ava 程序员(SCJP 和 SCWCD)。他从 Java 1.4 开始使用 Java 编程,从那时起就爱上了 Java。在Facebook 上与他交朋友,观看Spring Boot 表单验证教程。