지금까지 우리는 'MVC로 회원관리'라는 궁극적 목표를 가지고 필요한 개념들을 학습했다.
1️⃣화면을 띄우는 세가지 방법을 알아보고
2️⃣도메인, 레포지토리, 서비스를 개발하고
3️⃣'의존성 주입'에 대해 학습하고, 이를 이용해 컨트롤러를 개발했다.
이번 글에서는 4️⃣MVC로 회원관리를 해보고,
다음 글에서는 한단계 더 나아가 5️⃣DB와 연결하며 JPA에 대해 배울 것이다.
이를 위해 이번 글에서는
1. 홈 화면
2. 등록 화면
3. 조회 화면
을 만들며 MVC 로 회원관리를 하려 한다.
1. 홈 화면 만들기
구현해야 하는 것 : 홈 화면 / 컨트롤러에서 Get 매핑
홈 화면
<!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> <!-- /container -->
</body>
</html>홈(”/”) 컨트롤러
package hello.hellospring.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/")
public String home() {
// 복습) 리턴한 문자열에 해당하는 html을 resource.template 폴더에서 찾아 모델을 전달
return "home";
}
}Q. 스프링에서는 그냥 localhost:8080 으로 들어오면 welcome를 띄워준다고 하지 않았나?
A. 정적 파일보다 컨트롤러가 우선순위가 높기 때문이다.
이전에 welcome-page를 만들 때는
resource/static에서 index.html을 자동으로 찾아서 welcome-page로 만들었지만,
static보다 컨트롤러가 우선순위가 높으므로 @GetMapping("/")이 호출된다.
2. 등록 화면 만들기
등록 폼이 있는 화면
<!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>등록 화면 컨트롤러
package hello.hellospring.controller;
import hello.hellospring.domain.Member;
import hello.hellospring.service.MemberService;
@Controller
public class MemberController {
private final MemberService memberService;
@Autowired
public MemberController(MemberService memberService) { // 의존성 주입
this.memberService = memberService;
}
// 회원가입 링크를 누르면, template폴더에 있는 members/createMemberForm.html이 띄워짐
@GetMapping(value = "/members/new")
public String createForm() {
return "members/createMemberForm";
}
@PostMapping(value = "/members/new") // 멤버를 입력하면 post로 폼이 전달되며 호출됨
public String create(MemberForm form) { // 이미 만들어둔 Member class를 사용하면 안되나?
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}
}
// 얘 없이도 되는지 테스트해보고 되면 빼버리기
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
회원 컨트롤러에서 회원을 실제 등록하는 기능
3. 조회 화면 만들기
회원 조회 컨트를러
@GetMapping(value = "/members")
public String list(Model model) {
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList"; // template에서 이 html을 찾으면서 model 전달
}조회 화면
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
<div>
<table>
<thead>
<tr>
<th>#</th>
<th>이름</th>
</tr>
</thead>
<tbody>
<!--모델에 담긴 member을 사용해 동적 화면 만듦-->
<tr th:each="member : ${members}">
<td th:text="${member.id}"></td>
<td th:text="${member.name}"></td>
</tr>
</tbody>
</table>
</div>
</div> <!-- /container -->
</body>
</html>th:each라는 thymeleaf 문법을 통해 members로 받은 리스트를 도는 루프를 만들었다.