회원 웹 기능 - 등록
우리가 이전 게시글에서 작성했던 MemberController로 가서 @GetMapping("/mebers/new")를 추가해주자.
package hello.hellospring.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/")
public String home(){
return "home";
}
@GetMapping("/members/new")
public String createForm(){
return "members/createMemberForm";
}
}@GetMapping을 추가해주었다. /members/new URL로 웹브라우저를 진입해주면 해당 members/createMemberForm.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>우리는 위에있는 html태그 중 input태그가 어떻게 작동하는지 잘 알아야 한다. input 태그를 예를 들어서 name을 spring이라고 하자
위에 있는 사진에서 등록 버튼을 누르면 name이라는 key와 spring이라는 value 가 server에 넘어가게 된다.
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}MemberForm을 만들어 주었다. 이런식으로 코드를 작성하면 MemberForm에 있는 name이랑 createMemberForm.html에 있는 input type = "text" id = "name" name = "name"에 있는 "name"이랑 매칭 되서 값이 들어올 것이다.
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.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
@Controller
public class MemberController {
private final 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){
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}
}다시 member controller로 가서 위에 코드와 같이 작성해준다.
function flow
홈 화면에서 먼저 회원가입을 들어간다. 그러면 /members/new 웹 브라우저로 들어가게 된다.
여기서 추가 꿀팁) 보통 URL에 직접 입력하여 데이터를 얻는 방식을 Get방식이라고 한다.
그러면 members/new로 와서 createForm()메서드가 실행이 된다.return "members/createMemberForm"을 만나면 아무것도 하는 거 없이viewResolver라는 것을 통해서 members/createMemberForm template을 찾는다. 이 때 찾는 것이 있다면 이것이 선택이 된다.
현재 우리는 thymeleaf 템플릿 엔진을 사용하고 있기 때문에 thymeleaf template 엔진이 랜더링 해준다. 이렇게 되면 html이 뿌려진다. 뿌려질때 <form>이라는 html태그가 있다. 해당 태그는 값을 입력할 수 있는 태그이다.
<form> 태그의 내부를 보면 action = "members/new" method = "post"라고 되어 있다.
여기서 살펴보면 input 태그도 하나 있다. 웹 페이지에서 spring이라고 적어주고 등록을 누르면 form action의 url에 매칭되어 post방식으로 넘어온다. 이렇게 되면 MemberController에 PostMapping이라고 해놓은 부분이 있다.
PostMapping은 보통 form같은 곳에 데이터 넣어다가 전달할 때 Post방식을 사용, Get은 주로 조회할 때 사용한다.
이렇게 되면 input태그에 있는 name을 보고 스프링이 MemberForm에 name을 넣어줌
더욱 자세히 말하자면 Spring이 setName을 호출해가지고 name에 spring(value)을 넣어준다.