본문 바로가기
Back-End/Spring Boot

[ Spring boot ] DTO 객체 및 폼과 뷰페이지 ①

by 2CHAE._.EUN 2022. 5. 7.
스프링 부트 프레임워크에서 객체를 전달하는 방법

 

기본적으로 웹 개발에서 클라이언트와 서버가 값을 주고 받는 것은 가장 기본적인 작업이자 중요한 작업이다.

 

예를 들면 값을 전송시,Form 형태에서 Post, Get 방식이 있고, Ajax, 링크, JSON 형태로 넘길 수 있다.

이때, 전달되는 파라미터 값이 많다면 객체(DTO)를 만들어서 한번에 받는 것이 좋다.

* DTO : Data Transfer Object 

 

데이터를 전송하면 Object가 되고 그 Object를 가지고 뷰 페이지단에서 출력해서 시용할 수 있다.

 

1. 4개의 파일 생성

 

 

2. 회원 가입 창 signUpFrom.html 작성하기

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>회원가입</title>
</head>
<body>

    <h1>가상화폐 모의투자</h1>
    <form action="/SignUpController" method="post" target="_blank">
        <div class="joinRaw">
            <h3 class="join_Title">
                <label for="UserEmail">이메일</label>
            </h3>
            <span>
               <input type="text" id="UserEmail" name="UserEmail">
            </span>
        </div>
        <div class="joinRaw">
            <h3 class="join_Title">
                <label for="UserPassWord1">비밀번호</label>
            </h3>
            <span>
                <input type="password" id="UserPassWord1" name="UserPassWord1">
            </span>
            <h3 class="join_Title">
                <label for="UserEmail">비밀번호 확인</label>
            </h3>
            <span>
                <input type="password" id="UserPassWord2" name="UserPassWord2">
            </span>
        </div>
        <div class="joinRaw">
            <h3 class="join_Title">
                <label for="UserName">이름</label>
            </h3>
            <span>
                <input type="text" id="UserName" name="UserName">
            </span>
        </div>
        <div class="btnArea">
            <button type="submit" id="Join">
                <span>가입하기</span>
            </button>
        </div>
    </form>

</body>
</html>

 

 

3. SignUpController 작성

 

package com.example.capstone.controller;

import com.example.capstone.DTO.SignUpDTO;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class SignUpController {

//    @PostMapping("/SignUpController")
//    public String signUpForm(  //@RequestParam은 생략 가능
//            @RequestParam String userEmail,
//            @RequestParam String UserPassWord1,
//            @RequestParam String UserPassWord2,
//            @RequestParam String UserName ){
//
//
//        return "/SignUp/signUpView";
//
//    }


    @PostMapping("/SignUpController")
    public String signUpForm ( SignUpDTO signUpDTO, Model model){
        return "/SignUp/signUpView";
    }


}

 

전달된 DTO 변수는 signUpDTO 객체에 전달이 된다. 이 객체에 getter, setter 함수를 사용하면 값을 얻어올 수 있다.

 

 

4. SignUPDTO 작성

 

ⓐ 각 변수의 이름은 form에서 전달한 요소들의 이름과 같아야한다. 

ⓑ DTO 객체 전체를 넘겨주기 때문에 getter 함수와 setter 함수를 통해 각 변수의 값에 접근해야한다.

 

package com.example.capstone.DTO;

public class SignUpDTO {

    private String UserEmail;
    private String UserPassWord1;
    private String UserPassWord2;
    private String UserName;

    public String getUserEmail() {
        return UserEmail;
    }

    public void setUserEmail(String userEmail) {
        UserEmail = userEmail;
    }

    public String getUserPassWord1() {
        return UserPassWord1;
    }

    public void setUserPassWord1(String userPassWord1) {
        UserPassWord1 = userPassWord1;
    }

    public String getUserPassWord2() {
        return UserPassWord2;
    }

    public void setUserPassWord2(String userPassWord2) {
        UserPassWord2 = userPassWord2;
    }

    public String getUserName() {
        return UserName;
    }

    public void setUserName(String userName) {
        UserName = userName;
    }

    @Override
    public String toString() {
        return "SignUpDTO{" +
                "UserEmail='" + UserEmail + '\'' +
                ", UserPassWord1='" + UserPassWord1 + '\'' +
                ", UserPassWord2='" + UserPassWord2 + '\'' +
                ", UserName='" + UserName + '\'' +
                '}';
    }
}

 

 

5. signUpView.html 작성하기

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <h1>가상화폐 모의투자</h1>
    <h3 th:text="${ signUpDTO.getUserName() } + '님 회원가입을 축하합니다'"></h3>

</body>
</html>

 

전달받은 객체의 값을 출력하기 위해서는 컨트롤러에서 전달받은 객체로 getter 함수와 setter 함수를 사용하면 된다.

 

 

 

 

Form과 View를 template 폴더 내에서 처리하기

 

static 폴더와 template 폴더를 구분해놓기 보다 template 폴더 내에서 필요한 html 파일을 다 만들어놓고 컨트롤러가
그 안에서 찾아 갈 수 있도록 구현하기 → Form과 View를 templates 폴더 내애서 처리

 

1. templates 폴더 내에서 form과 view를 다 구현해놓기

 

2. Mapping 구현하기

 

package com.example.capstone.controller;

import com.example.capstone.DTO.SignUpDTO;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

import javax.annotation.PostConstruct;

@Controller
public class SignUpController {

    @GetMapping("/SignUpForm")
    public String signUpPage(){
    //사용자가 SignUpForm으로 들어오면 SignUpForm을 반환해준다.
        return "/SignUp/SignUpForm";
    }

    //SignUpForm에서 Post 방식으로 요청이 들어온다면 해당 페이지 반환하기
    @PostMapping("/SignUpView")
    public String signUpCompletePage( SignUpDTO signUpDTO, Model model){

        return "/SignUp/SignUpView";
    }
    
}

 

 

 

* button으로 페이지 이동하기

 

1. 이동할 페이지 컨트롤러 생성 및 매핑해주기

 

package com.example.capstone.controller;

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

@Controller
public class MainHomePageController {

    @GetMapping("/MainHomePage")
    public String startMainPage(){
        //사용자가 MainHomePage으로 들어오면 MainHomePage을 반환해준다.
        return "/Main/MainHomePage";
    }

}

 

2. 버튼에 해당 페이지 연결해주기

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <h1>가상화폐 모의투자</h1>
    <h3 th:text="${ signUpDTO.getUserName() } + '님 회원가입을 축하합니다'"></h3>

    <div class="btnArea">
        <button type="button" id="Join" onclick="location.href='/MainHomePage'">
            <span>시작하기</span>
        </button>
    </div>

</body>
</html>

 

'Back-End > Spring Boot' 카테고리의 다른 글

[ Spring boot ] DTO 객체 및 폼과 뷰페이지 ③  (0) 2022.05.08
[ Spring boot ] DTO 객체 및 폼과 뷰페이지 ②  (0) 2022.05.08
[ Spring boot ] Spring boot 프레임워크 ③  (0) 2022.05.02
[ Spring boot ] Spring boot 프레임워크 ②  (0) 2022.04.30
[ Spring boot ] Spring boot 프레임워크 ①  (0) 2022.04.13

관련글

티스토리툴바