프론트와 백을 연결해주는 컨트롤러를 생성하고 테스트해보겠다.
컨트롤러에는 일단 회원가입 기능만 구현하였다. 추후 계속 업데이트 예정
MemberController
@Controller
@RequestMapping("/member")
@RequiredArgsConstructor
public class MemberController {
private final MemberService memberService;
@GetMapping("/login")
public String login (Model model) {
return "member/loginMemberForm";
}
@GetMapping("/create")
public String createForm () {
return "member/createMemberForm";
}
@PostMapping("/create")
public String create (@ModelAttribute Member member) {
memberService.createMember(member);
return "member/savedMemberForm";
}
}- login: 로그인 폼으로 가는 메서드
- createForm: 회원가입 폼으로 가는 메서드
- create: 회원가입 로직 실행 후 회원 정보 폼으로 가는 메서드
- @RequiredArgsConstructor: final이 붙은 필드에 자동으로 의존성 주입
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/headers/">
<!-- Favicons -->
<meta name="theme-color" content="#7952b3">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link 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;
}
}
</style>
</head>
<body>
<div class="container">
<header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 link-secondary">Home</a></li>
<li><a href="#" class="nav-link px-2 link-dark">Features</a></li>
<li><a href="#" class="nav-link px-2 link-dark">Pricing</a></li>
<li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li>
<li><a href="#" class="nav-link px-2 link-dark">About</a></li>
</ul>
<div class="col-md-3 text-end">
<button type="button" class="btn btn-outline-primary me-2" onclick="location.href='/member/login'">Login</button>
<button type="button" class="btn btn-primary" onclick="location.href='/member/create'">Sign-up</button>
</div>
</header>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>- localhost:8080 의 경로로 왔을 때 보여지는 뷰이다.
- welcomePage
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>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/sign-in/">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- 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;
}
}
</style>
<!-- Custom styles for this template -->
</head>
<body class="text-center">
<main class="form-signin">
<form th:action method="post">
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
<div class="form-floating">
<input type="text" class="form-control" id="userId" name="userId" placeholder="Id">
<label for="userId">Id</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
<label for="password">Password</label>
</div>
<div class="form-floating">
<input type="email" class="form-control" id="email" name="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>- 회원가입을 하기위한 뷰
- sign in 버튼을 클릭하면 폼에 담긴 userId, password, email를 파라미터로 전송한다.
savedMemberForm.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>savedMemberForm</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/sign-in/">
<!-- 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;
}
}
</style>
<!-- Custom styles for this template -->
</head>
<body>
<div class="container">
<div class="py-5 text-center">
<h2>회원가입 결과</h2>
</div>
<div>
<label for="id">식별 ID</label>
<input type="text" id="id" name="id" class="form-control" value="1" th:value="${member.id}" readonly>
</div>
<div>
<label for="userId">회원 아이디</label>
<input type="text" id="userId" name="userId" class="form-control" value="상품A" th:value="${member.userId}" readonly>
</div>
<div>
<label for="password">비밀번호</label>
<input type="text" id="password" name="password" class="form-control" value="10000" th:value="${member.password}" readonly>
</div>
<div>
<label for="email">이메일</label>
<input type="text" id="email" name="email" class="form-control" value="10" th:value="${member.email}" readonly>
</div>
<hr class="my-4">
<div class="row">
<div class="col">
<button class="w-100 btn btn-primary btn-lg"
th:onclick="|location.href='@{/member/{memberId}/editForm(memberId=${member.id})}'|"
type="button">회원 정보 수정</button>
</div>
<div class="col">
<button class="w-100 btn btn-secondary btn-lg"
th:onclick="|location.href='@{/index.html}'|"
type="button">메인으로</button>
</div>
</div>
</div> <!-- /container -->
</div>
</body>
</html>- 회원가입된 Member의 정보를 볼 수 있는 뷰이다.
- 수정을 하거나 홈으로 돌아갈 수 있다.
'토이 프로젝트 > 게시판 프로젝트' 카테고리의 다른 글
| 6. 게시판 프로젝트 - 인터셉터 등록, 회원가입 폼 중복 ID 검증 (0) | 2022.08.10 |
|---|---|
| 5. 게시판 만들기 - 회원가입 필드 오류 검증, PRG 패턴 (0) | 2022.08.09 |
| 4. 스프링 게시판 만들기 - 로그인 기능1(세션) , 필드 오류 검증 (0) | 2022.08.09 |
| 2. 스프링 게시판 만들기 - 도메인 생성, Member 테스트(repository,service) (0) | 2022.08.08 |
| 1. 스프링 게시판 만들기 - 초기 설정 (0) | 2022.08.08 |