폼 데이터 주고받기

Gyuhan Park·2022년 7월 23일
0

spring

목록 보기
6/18

form 데이터 받는 과정

사용자의 입력값을 받기 위해 form 태그 사용.
form -> 어디로 보낼지(action), 어떻게 보낼지(method) 결정.
controller에서 @PostMapping으로 폼 데이터를 받는데,
받을 때 DTO 라는 객체에 폼 데이터를 담아 받음.

참고> input 태그 옵션의 name을 DTO의 필드값과 동일하게 설정해줘야 원하는 필드값에 입력값이 담겨진다.

# Controller

package com.example.demo.controller;

import com.example.demo.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("/article")
    public String viewForm(){
        return "articles/new";
    }

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

# DTO

src > main > java > 기본 package > dto package

package com.example.demo.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 + '\'' +
                '}';
    }
}

# View

{{>layouts/header}}

<form class="container" action="/article/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>

{{>layouts/footer}}
profile
단단한 프론트엔드 개발자가 되고 싶은

0개의 댓글