[Web_3] Spring 8 👿

08627·2022년 9월 26일

Spring

목록 보기

8/13

📌 Request 데이터 DB Insert 하기 (2)

💡 Request 데이터 DB Insert 하기 : User

👾 EX. SignUp 회원가입

▫️ PageController.java

@Controller
public class PageController {

    @GetMapping("/auth/signup")
    public String loadAuthSignup() {
        return "auth/signup";
    }
}

▫️ AuthController.java

@Slf4j
@RequiredArgsConstructor
@RestController
public class AuthController {

    private final UserRepository userRepository;

    // /api/auth/signup
    @PostMapping("/api/auth/signup")
    public ResponseEntity<?> signUp(UserSignUpReqDto userSignUpReqDto) {
        // formData 로 들어옴. -> HTML 상에서 DTO 로 변환을 스프링이 해주는데 그 때 Getter 가 필요함.

        log.info("{}", userSignUpReqDto);

        User user = userSignUpReqDto.toEntity();



        log.info("마이바티스 보내지기 전 Entity: {}", user); // useGeneratedKeys 를 쓰면 Auto increment 된 user code 를 바로 가져다 쓸 수 있게 되는 것임.

        int result = userRepository.save(user);

        log.info("마이바티스 보내지고 나서 Entity: {}", user);


        UserSignUpRespDto userSignUpRespDto = user.toDto();


        if(result == 0) {
            return ResponseEntity.internalServerError().body(new CMRespDto<>(-1, "회원 가입 오류", null));
        }

        return ResponseEntity.ok(new CMRespDto<>(1, "회원 가입 완료", userSignUpRespDto));
    }
}

▫️ User.java

@Builder
@NoArgsConstructor
@AllArgsConstructor
@Data
public class User {
    private int user_code;
    private String user_id;
    private String user_password;
    private String user_name;
    private String user_email;

    public UserSignUpRespDto toDto() {
        return UserSignUpRespDto.builder()
                .userCode(user_code)
                .userId(user_id)
                .userPassword(user_password)
                .userName(user_name)
                .userEmail(user_email)

                .build();
    }
}

▫️ CMRespDto.java

@Data
@AllArgsConstructor
public class CMRespDto<T> {
    private int code;
    private String msg;
    private T data;
}

▫️ UserSignUpReqDto.java

@Data
public class UserSignUpReqDto {
    private String userId;
    private String userPassword;
    private String userName;
    private String userEmail;

    public User toEntity() {
        return User.builder()
                .user_id(userId)
                .user_password(userPassword)
                .user_name(userName)
                .user_email(userEmail)

                .build();
    }
}

▫️ UserSignUpRespDto.java

@Builder
@Data
public class UserSignUpRespDto {
    private int userCode;
    private String userId;
    private String userPassword;
    private String userName;
    private String userEmail;

}

▫️ UserRepository.java

@Mapper
public interface UserRepository {

    public int save(User user);

}

▫️ user.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.boot.mybatis20220923nk.repository.UserRepository">

    <insert id="save"
            parameterType="com.boot.mybatis20220923nk.domain.User"
            useGeneratedKeys="true"
            keyProperty="user_code"
    >
        <!-- select 빼고 insert update delete 는 리턴이 영향받은 행 수(int)로 설정해줄 필요 없음. -->
        insert into
            user_mst
        values (
            0,
            #{user_id},
            #{user_password},
            #{user_name},
            #{user_email}
        )
    </insert>
</mapper>

▫️ signup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <style>
        ...
    </style>

</head>
<body>
    <div id="container">
        <form enctype="multipart/form-data">
            <table>
                <thead>
                    <tr>
                        <th colspan="2">
                            <h1>회원가입</h1>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>
                            <label for="user-id">아이디</label>
                        </th>
                        <td>
                            <input type="text" id="user-id" name="userId">
                        </td>
                    </tr>
                    <tr>
                        <th>
                            <label for="user-password">비밀번호</label>
                        </th>
                        <td>
                            <input type="password" id="user-password" name="userPassword">
                        </td>
                    </tr>
                    <tr>
                        <th>
                            <label for="user-name">이름</label>
                        </th>
                        <td>
                            <input type="text" id="user-name" name="userName">
                        </td>
                    </tr>
                    <tr>
                        <th>
                            <label for="user-email">이메일</label>
                        </th>
                        <td>
                            <input type="text" id="user-email" name="userEmail">
                        </td>
                    </tr>
                    
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="2">
                            <button type="button" class="signup-button">가입하기</button>
                        </th>
                    </tr>
                </tfoot>
            </table>
        </form>
        
    </div>

    <script>
        const signupButton = document.querySelector(".signup-button");

        signupButton.onclick = () => {
            request();
        }

        function getFormData() {
            return new FormData(document.querySelector("form"));
        }

        function request() {

            $.ajax({
                async: false,
                type: "post",
                url: "/api/auth/signup",

                enctype: "multipart/form-data",
                contentType: false,
                processData: false,

                data: getFormData(),
                dataType: "json",
                success: (response) => {
                    alert(response.msg);
                    console.log(response);
                }, 
                error: (error) => {
                    console.log(error);
                    console.log(error.responseJSON.msg);
                }

            });
        }

    </script>
</body>
</html>

🦎

사용자가 /auth/signup 주소로 접속하게 되면,
PageController 에서 html 화면을 띄워줌.

사용자가 해당 폼에 맞추어 정보를 입력하고 '가입하기' 버튼을 누르면,
입력한 정보를 폼 데이터 형식으로 url /api/auth/signup 에 ajax로 보내게 된다.

매핑된 AuthController 에서 해당 폼 데이터를 UserSignUpReqDto 로 받는다. (스프링에서 DTO로 변환하여 받아오도록 함)
그럼 AuthController 에서 DTO 로 받아온 정보를 User 객체로 변환하여 UserRepository(실제 데이터베이스)에 User 정보를 Insert 한다.

Insert 가 되었는지의 여부를 클라이언트에 RespDto 로 응답한다.

📢 소감 👿

08627

이전 포스트

[Web_3] Spring 8 👿

Spring

💡 Request 데이터 DB Insert 하기 : User

[Web_3] Spring 7 😴

0개의 댓글