지난 포스팅(홈 화면)에 이어
회원 가입과 등록을 해보고자 한다.
https://healthdevelop.tistory.com/entry/spring18
[Spring boot] 스프링 홈 화면 | 메인 화면 | 메인 페이지 | 타임리프(Thymeleaf)
컨트롤러를 통해 사용자에 요청에 따라 홈 화면을 보여주고자 한다. 기존 코드(Service, Repository, Domain 등)는 아래 링크에서 순차적으로 볼 수 있다 https://healthdevelop.tistory.com/entry/spring12 [Spri..
healthdevelop.tistory.com
기존 코드(Service, Repository, Domain 등)는 아래 링크에서
순차적으로 볼 수 있다
https://healthdevelop.tistory.com/entry/spring12
[Spring boot] 스프링 - 회원 가입, 회원 조회
간단한 회원관리 예제를 구현하고자 한다. 순서는 아래를 참조하면 된다. ● 회원관리 예제 - 백엔드 개발 1. 회원 도메인과 리포지토리 만들기 2. 회원 리포지토리 테스트 케이스 작성 3. 회
healthdevelop.tistory.com
1. MemberController 작성
MemberController.java
package hello.hellospring.controller;
import hello.hellospring.domain.Member;
import hello.hellospring.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import java.util.List;
@Controller
public class MemberController {
private MemberService memberService;
@Autowired
public MemberController(MemberService memberService){
this.memberService = memberService;
}
@GetMapping("/members/new")
public String createForm(){
return "members/createMemberForm";
}
@PostMapping("/members/new")
public String create(MemberForm form){
// post로 넘어온 input 데이터(name)는 매개변수로 입력한 MemberForm에 있는 name에 자동으로 setName이 됨
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}
}
클라이언트로부터 "/members/new" 화면 요청이 오면
스프링 컨테이너 안에 있는 컨트롤러에서 관련 컨트롤러가 있는지 찾는다.
위 코드에서 @GetMapping("/members/new")을 통해 해당 화면 요청에 대한 처리를 할 수 있다.
반환 값으로 "members/createMemberForm"을 주었으니
개발자는 members/createMemberForm.html을 작성해야 한다.
그러면 클라이언트가 "/members/new" 화면 요청 시
members/createMemberForm.html을 볼 수 있는 것이다.
2. createMemberForm.html 작성
createMemeberForm.html
<!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>
form 태그가 삽입된 html을 작성하였다.
이제 서버를 실행시켜서 화면을 확인 해보자.
사용자가 현재 "/members/new" 페이지에 요청을 한 상황이라고 가정할 때,
입력했던 html이 잘 보이는걸 알 수 있다.
그럼 이제 클라이언트가 이름을 입력하고 "등록" 버튼을 누를 때
입력한 이름을 가지고 어떠한 처리(ex. 회원 가입)를 하고자 한다면 어떻게 할까?
그건 바로 작성한 html안에 있는
<form action="/members/new" method="post">
여기에 해답이 있다.
기본적으로 form 태그는 action과 method가 있는데,
form 내에서 어떠한 작업(ex. 이름 입력)을 하고
이를 처리(ex. 버튼 누르기 등)을 했을 때,
action 값인 url을 매핑하고 method 값인 Post로 전달을 한다.
그러면 post로 전달한 값은 어떻게 개발자가 가공을 하느냐,,
답은 controller에 있다.
@PostMapping("/members/new")
public String create(MemberForm form){
// post로 넘어온 input 데이터(name)는 매개변수로 입력한 MemberForm에 있는 name에 자동으로 setName이 됨
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}
MemberController에 있는 메소드이다.
메소드 상단에 @PostMapping("/members/new")가 있다.
이것은 "members/new" URL이 post 방식으로 전달이 됐을경우 실행되는 메소드란 뜻이다.
이제 그럼 클라이언트의 입력값인 이름을 담을
MemberFrom 클래스를 생성해보자
3. MemberForm.java 작성
MemberForm.java
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
단순한 이름 입력값을 담을 클래스를 작성하였다.
다시 controller를 살펴보면
@PostMapping("/members/new")
public String create(MemberForm form){
// post로 넘어온 input 데이터(name)는 매개변수로 입력한 MemberForm에 있는 name에 자동으로 setName이 됨
Member member = new Member();
member.setName(form.getName());
System.out.println("member = " + member.getName());
memberService.join(member);
return "redirect:/"; // 홈 화면으로 리다이렉트
}
post로 넘어온 input 데이터(name)은
해당 메소드 매개변수인 MemberForm form에 name과 자동으로 연동이 된다.
따라서 getName을 통해 이름값을 받아올 수 있다.
이제 스프링을 실행시킨 후
이름을 입력후 "등록" 버튼을 눌러보자.
"등록" 버튼을 누르면..
홈 화면으로 redirect가 되는 동시에
post매핑 메소드에 작성했던
member.getName()이 잘 실행되었다.
다음 포스팅에선 회원 조회를 구현해보고자 한다.
