폼 (form) 데이터 주고 받기

---

 

우선 HTTP 프로토콜의 개념부터 간단하게 살펴보자

• GET: 데이터 조회 요청
• POST: 데이터 생성 요청
• PUT/PATCH: 데이터 수정 요청
• DELETE: 데이터 삭제 요청

 

(수정) HTTP프로토콜에 공부하면서 추가로 자세히 작성한 포스팅을 첨부한다.

https://jminie.tistory.com/116?category=1008953 

HTTP와 SSL 그리고 HTTPS

 

 

 

 

form 태그 주 속성

데이터 전송을 위한 form 태그의 주요 속성은 'method'와 'action'이다.

<!-- method: HTTP의 요청 방식을 결정.  get/post 가능  -->
<!-- action: 데이터가 전송 될 도착지 URL -->
<form method="post", action="/articles"> 
  ...
</form>

 

 

 

 

 

 

❓ DTO란?

form 데이터를 서버에서 사용하려면, 객체로 만들어야 한다. 이를 위해 DTO(Data Transfer Object)가 필요하다

(여기서 말하는 계층이란, View - Controller - Service - DAO와 같은 각 계층을 말한다.)

 

 

 

사용 파일

 

 

 

 

 

 

 

 

 

 

 

뷰 페이지

1) from 태그 정보 추가 : articles/new.mustache

 

{{>layouts/header}}

<form class="container" action="/articles/create" method="post">
    <div class="form-group">
        <label for="title">제목</label>
        <input type="text" class="form-control" id="article-title" placeholder="제목을 입력하세요" name="title">
    </div>
    <div class="form-group">
        <label for="content">내용</label>
        <textarea class="form-control" id="article-content" placeholder="내용을 입력하세요" rows="3" name="content"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">제출</button>
</form>

{{>layouts/footer}}

여기서 form 태그 안에 action과 method에 집중해보자

쉽게 말하면 action은 어디로? method는 어떻게? 라고 생각하면 편하다

 

 

 

 

 

 

 

 

 

 

 

컨트롤러구현

2) 폼 태그 처리 메소드 추가 : controller/ArticleController

 

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"; //templates 를 기준으로 경로를 적어준다.
    }

    @PostMapping("/articles/create")  //post 방식으로 /articles/create 요청이 들어오면, 아래의 메소드 실행
    public String createArticle(ArticleForm form){  //폼 태그의 데이터가 ArticleForm 객체로 만들어 진다
        System.out.println(form.toString()); // ArticleForm 객체 정보를 확인!
        return "";
    }
}

 

 

 

 

 

 

 

DTO생성

3) 데이터 전송 객체 만들기 : dto/ArticleForm

 

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 + '\'' +
                '}';
    }
}

 

 

 

 

 

 

 

 

🙆‍♂️  결과 확인

 

4) 폼 데이터 전송

5) 서버 로그 확인

 

 

 

만약 한글로 작성했는데 글자가 깨질 경우 

인텔리제이 VM, 프로젝트 파일 인코딩, 톰캣의 인코딩을 “utf-8”로 적용하면 된다.

 

 

 

 

 

 

(위 내용은 홍팍의 스프링 강의를 보고 정리한 글입니다)