[Spring boot] 04.스프링 부트 폼 입력 데이터 주고 받기

 

안녕하세요

 

이번 포스팅은 폼에 입력 데이터를 넣고 컨트롤러에 전송해보도록 하겠습니다.

 

 

먼저,

 

(1) 화면 생성

 

resources > templates에 sampleArticle이라는 디렉터리를 새로 만듭니다.

 

그 다음엔, sampleArticle.mustache를 만듭니다.

 

 

sampleArticle.mustache를 아래와 같이 작성한다.

 

{{>sampleLayout/sampleHeader}}

<form class="container" action="/articles/create" method="post">
    <div class="mb-3">
        <label class="form-label">제목</label>
        <input type="text" class="form-control" name="title">
    </div>
    <div class="mb-3">
        <label class="form-label">내용</label>
        <textarea class="form-control" rows="3" name="content"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

{{>sampleLayout/sampleFooter}}

 

서버를 재기동 시키면 다음과 같이 화면이 나온다

 

이제

sampleArticle.mustache에 있는 form에서

action이 post방식이기 때문에,

 

SampleArticleController에서도 post 방식으로 받아줘야 한다.

 

728x90

 

(2) 컨트롤러에 mapping 추가

 

SampleArticleController.java

package com.example.fisrtProject.controller;

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

@Controller
public class SampleArticleController {

    @GetMapping("/sampleArticle/article")
    public String newArticleForm() {

        return "sampleArticle/sampleArticle";
    }

    @PostMapping("/sampleArticle/create")
    public String createArticle() {
        
        return "";
    }
}

 

이제 컨트롤러에서 화면에 있는 데이터들을 받으려면 DTO가 필요하다.

 

DTO를 만들어줘야 한다.

 

(3) DTO 생성

 

DTO 생성하기

src > main > java > 프로젝트패키지 > dto 패키지 생성 후 SampleArticleForm.java를 생성한다.

 

package com.example.fisrtProject.dto;

public class SampleArticleForm {

    private String title;
    private String content;

    
}

 

 

클래스에 필드를 생성한다.

 

title, content

 

생성자와 ToString을 만들어준다.

 

 

우클릭 > Generate

 

Constructor 선택

 

 

toString() 선택

toString() 선택

 

SampleArticleFrom.java

package com.example.fisrtProject.dto;

public class SampleArticleForm {

    private String title;
    private String content;

    public SampleArticleForm(String title, String content) {
        this.title = title;
        this.content = content;
    }

    @Override
    public String toString() {
        return "SampleArticleForm{" +
                "title='" + title + '\'' +
                ", content='" + content + '\'' +
                '}';
    }
}

 

이제 createArticle 메서드에 DTO로 만든 SampleArticleForm을 파라미터로 넣어서 컨트롤러에서 출력해본다.

 

SampleArticleController.java

package com.example.fisrtProject.controller;

import com.example.fisrtProject.dto.SampleArticleForm;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class SampleArticleController {

    @GetMapping("/sampleArticle/article")
    public String newArticleForm() {

        return "sampleArticle/sampleArticle";
    }

    @PostMapping("/sampleArticle/create")
    public String createArticle(SampleArticleForm form) {
        System.out.println(form.toString());

        return "";
    }
}

 

다시 서버를 재기동한다.

 

 

제목과 내용에 글을 입력하고 Submit버튼 클릭

 

화면은 이렇게 에러가 뜨지만

 

콘솔에는 정확하게 데이터가 넘어왔다.

 

화면에 에러가 뜨는 이유는 return되는 페이지가 지정되지 않았기 때문이다.

 

만약 출력했는데 title과 content에 둘다 null이 나온다면?

 

화면에 input과 textarea에 name을 지정해주었는지 확인해봐야한다.