form으로 데이터 주고 받기

HTML로 form 태그안에 화면을 만들고,

DTO와 컨트롤러를 이용해서 데이터를 주고 받는 내용을 해보았다.

 

form태그란?

 - 아래 코드가 HTML 코드이다.

   form태그는 하나의 울타리라고 생각하면 되는데 그 제출 버튼을 누르게 되면

   form이라는 울타리 안에 있는 데이터만 넘어가게 하고, 

   form태그의 action이라는 곳에 적힌 주소로 넘겨준다.

{{>layouts/header}}

<form class="container" action="/articles/create" method="post">

    <div class="mb-3">
        <label>제목</label>
        <input type="text" class="form-control" name="title">
    </div>

    <div class="mb-3">
        <label>내용</label>
        <textarea class="form-control" name="content"></textarea>
    </div>
    <button type="submit">제출</button>

</form>

{{>layouts/footer}}

 

Controller

 - 지정한 주소를 통해 데이터를 컨트롤 할 수 있는 메서드가 모인 곳

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"";
    }

}

 

DTO

 - 데이터로 저장할 값들을 이름으로 저장하여 주고받게 저장하는 페이지

package com.example.firstproject.dto;


public class ArticleForm {

    private String title;
    private String content;
    
    public ArticleForm(){}

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


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