자세한 내용은 공식 홈페이지를 참고해주세요

공식홈페이지로 이동

일단 thymeleaf를 이용한 form태그에서 자주 사용하는 대해서 간단히 설명하겠습니다.

form

간단하게 form 태그에서 사용할 수 있는 3가지 입니다. 저는 이 3가지를 사용하였습니다.

th:action

• form data를 보낼 url를 설정

  th:object

• form data를 담을 객체를 설정

  th:field

• 담는 객체의 필드을 동적으로 매핑 (사용시 객체의 필드로 id과 name이 자동생성)

example

먼저 form태그를 사용할 페이지에 비어있는 객체를 전달해야합니다. controller

@GetMapping("/writeBbs")
    public String writeBbs(Model model, BbsRequestDto requestDto){
        model.addAttribute("requestDto",requestDto);
        return "writeBbs";
    }

Model에 form data를 담을 객체를 비어있는 객체인 BbsRequestDto를 담아서 form태그를 이용할 writeBbs.html로 전달하였습니다. writeBbs.html

<form th:action="@{/api/bbs/write}"  th:object="${requestDto}" method="post" >
    <table class="table">
        <tbody>
        <tr>
            <td>제목</td>
            <td><input type="text" th:field="*{title}"></td>
        </tr>
        <tr>
            <td>작성자</td>
            <td><input type="text" th:field="*{writer}"></td>
        </tr>
        <tr style="height: 300px;">
            <td>내용</td>
            <td><input type="text" th:field="*{contents}"></td>
        </tr>
        </tbody>
        <button type="submit">등록</button>
    </table>
    </form>

해당 writeBbs.html 보시면 th:action으로 form data를 보낼 url를 지정하고 있고,또한 th:object에는 controller에서 받아온 빈객체인 requestDto를 지정하고 있습니다.

ps. intellij에서만 제공하는 기능인지는 모르겠지만 빈객체를 보내면 담은 객체의 이름을 자동완성으로 제공해줍니다. 처음에 객체를 안보내서..얼마나 고생했던지..

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class BbsRequestDto {
    private String title;
    private String contents;
    private String writer;
}

또한 th:field에서는 받아온 객체의 필드변수명을 입력해주셔야 form data를 보낼때 자동으로 매팅을 해줍니다.

여기 부분에서 검색을 많이 했던 부분입니다. 처음에 Dto 작성했을때 Setter를 추가하지 않었는데요 그 이유는 Dto setter를 작성하지 않아도 @ReqeustBody이용하면 json으로 보낼때는 Jackson2HttpMessageConverter가 java Object로 변환해서 넣어준다고.. 그걸로 모르고 setter를 안썼더니 controller에서 데이터를 못받아준거 같습니다. form data를 받는 @RequestBody가 아닌 @ModelAttribute이용해야 해서 그런거 같습니다.

    @PostMapping("/api/bbs/write")
    public String createBbs(@ModelAttribute("requestDto") BbsRequestDto requestDto){
       Bbs bbs = new Bbs(requestDto);
       bbsRepository.save(bbs);
       return "redirect:/";
    }

다음은 form data를 받아서 JPA로 DB에 insert해주는 소스입니다.

긴글 읽어주셔서 감사합니다. 혼자 공부하면서 적은 내용이라 틀린 부분이 많을거 같은데 피드백 주시면 공부후에 수정하도록 하겠습니다. 감사합니다.