SpringBoot-Movie-Thymeleaf-Project - 5

1. 회원가입 폼 만들기

2. 저장 버튼 눌렀을때 회원가입 되도록 만들

<div class="container mt-5">

    <form th:action="@{/v1/signUp}" th:object="${User}" method="post" class="row g-3">

        <div class="border border-rounded border-dark rounded-3"
             style="margin: 0 auto; padding: 25px; width: 700px; height: 500px;">
            <div class="text-center">회 원 가 입</div>
            <div class="mb-3">
                <label for="UsernameInput" class="form-label">사용자명</label>
                <input type="text" class="form-control" th:field="*{username}" aria-describedby="emailHelp">
            </div>

            <div class="mb-3">
                <label for="email" class="form-label">이메일</label>
                <input type="email" class="form-control" th:field="*{email}" aria-describedby="emailHelp">
                <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
            </div>
            <div class="mb-3">
                <label for="exampleInputPassword1" class="form-label">비밀번호</label>
                <input type="password" class="form-control" th:field="*{password}" id="exampleInputPassword1">
            </div>
            <div class="mb-3 form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                <label class="form-check-label" for="exampleCheck1">Check me out</label>
            </div>
            <div class="text-center">
                <button type="submit" value="저장" id="save-user" class="btn btn-primary">저장</button>
            </div>
        </div>
    </form>
    <div class="array" style="position:relative; left: 375px; bottom: 38px;">
    </div>
</div>

 

위의 코드로 회원가입 폼을 만들었다. 아래와 같이 나온다. 

 

 

이제 타임리프로 값이 넘어가도록 하고 저장 버튼을 눌렀을때 form에서 Post 요청이 날아가도록 하면 된다. 

 

회원가입 할 수 있도록 작성하고 Post 요청을 받을시 회원가입이 되도록 한다.

@Controller
public class SignController {


    private userServiceImpl userService;

    public SignController(userServiceImpl userService) {
        this.userService = userService;
    }

    @PostMapping("/v1/signUp")
    public String signUpUser(User user) {

        userService.signUp(user);
        System.out.println(user);
        return "redirect:/v1/popular";
    }

}

 

아래와 같이 무사히 값이 들어간 것을 알 수 있다.

 

다음 시간에는 User 리스트 페이지를 만들어보도록 하겠다.