spring boot form表单接收数组 spring boot 提交表单

转载

小蝌蚪 2024-01-11 08:05:43

文章标签 java spring boot intellij idea spring html 文章分类 spring boot 后端开发

创建一个Spring初始化项目

点击File->New->Project，选择Spring Initalizr，选择JDK版本，点击Next

spring boot form表单接收数组 spring boot 提交表单_java

在此窗口输入自定义信息，点击Next

spring boot form表单接收数组 spring boot 提交表单_spring boot_02

选择Web->Spring Web，点击Next

spring boot form表单接收数组 spring boot 提交表单_spring boot_03

输入项目名，点击Finish完成创建

spring boot form表单接收数组 spring boot 提交表单_spring boot_04

创建完成后，右下角会弹出以下内容，选择Enable Auto-Import，这样IDEA就可以自动帮我们导入我们所需的内容

spring boot form表单接收数组 spring boot 提交表单_spring boot_05

导入依赖

在此项目中只需在pom.xml中再添加一个thymeleaf依赖

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

完整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.4.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.form</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>FormDemo project for 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>
       <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>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

编写输入页面

在src->main->resources->templates中创建input.html文件(在后面的配置中寻找静态页面会自动在这个文件下寻找)

注意此处头文件中需要加载thymeleaf

<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

完整代码如下

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>个人信息填写</title>
</head>
<body>
    <form th:action="@{/out}" method="post">
    //此处的@{/out}会自动进入后面创建的PersonController.java文件中用@RequestMapping("out")注解的方法
        姓名:<input type="text" name="name"><br><br>
        性别:<input type="radio" name="sex" value="女">女
             <input type="radio" name="sex" value="男">男<br><br>
        年龄:<input type="text" name="age"><br><br>
        学历:<select name="education">
                <option value="小学">小学</option>
                <option value="初中">初中</option>
                <option value="高中">高中</option>
                <option value="本科">本科</option>
                <option value="研究生">研究生</option>
                <option value="博士">博士</option>
             </select><br><br>
        个人简介:<textarea name="information" rows="10" cols="20"></textarea><br><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

编写实体类

在src->main->java->com->bean下创建Person.java，添加属性，构造方法等内容，完整代码如下

package com.bean;
public class Person {
    private String name;
    private String sex;
    private int age;
    private String education;
    private String information;
    public Person(String name, String sex, int age, String education, String information) {
        this.name = name;
        this.sex = sex;
        this.age = age;
        this.education = education;
        this.information = information;
    }
    @Override
    public String toString() {
        return "Person{" +
                "name='" + name + '\'' +
                ", sex='" + sex + '\'' +
                ", age=" + age +
                ", education='" + education + '\'' +
                ", information='" + information + '\'' +
                '}';
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getSex() {
        return sex;
    }
    public void setSex(String sex) {
        this.sex = sex;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
    public String getEducation() {
        return education;
    }
    public void setEducation(String education) {
        this.education = education;
    }
    public String getInformation() {
        return information;
    }
    public void setInformation(String infromation) {
        this.information = information;
    }
}

编写控制类

在src->main->java->com->config中创建PersonController.java，用来完成表单数据的传递功能，完整代码如下

package com.config;
import com.bean.Person;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class PersonController {
    @RequestMapping("out")
    //此处与前面input.html中th:action="@{/out}"对应
    public String outputmessage(@RequestParam("name") String name,
                                @RequestParam("sex") String sex,
                                @RequestParam("age") int age,
                                @RequestParam("education") String education,
                                @RequestParam("information") String information,
                                //此注解用于接收表单传递的内容
                                Model model){
        Person person = new Person(name,sex,age,education,information);
        model.addAttribute("myperson",person);
        //将自定义的person实体添加到model模型中，方便后面获取
        return "output";
        //转入output.html页面
    }
}

编写一个类来控制url路径

在src->main->java->com->config中添加hello.java，这个文件的作用是输入的url为localhost:8080/input时自动转入templates下input.html静态页面
完整代码如下

package com.config;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class hello {
    @RequestMapping("input")
    //input可随意更改
    public String input(){
        return "input";
        //转入input.html页面
    }
}

编写输出页面

在src->main->resources->templates中创建output.html文件,同样需要引入thymeleaf完整代码如下

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
</head>
<body>
    <h2>姓名:</h2><h3 th:text="${myperson.name}"></h3>
    <h2>性别:</h2><h3 th:text="${myperson.sex}"></h3>
    <h2>年龄:</h2><h3 th:text="${myperson.age}"></h3>
    <h2>学历:</h2><h3 th:text="${myperson.education}"></h3>
    <h2>个人简介:</h2><h3 th:text="${myperson.information}"></h3>
    //通过我们之前保存在model中的myperson实体获取表单中的内容
</body>
</html>