이번 포스팅에서는, form request의 data를 controller handler의 매개변수로 mapping하는 방법에대해 알아보도록 하겠습니다.
https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data
http프로토콜과, form request에 대한 개념을 숙지하고 진행하시는것이, 외우는것이 아닌 공부를 하도록 도와줍니다!
1. HTML <Form>
클라이언트와 서버는 http프로토콜을 통해 상호간 통신을 하게됩니다. <form>은 클라이언트가 서버를 향해 데이터를 보낼 수 있도록 도와주는 것입니다.
하는일
조금 더 하는일을 자세히 말씀드리자면,
- 데이터가 어떻게 전송되어질지를 정의합니다.
- submit button이 눌러질때 서버에게 데이터가 전송됩니다.
name & value
<form> 엘리먼트 내부의 데이터들은 name=value 쌍으로하여 서버로 데이터가 전송되어집니다. 본 포스팅의 <form>의 method에 대해 설명할때 같이 추가설명을 드리겠습니다.
<form> 의 attribute
action
action 속성은 data를 보낼곳을 정의합니다.
xxxxxxxxxx<form action="https://example.com"> ...</form>예를들어 위의 경우 example.com의 서버로 데이터가 전송됩니다.
xxxxxxxxxx<form action="/somewhere_else">같은 호스트 서버로 데이터를 전송하는 경우, 호스트를 생략할 수 있습니다.
method
method 속성은 데이터가 어떻게 전송될지를 정의합니다. http 프로토콜에서는 여러가지 메소드를 정의하고 있습니다. 유명한 메소드로는 GET과 POST메소드가 존재합니다.
GET
get의 경우 서버에게 데이터를 요청하는 메소드입니다. 본문은 비어있게 되며, 서버로 전송될 데이터는, url의 파라미터로 추가됩니다.
x
<form action="http://www.foo.com" method="GET"> <div> <label for="say">What greeting do you want to say?</label> <input name="say" id="say" value="Hi"> </div> <div> <label for="to">Who do you want to say it to?</label> <input name="to" id="to" value="Mom"> </div> <div> <button>Send my greetings</button> </div></form>앞서 말씀드렸듯이, 서버로 전송될 데이터는, name=value 쌍으로 전송이 됩니다. 즉, <input> 엘리먼트 의 attribute중 name과 대응하는 값이 name=value쌍이 되어집니다.
예를들어 위의 요청은, www.foo.com/?say=hi&to=mom 으로 서버에 요청이 됩니다.
POST
POST / HTTP/2.0Host: foo.comContent-Type: application/x-www-form-urlencodedContent-Length: 13say=Hi&to=Mompost 메소드를 사용한다면, http 본문에 위와 같이 데이터가 추가되어 서버로 전송됩니다. 서버는 데이터를 요청을 받으면, 요청으로부터, 메서드, 리소스, 헤더, 본문을 얻어내어 이를 파싱하여 처리합니다.
2. Spring MVC form request 예제(POST)
프로젝트 구조입니다.
설정
build.gradle
x
dependencies { ... spring mvc 및 여러 의존성 implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' // thymeleaf}spring mvc 관련 의존성들과, thymeleaf 의존성을 추가합니다.
application.yml (properties)
xxxxxxxxxx...spring thymeleaf prefixclasspath/templates/ suffix.htmlcontroller에서 thymeleaf 파일을 spring mvc에서 편리하게 다룰수 있도록 설정합니다. 위와 같이 설정한다면, controller에서 서버에 존재하는 resource/templates/index.html 파일을 응답하는 경우, 간단히, "index"문자열 만을 return하면 됩니다.
form request html 작성
resources/templates/test.html 을 생성합니다.
xxxxxxxxxx<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form action="/form" method="post"> <label for="name">NAME : </label> <input type="text" id="name" name="name"> <br><br> <label for="age"> AGE : </label> <input type="text" id="age" name="age"> <input type="submit" value="Submit"></form></body></html>위와 같이 test.html을 작성합니다.
TestModel 작성
xxxxxxxxxxpublic class TestModel { private String name; private int age; public TestModel(String name, int age) { this.name = name; this.age = age; } public String getName() { return name; } public int getAge() { return age; }}form data를 mapping할 vo클래스 입니다.
TestController
public class TestController { ("/") public String getTestPage() { return "test"; } ("/form") public void test( TestModel testModel) { System.out.println(testModel.getAge()); System.out.println(testModel.getName()); }}우선 test.html을 전송해줄 @GetMapping 핸들러 그리고, 클라이언트가 전송한 form data를 처리할 @PostMapping 핸들러를 작성합니다.
클라이언트가 전송한 데이터를 처리한후, 별도의 페이지를 보여주지 않을 것이므로, @ResponseBody어노테이션을 추가합니다.
또한 클라이언트가 전송한 데이터를 TestModel에 맵핑하기 위해, @ModelAttribute 어노테이션을 부여합니다.
브라우저를 열어, localhost:8080/으로 연결합니다. 데이터를 입력한 뒤 submit을 클릭합니다.
데이터가 콘솔에 잘 나타납니다.
'FrameWork > Spring MVC' 카테고리의 다른 글
| Spring MVC - 수정폼 작성방법(@SessionAttributes, SessionStatus란) (0) | 2020.08.16 |
|---|---|
| Spring MVC - @ModelAttribute의 장점(@RequestParam와 @ModelAttribute) (7) | 2020.08.15 |
| Spring MVC - 유연한 다중 파일업로드 핸들러 만들기 (Multipart upload) (0) | 2020.01.29 |
| SpringMVC - @RequestBody로 Timestamp 전달하기 (@JsonFormat : timezone 설정, 입력형식 정하기) (0) | 2019.07.25 |
| SpringMVC - 핸들러 메소드 9 (Exception 처리 Handler(개발자 정의)) (0) | 2019.06.22 |
