介绍
本次分享将介绍如何在Spring Boot中处理网页表单。
网页表单是网页开发中的重要内容,它在HTML中的标签为<form></form>,在网页中主要负责数据采集功能。我们在浏览网站时,常常会碰到注册账号、账号登录等,这就是表单的典型应用。
我们将创建Spring Boot项目webform来展示如何处理表单,其起步依赖为web和Thymeleaf。这也是Spring Boot官方介绍网站中的一个例子。
程序
整个程序的完整项目结构如下图:
我们将会一一介绍需要配置的文件。首先是build.gradle,其代码如下:
buildscript { ext { springBootVersion = '2.0.1.RELEASE' } repositories { mavenCentral() } dependencies { classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}") } } apply plugin: 'java' apply plugin: 'eclipse' apply plugin: 'org.springframework.boot' apply plugin: 'io.spring.dependency-management' group = 'com.example' version = '0.0.1-SNAPSHOT' sourceCompatibility = 1.8 repositories { mavenCentral() } dependencies { // https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-web compile group: 'org.springframework.boot', name: 'spring-boot-starter-web', version: '2.0.0.RELEASE' // https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf compile group: 'org.springframework.boot', name: 'spring-boot-starter-thymeleaf', version: '2.0.1.RELEASE' testCompile('org.springframework.boot:spring-boot-starter-test') }
hello包下的两个java文件,Greeting.java代码如下:
package com.example.webform.hello; 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; } }
GreetingController.java文件的代码如下:
package com.example.webform.hello; 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"; } }
这是Spring MVC模型中的控制器。 它用GET请求来处理/greeting的数据,返回一个视图的名字,也就是“greeting”;用POST请求来处理/greeting的数据,返回一个视图的名字,也就是“result”。一个视图就是一个HTML文件。其中模型(Model)的属性用到了Greeting类,也就是在Greeting.java中定义的类。
在templates中用Thymeleaf定义了两个HTML文件,用来网页展示。greeting.html的代码如下:
<!DOCTYPE HTML> <html xmlns:th="http://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>
result.html文件的代码如下:
<!DOCTYPE HTML> <html xmlns:th="http://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>
最后我们需要定义一个启动引导类,也就是程序的入口,即DemoApplication.java,它的代码如下:
package com.example.webform; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class DemoApplication { public static void main(String[] args) { SpringApplication.run(DemoApplication.class, args); } }
这样我们就定义完整了这个项目的所有编写工作。
运行
运行上述程序,启动成功后在浏览器中输入:http://localhost:8080/greeting ,如下图所示:
点击Submit后,调到result.html页面,其内容如下:
点击"Submit another message"即可调到greeting.html网页。这就说明我们用Spring Boot来处理网页表单成功啦!