Spring Boot入门（3）处理网页表单

谁借莪１个温暖的怀抱￠ 2022-05-27 02:16 104阅读 0赞

## 介绍 ##

本次分享将介绍如何在Spring Boot中处理网页表单。  
  网页表单是网页开发中的重要内容，它在HTML中的标签为，在网页中主要负责数据采集功能。我们在浏览网站时，常常会碰到注册账号、账号登录等，这就是表单的典型应用。  
  我们将创建Spring Boot项目webform来展示如何处理表单，其起步依赖为web和Thymeleaf，具体的创建方法可参考： [Spring Boot入门（1）Hello World][Spring Boot_1_Hello World]。这也是Spring Boot官方介绍网站中的一个例子。

## 程序 ##

整个程序的完整项目结构如下图：

![项目结构][70]  
  
  我们将会一一介绍需要配置的文件。首先是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][http_localhost_8080_greeting] ，如下图所示：

![greeting.html][]  
  
点击Submit后，调到result.html页面，其内容如下：

![result.html][]  
  
点击”Submit another message”即可调到greeting.html网页。这就说明我们用Spring Boot来处理网页表单成功啦！  
  本次分享到此结束，接下来还会继续更新Spring Boot方面的内容，欢迎大家交流~~

[Spring Boot_1_Hello World]: https://segmentfault.com/a/1190000014222564
[70]: /images/20220527/e53d35483c72477b9593aa90b88e57b2.png
[http_localhost_8080_greeting]: http://localhost:8080/greeting
[greeting.html]: /images/20220527/97e37bf6d9014f2baa9f55ec195fa7df.png
[result.html]: /images/20220527/3eb60b77718c4d15b1f7b1bae7c4758b.png