회원가입 시 폼에 형식과 맞지 않는 값이 입력되는 경우 오류 화면(WhiteLabel)이 뜬다. ex) 공백, 숫자 입력 폼에 문자열 입력
이를 검증하여 폼에 경고문을 띄워서 해결해보자. 추가적으로 데이터가 쌓이는 것을 방지하기위해 PRG패턴을 사용한다.
createMemberForm.html 수정
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sing In</title>
<!-- Bootstrap core CSS -->
<link href="../../static/css/bootstrap.min.css"
th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link href="../../static/css/signin.css"
th:href="@{/css/signin.css}" rel="stylesheet"/>
<link href="../../static/css/headers.css"
th:href="@{/css/headers.css}" rel="stylesheet"/>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.field-error {
border-color: #dc3545;
color: #dc3545;
}
</style>
</head>
<body class="text-center">
<main class="form-signin">
<form th:action th:object="${member}" method="post">
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
<div class="form-floating">
<input type="text" class="form-control" id="loginId" th:field="*{loginId}" placeholder="Id"
th:errorclass="field-error">
<label for="loginId">Id</label>
<div class="field-error" th:errors="*{loginId}" />
</div>
<div class="form-floating">
<input type="password" class="form-control" id="password" th:field="*{password}" placeholder="Password"
th:errorclass="field-error">
<label for="password">Password</label>
<div class="field-error" th:errors="*{password}" />
</div>
<div class="form-floating">
<input type="email" class="form-control" id="email" th:field="*{email}" placeholder="name@example.com">
<label for="email">Email address</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
</form>
</main>
</body>
</html>- 검증을 위해 th:object, th:field, th:errorclass, th:errors 사용
MemberController 수정
@Controller
@RequestMapping("/member")
@RequiredArgsConstructor
public class MemberController {
private final MemberService memberService;
private final LoginService loginService;
@GetMapping("/create")
public String createForm (@ModelAttribute Member member) {
return "member/createMemberForm";
}
@PostMapping("/create")
public String create (@Validated @ModelAttribute Member member, BindingResult bindingResult,
RedirectAttributes redirectAttributes) {
if(bindingResult.hasErrors()) {
return "member/createMemberForm";
}
memberService.createMember(member);
redirectAttributes.addAttribute("memberId",member.getId());
return "redirect:/member/saved/{memberId}";
}
@GetMapping("/saved/{memberId}")
public String saved (Model model, @PathVariable Long memberId) {
Member findMember = memberService.findOne(memberId);
model.addAttribute("member",findMember);
return "member/savedMemberForm";
}
}- createForm()
- Member 생성 폼
- 모델에 Member 객체 저장
- create()
- Member 생성
- 검증 실패 시 생성 폼으로 다시 이동한다.
- 검증 성공 시 Member를 생성하고 저장된 화면을 보여주는 url로 경로변수를 주어 redirect 한다.
- 이때, redirect를 하는 이유는 회원가입 후 새로고침을 하면 마지막에 전송된 데이터를 다시 전송하여 데이터가 계속 쌓이게 되기에 redirect 하여 이 문제를 해결해야 한다. 이를 PRG패턴이라 한다. 자세한 내용은 여기를 클릭!
- saved()
- 저장된 Member 정보 폼
- 경로 변수를 받아 해당 엔티티를 DB에서 꺼내 모델에 저장한다.
'토이 프로젝트 > 게시판 프로젝트' 카테고리의 다른 글
| 7. 게시판 프로젝트 - BaseTimeEntity, MemberDto (0) | 2022.08.11 |
|---|---|
| 6. 게시판 프로젝트 - 인터셉터 등록, 회원가입 폼 중복 ID 검증 (0) | 2022.08.10 |
| 4. 스프링 게시판 만들기 - 로그인 기능1(세션) , 필드 오류 검증 (0) | 2022.08.09 |
| 3. 스프링 게시판 만들기 - 컨트롤러 생성(Member), 회원가입 기능, 뷰 생성 (0) | 2022.08.09 |
| 2. 스프링 게시판 만들기 - 도메인 생성, Member 테스트(repository,service) (0) | 2022.08.08 |