17. 회원 웹 기능 - 홈 화면 추가
url과 매핑된 컨트롤러가 없으면static/index.html실행url과 매핑된 컨트롤러가 있으면 해당 컨트롤러를 호출(우선순위 적용)
📂 HomeController.java
@Controller
public class HomeController{
@GetMapping("/")
public String home(){
return "home";
}
}📂 resources/templates/hello.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>18. 회원 웹 기능 - 등록
📂MemberController.java
@Controller
public class MemberController {
private final MemberService memberService;
@Autowired
public MemberController(MemberService memberService) {
this.memberService = memberService;
}
@GetMapping("/members/new")
public String createForm(){
// View Resolver가 찾아서 선택 -> Thymeleaf가 렌더링
// templates/members/createMemberForm.html
return "members/createMemberForm";
}
@PostMapping("/members/new")
// @ModelAttribute 기능을 통해 매핑
// HTTP 요청의 파라미터 중 키(name)가 MemberForm의 필드 이름과 일치하면 해당 필드에 값이 자동 매핑
public String create(MemberForm form){
Member member = new Member();
member.setName(form.getName())
memberService.join(member);
// 회원가입이 종료되면 홈 화면으로 리다이렉트
return "redirect:/";
}
}
📂resources/templates/members/createMemberForm.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
<!-- 📌 submit -> /members/new에 post 요청-->
<form action="/members/new" method="post">
<div class="form-group">
<label for="name">이름</label>
<!-- 📌 "name" : 서버로 넘어갈 때 key가 됨-->
<input type="text" id="name" name="name" placeholder="이름을 입력하세요">
</div>
<button type="submit">등록</button>
</form>
</div> <!-- /container -->
</body>
</html>📂MemberForm.java
// 폼 데이터를 매핑하기 위한 DTO역할
// setName()을 통해 name값이 설정
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}회원 등록 플로우
[사용자 브라우저]
|
| GET /members/new
v
[MemberController - createForm()]
|
| return "members/createMemberForm"
v
[createMemberForm.html 렌더링됨]
|
| <form> 입력 후 등록 버튼 클릭
v
[POST /members/new 요청]
|
| @ModelAttribute: MemberForm에 name 매핑
v
[MemberController - create()]
|
| Member 객체 생성 + 이름 설정
v
[memberService.join(member)]
|
| 회원 저장 로직 실행
v
[회원 가입 완료 → redirect:/]
|
v
[홈 화면으로 리다이렉트]
@ModelAttribute
- HTTP 요청 파라미터를 객체(빈)에 바인딩해주는 어노테이션
- HTML 폼에서 넘어온 데이터를 자바 객체 필드에 자동으로 넣어줌
- 🌿 객체 타입(
MemberForm))인 경우 생략 가능 - 🌿 기본 타입(
String,int)인 경우@RequestParam으로 처리
19. 회원 웹 기능 - 조회
📂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">
<div>
<table>
<thead>
<tr>
<th>#</th>
<th>이름</th>
</tr>
</thead>
<tbody>
<!-- Thymeleaf 템플릿 엔진이 동작하는 부분-->
<!-- Service의 findMembers() -> Controller가 members로 전달-->
<!-- ${...} : Model안에 있는 값을 꺼냄-->**
<tr th:each="member : ${members}">
**<!-- getId(), getName()으로 접근해서 값을 읽음-->**
<td th:text="${member.id}"></td>
<td th:text="${member.name}"></td>
</tr>
</tbody>
</table>
</div>
</div> <!-- /container -->
</body>
</html>Model 객체
- 스프링 MVC에서 컨트롤러와 뷰(HTML 템플릿) 사이의 데이터 전달자 역할
- 내부적으로는
Map<String, Object>구조
Map<String, Object> model = new HashMap<>();
model.put("members", members);
"개발자는 해결사이자 발견자이다✨" - Michael C. Feathers