4. Controller
localhost:8080 으로 요청을 할때 나타낼 home 화면을 리턴해줄 Controller을 만든다.
@Controller
public class HomeController {
@GetMapping("/")
public String home() {
return "home";
}
}home.html은 다음과 같다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
<div>
<h1>Hello Spring</h1>
<p>회원 기능</p>
<p>
<a href="/members/new">회원 가입</a>
<a href="/members">회원 목록</a>
</p>
</div>
</div>
</body>
</html>
다음으로 회원관리에 대한 요청을 수행할 MemberController를 만든다.
@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 memberForm) {
Member member = new Member();
member.setName(memberForm.getName());
System.out.println("member = "+member.getName());
memberService.join(member);
return "redirect:/";
}
@GetMapping("/members")
public String list(Model model) {
List<Member> members = memberService.findMembers();
model.addAttribute("members",members);
return "members/memberList";
}
}MemberController 클래스는 회원관리 서비스 클래스인 MemberService 클래스에 의존한다. 스프링부트는 스프링 컨테이너를 실행할 때 ComponentScan을 하며 Component로 등록된 클래스의 객체를 생성하여 스프링빈으로 등록한다. MemberController의 객체가 생성될 때 @Autowired 가 붙은 생성자를 통해 Configuration에 @Bean으로 등록된 MemeberService 객체가 주입된다. 이러한 동작을 Dependency Injection 이라고 한다.
@Configuration
public class SpringConfig {
@Bean
public MemberService memberService() {
return new MemberService(memberRepository());
}
@Bean
public MemberRepository memberRepository() {
return new MemoryMemberRepository();
}
}
@Configuration 에 있는 MemberService와 MemberRepository는 @Service, @Repository를 이용해서 스프링빈으로 등록할 수도 있다.
1. 회원 가입
화면에서 회원 가입을 누르면 /members/new 를 get 방식으로 요청한다.
<a href="/members/new">회원 가입</a>MemberController에서 회원가입 화면을 리턴한다.
@GetMapping("/members/new")
public String createForm() {
return "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>
</body>
</html>이름을 입력하고 등록 버튼을 누르면 /members/new 가 post방식으로 요청된다.
<input type="text" id="name" name="name" placeholder="이름을 입력하세요">input에서 name="name" 이 key가 되고 입력한 값이 value가 된다.
요청으로 넘어온 데이터를 담기 위한 MemberForm 클래스를 만든다.
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}MeberController에서 @PostMapping에 매핑된다.
@PostMapping("/members/new")
public String create(MemberForm memberForm) {
Member member = new Member();
member.setName(memberForm.getName());
memberService.join(member);
return "redirect:/";
}이때 요청으로 넘어온 데이터는 key에 해당하는 변수에 value를 세팅한다.
클래스 내부의 변수는 private이므로 setName 메소드(setter)를 통해 값을 세팅한다.
파라미터에 데이터가 매칭된 MemberForm 객체가 들어오고 name을 꺼내서 멤버 객체를 생성한 뒤 MemberService의 join을 호출하여 회원을 등록한다.
"redirect:/" 는 홈 화면을 다시 리턴한다.
2. 회원 목록
회원 목록을 누르면 /members 를 get 방식으로 요청한다.
<a href="/members">회원 목록</a>MemberController에서 매핑된다.
@GetMapping("/members")
public String list(Model model) {
List<Member> members = memberService.findMembers();
model.addAttribute("members",members);
return "members/memberList";
}MemberService의 findMember()를 호출하여 Member List를 생성하고
model에 addAttribute로 담는다. key 를 정하고 value에 객체를 담는다.
다음은 회원 목록 결과를 보여줄 memberList.html이다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
<div>
<table>
<thead>
<tr>
<th>#</th>
<th>이름</th>
</tr>
</thead>
<tbody>
<tr th:each="member : ${members}">
<td th:text="${member.id}"></td>
<td th:text="${member.name}"></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>thymeleaf는 모델에 담긴 key로 객체에 접근한다. 객체의 필드에 접근할 때는 프로퍼티 접근 방식으로 getId(), getName()과 같은 getter를 이용하여 필드에 접근한다. 데이터를 꺼내 렌더링하여 소스를 변환하여 브라우저로 리턴한다.
결과 화면은 다음과 같다.
