회원 웹 기능 - 등록
전 정리에서 홈 화면을 작성하였으니 이번에는 회원 등록을 하는 코드를 작성해보도록 한다.
회원 등록 폼 개발
회원 등록 폼 컨트롤러
이전에 작성했던 MemberController에 다음 코드를 작성한다.
@GetMapping("/members/new")
public String createForm() {
return "members/createMemberForm";
}
@PostMapping("/members/new")
public String create(MemberFrom form) {
Member member = new Member();
member.setName(form.getName());
memberService.join(member); //중복 조회하고 없으면 회원가입
return "redirect:/"; //회원 가입이 끝나면 홈 화면으로 다시 돌려보냄회원 등록 폼 HTML (resources/templates/members/createMemberForm)
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
<form action="/members/new" method="post">
<div class="form-group">
<label for="name">이름</label>
<input type="text" id="name" name="name" placeholder="이름을
입력하세요">
</div>
<button type="submit">등록</button>
</form>
</div> <!-- /container -->
</body>
</html>앞에서 해왔듯이 url을 통해 접근하는 것을 get 방식이라고 한다. 그래서 @GetMapping과 맵핑이 되어서 "members/createForm"으로 이동한다.
실행된 화면은 위와 같다. 이름으로 "spring" 을 입력한 후에 등록 버튼을 누르면 "members/new"에 post 방식으로 데이터가 전송된다.
이 역할은 html의 form 태그의 action 속성에 form data를 보낼 때 해당 데이터가 도착할 url을 명시해놓기 때문에 가능하다. 그리고 전송 방식을 post 방식으로 지정하였기 때문에 MemberController의 @PostMapping과 맵핑 된다.
@PostMapping은 데이터를 form 같은 곳에 넣어서 전달할 때 post 방식을 사용하고,
@GetMapping은 데이터를 조회할 때 보통 Get 방식을 사용한다.
createForm.html 의 input 태그의 name 속성에 작성한 "name"은 키 값이 되어 MemberForm의 setName을 통해 name 변수에 저장된다.
다음 포스트에서 회원 가입한 이름을 조회하는 기능을 구현하도록 한다.
화이링~!