홈 화면 추가
HomeController.java와 home.html을 각각 생성한다.
HomeController.java
...
@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">
<h1>Hello Spring</h1>
<p>회원 기능</p>
<p>
<a href="/members/new">회원 가입</a>
<a href="/members">회원 목록</a>
</p>
</div>
</body>
</html>
빌드하고 localhost:8080 접속하면 위 화면이 나온다. 지난 번에 static/index.html 파일을 만들어서 Controller에 루트 컨텍스트("/")가 없으면 해당 파일을 보여주도록 했으나, 이번에는 Controller에 루트 컨텍스트를 지정하여 template/home.html 파일을 보여준다. 두 버튼에 대해서는 아직 화면이 없어서 오류 화면으로 넘어간다.
등록 화면 추가
MemberController.java
...
@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:/";
}
...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>MemberForm.java
...
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
홈 화면에서 회원 가입을 클릭하면 방금 만든 등록 화면(template/createMemberForm.html)으로 이동한다. 이동하면 위와 같이 이름을 입력하고 등록할 수 있는 버튼이 생긴다. 여기서 form을 활용하게 되는데, form 태그에 명시한대로 등록(submit) 버튼을 클릭하면 POST 메소드를 사용해 /members/new를 호출한다. MemberController에서 @PostMapping 어노테이션을 달고 있는 메소드를 찾고, 실행한다. MemberForm에 private로 생성한 name에 input 태그에 명시한 name 프로퍼티의 값이 name으로 같을 때 해당 MemberForm 데이터로 들어가고, 이 name으로 member를 생성, 홈 화면으로 돌아간다.
조회 화면 추가
MemberController.java
...
@GetMapping("/members")
public String list(Model model) {
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}memberList.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
<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>
</body>
</html>
메모리에 저장하다보니 재시작 하면 목록에 아무것도 안 나온다.
등록 화면에서 회원을 등록하면 위 처럼 id와 name이 나온다. 조회 화면에 들어오면 findMembers() 메소드로 회원 목록을 조회하고, List를 Model에 추가하여 memberList.html로 전달한다. 그럼 thymeleaf가 th:each로 members List를 순회하며 member의 id와 name을 반복하여 출력하는 형태이다.
'스터디 > Spring' 카테고리의 다른 글
| Spring 스터디 - 7 (1) | 2025.03.09 |
|---|---|
| Spring 스터디 - 6 (0) | 2025.02.18 |
| Spring 스터디 - 4 (0) | 2025.02.16 |
| Spring 스터디 - 3 (0) | 2025.02.12 |
| Spring 스터디 - 2 (0) | 2025.02.10 |
