form 태그 활용하기

서지우·2023년 8월 2일

Spring Boot

목록 보기

13/18

form 태그 활용하기

form태그 GET메소드

temp.html

주석으로 설명

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>form Get</h1>
    <!-- form태그는 서버랑 통신할때 -->
    <!-- action은 mapping, method는 get -->
    <!-- form태그안에서는 name이 중요 -->
    <form action="/temp" method="get">
        <!-- name이 중요함 / 서버에 있는 이름이랑 같아야 함 -->
        <input type="text" name="name">
        <input type="text" name="age">
        <!-- 타입 안적어주면 기본 타입이 submit -->
        <!-- 제출이 되기 때문에 button으로 할꺼면 지정해야함 -->
        <button>제출</button>
    </form>
    <hr>
    <h1>from Post</h1>
    <hr>
    <h1>from Post file</h1>
</body>
</html>

TempController.java

주석으로 설명

package com.example.site1.domain.temp.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

import com.example.site1.domain.temp.dto.ReqTempDTO;

@Controller
public class TempController {

    //form태그로 받는 건 @path~ 안붙여도 됨.
    @GetMapping("/temp") // 어떤경로로 들어올건지 , request임
    public String temp(ReqTempDTO reqTempDTO){
        System.out.println(reqTempDTO.getName());
        System.out.println(reqTempDTO.getAge());
        return "temp"; //어떤 파일에 접근하는지 , response
    }
}

ReqTempDTO.java

주석으로 설명

package com.example.site1.domain.temp.dto;

import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;

@NoArgsConstructor
@AllArgsConstructor
@Getter
@Setter
//Request는 꼭 setter를 넣어야먄 request에 데이터가 들어감
public class ReqTempDTO {
    private String name;
    private Integer age;
}

실행해서 localhost로 들어가서 123을 입력하면 쿼리스트링에 값이 들어가는 것을 볼 수 있다.

콘솔에서도 나오는 것을 볼 수 있다.

form 태그를 쓰면 화면에 있는 데이터를 가져옴
pathvariable어노테이션을 쓰지 않음

form 태그 POST 메소드

tmep.html

POST메소드를 실습하기 위해 버튼을 만들어준다.

    <form action="/temp" method="post">
        <input type="text" name="name">
        <input type="text" name="age">
        <button>제출</button>
    </form>

TempController.java

    @PostMapping("/temp")
    public String temp1(ReqTempDTO reqTempDTO) {
        System.out.println(reqTempDTO.getName());
        System.out.println(reqTempDTO.getAge());
        return "temp";
    }

실행하면 주소창에 값이 보이지 않는다.

주소창에 보이게 할려면 get, 그게 아니라면 post로 다하면 된다.

form 태그 POST 메소드로 파일올리기

temp.html

주석으로 설명

    <h1>from Post file</h1>
    <!-- 파일을 보낼때 꼭 설정해야함 - enctype-->
    <form action="/file" method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <button>제출</button>
    </form>

TempController.java


    @PostMapping("/file")
    // input에 이름을 file이라고 했으니 맟춰야함
    public String file(MultipartFile file){
        System.out.println(file.getOriginalFilename());
        System.out.println(file.getSize());
        return "temp";
    }

실행해서 파일선택을 눌려 사진을 선택하면 이름이 올라가고

콘솔에서 이름과 크기가 나온다.

여러개의 파일을 보내기 위해 코드를 변경해본다.

    <h1>from Post file</h1>
    <!-- 파일을 보낼때 꼭 설정해야함 - enctype-->
    <form action="/file" method="post" enctype="multipart/form-data">
        <input type="file" name="files" multiple>
        <button>제출</button>
    </form>

    @PostMapping("/file")
    // input에 이름을 file이라고 했으니 맟춰야함
    public String file(List<MultipartFile> files){
        for (MultipartFile multipartFile : files) {
            System.out.println(multipartFile.getOriginalFilename());
            System.out.println(multipartFile.getSize());
        }
        return "temp";
    }