表单（form）

1、表单的作用：

• 收集 用户填入的 数据，并将这些数据 提交给服务器
• 表单的语法

        <form action="服务器地址" method="请求方式" enctype="数据格式">
            <!-- 表单项 -->
            <input type="submit" value="提交按钮">
        </form>

method 请求方式有
get (默认) 提交时，数据跟在URL地址之后 post提交时，数据在请求体内

enctype 在 post 请求时，指定数据的格式
application/x-www-form-urlencoded (默认) multipart/form-data

其中表单提供多种收集数据的方式
有 name 属性的表单项数据，才会被发送给服务器

        <form action="http://localhost:8080/form">
            <input type="text" name="username">
            <input type="submit" value="提交">
        </form>

2、通过Java程序理解表单 

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>2.7.0</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

   <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>2.2.1.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <version>2.2.1.RELEASE</version>
            <scope>test</scope>
        </dependency>      
   </dependencies>
   <build>
        <pluginManagement>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                    <version>3.0.2</version>
                </plugin>
            </plugins>
        </pluginManagement>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

package com.csdn.js;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
@Controller
public class MyController {

    @RequestMapping("/form")
    @ResponseBody
    public String form(String username) {
        System.out.println("username:" + username);
        return "收到数据";
    }
}

package com.csdn.js;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;
@SpringBootApplication
@ServletComponentScan
public class MyApp {
    public static void main(String[] args) {
        SpringApplication.run(MyApp.class, args);
    }
}

• 启动服务器，输入内容，提交表单

 3、提交多个数据

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>2.7.0</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>2.2.1.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <version>2.2.1.RELEASE</version>
            <scope>test</scope>
        </dependency>
     
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.20</version>
        </dependency>
    </dependencies>

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

        <form action="http://localhost:8080/form" method="post" enctype="multipart/form-data">
            <input type="text" name="username"><hr>
            <input type="password" name="password"><hr>
            <input type="hidden" name="id" value="1"><hr>
            <input type="date" name="birthday"><hr>

            男<input type="radio" name="sex" value="男" checked>
            女<input type="radio" name="sex" value="女"><hr>

            唱歌<input type="checkbox" name="fav" value="唱歌">
            逛街<input type="checkbox" name="fav" value="逛街">
            游戏<input type="checkbox" name="fav" value="游戏"><hr>

            <input type="file" name="avatar"><hr>

            <input type="submit" value="提交">
        </form>

 

package com.csdn.js;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.time.LocalDate;
import java.util.List;
@Controller
public class MyController {
    @RequestMapping("/form")
    @ResponseBody
    public String form(User user, MultipartFile avatar) {
        System.out.println("user:" + user);
        System.out.println("avatar:" + avatar.getSize());//得到文件的字节数
        return "收到数据";
    }
    @Data
    @NoArgsConstructor
    @AllArgsConstructor
    static class User {
        private String username;
        private String password;
        private int id;
        //前端的日期格式是 2023-10-29 后端需要日期时间格式
        @DateTimeFormat(pattern = "yyyy-MM-dd")
        private LocalDate birthday;
        private String sex;
        private List<String> fav;
    }
}

package com.csdn.js;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;
@SpringBootApplication
@ServletComponentScan
public class MyApp {
    public static void main(String[] args) {
        SpringApplication.run(MyApp.class, args);
    }
}