form 데이터를 DTO로 받기

src>main>resource>templates 디렉터리에서 articles 디렉터리를 생성

articles 디렉터리에서 new.mustache 파일을 생성하여 View 페이지를 만든다

form 태그 작성, 게시판의 제목을 입력한 input 태그, 내용을 입력할 textarea 태그, 전송 버튼인 button 태그 추가하고 버튼의 속성을

submit으로 설정한다

(header와 footer 레이아웃 추가)

{{>layouts/header}}

<form action="">
    <input type="text">
    <textarea></textarea>
    <button type="submit">Submit</button>
</form>

{{>layouts/footer}}

 

컨트롤러 만들기

src>main>java>com.example.firstproject>controller 패키지에서 ArticleController 새로운 컨트롤러 생성

@Controller 입력하여 컨트롤러임을 선언

View 페이지를 보여주기 위해 newArticleForm() 메서드 추가

article 디렉터리에 new.mustache를 추가했기 때문에 반환값으로 articles/new 작성

URL 요청은 @GetMapping("/articles/new)

package com.example.firstproject.controller;

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

@Controller
public class ArticleController {
    @GetMapping("/articles/new")
    public String newArticleForm() {
        return "articles/new";
    }
}

 

서버 실행

 

부트스트랩 css 적용

{{>layouts/header}}

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

{{>layouts/footer}}

 

폼 데이터 전송하기

form 태그에 action 속성과 method 속성 설정

action: URL 연결 주소를 적어 localhost:8080/articles/create 페이지로  보낸다(action="/articles/create")

method: get 방식과 post 방식

{{>layouts/header}}

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

{{>layouts/footer}}

 

폼 데이터 받기

ArticleControlle 수정

컨트롤러에 createArticle() 메서드 추가 return 값에는 빈 문자를 적는다

View 페이지에서 form 데이터를 post 방식으로 전송했기 때문에 @GetMapping()말고 @PostMapping()을 사용

package com.example.firstproject.controller;

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

@Controller
public class ArticleController {

    @GetMapping("/articles/new")
    public String newArticleForm() {
        return "articles/new";
    }

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

 

DTO 만들기

main>java>com.example.firstproject에 새로운 Package를 만든다(dto)

 

dto 패키지에 새로운 자바 클래스 생성(ArticleFrom.java)

ArticleForm.java 파일이 form 데이터를 받아올 DTO가 된다

 

입력 form에서 제목과 내용 2개를 전송하기 때문에 DTO에도 필드 2개가 필요하다(title, content)

package com.example.firstproject.dto;

public class ArticleForm {
    private String title;
    private String content;
}

 

생성자 추가(cmd+N)

package com.example.firstproject.dto;

public class ArticleForm {
    private String title;
    private String content;

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

 

form 데이터를 잘 받았는지 확인하기 위해 toString() 메서드를 추가(cmd+N)

package com.example.firstproject.dto;

public class ArticleForm {
    private String title;
    private String content;

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

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

 

form 데이터를 DTO에 담기

DTO로 만든 ArticleForm 클래스의 ArticleForm 타입의 form 객체를 매개변수로 선언

form 객체의 toString() 메서드 호출

package com.example.firstproject.controller;

import com.example.firstproject.dto.ArticleForm;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class ArticleController {

    @GetMapping("/articles/new")
    public String newArticleForm() {
        return "articles/new";
    }

    @PostMapping("/articles/create")
    public String createArticle(ArticleForm form) {
        System.out.println(form.toString());
        return "";
    }
}

 

입력한 form과 DTO 필드 연결

전송한 데이터를 DTO로 받기위해 title과 content를 선언했었다

이 2개의 필드에 값이 들어가기 위해 new.mustache 입력 form에 필드명을 지정해 줘야 한다(name = "title", name="context")

{{>layouts/header}}

<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="context"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

{{>layouts/footer}}

 

서버 실행

제목에 qwer입력, 내용에 1234 입력