[ 회원 웹 기능 - 홈 화면 추가 ]
홈 컨트롤러 추가
회원 관리용 홈
<!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>
컨트롤러가 정적 파일보다 우선순위가 높음
localhost::8080 요청이 들어오면
1. controller을 찾고 없으면 !
2. static 파일을 찾음
[ 회원 웹 기능 - 등록 ]
1. 회원 등록 폼 개발
회원 등록 폼 컨트롤러
@Controller
public class MemberController {
private MemberService memberService;
@Autowired
public void setMemberService(MemberService memberService){
this.memberService = memberService;
}
@GetMapping("/members/new")
public String createForm(){
return "members/createMemberForm";
}
}
회원 등록 폼 HTML
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>
2. 회원 등록 컨트롤러
웹 등록 화면에서 데이터를 전달 받을 폼 객체
: controller 패키지에 MemberForm 클래스 생성 후, getter & setter을 만들어준다 꼭 !
setName을 통해서 name에 사용자가 등록한 이름을 넣어준다.
회원 컨트롤러에서 회원을 실제 등록하는 기능
: MemberController클래스
@PostMapping("/members/new")
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}이때 PostMapping은 사용자가 이름을 "등록"하며 어떤 데이터를 "Post"한다고 생각하면 된다.
회원 등록 폼 HTML을 확인해보면 form 태그에서 method가 Post임을 확인 할 수 있다.
→ URL은 동일하지만 form태그의 method에 따라 선택되는 controller에서 선택되는 메서드가 다르다
(GetMapping은 주로 조회할 때 사용 !)
[ 회원 웹 기능 - 조회]
회원 컨트롤러에서 조회 기능
@GetMapping(value = "/members")
public String list(Model model) {
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}
- findMembers() : 모든 멤버를 다 끌어온다
회원 리스트 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> <!-- /container -->
</body>
</html>
이렇게 되어 있는것을 확인할 수 있다.
🏷️ ${members} : 모델 안에 있는 값을 꺼낸다.
@GetMapping(value = "/members")
public String list(Model model) {
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}
여기서 model.addAttribute로 members라는 이름으로 이 안에 List로 모든 회원을 다 조회해서 담아놨다.
루프를 돌며 하나씩 member를 가져와 id와 name을 보여준다.
해당 데이터들은 메모리안에 있기 때문에(연습용) java를 내려버리면 회원 데이터가 다 사라진다 ! !
(실무에서는 파일이나 데이터베이스에 저장)
'개발 > Spring' 카테고리의 다른 글
| [자바 ORM 표준 JPA 프로그래밍] JPA란? (0) | 2025.01.11 |
|---|---|
| [Spring] 스프링 입문 - 자바 코들 직접 스프링 빈 등록하기 (0) | 2024.11.07 |
| [Spring] 스프링 입문 - 컴포넌트 스캔과 자동 의존관계 설정 (0) | 2024.11.07 |
| [Spring] 스프링 입문 - 회원 서비스 테스트 (0) | 2024.11.07 |
| [Spring] 스프링 입문 - 회원 서비스 개발 (0) | 2024.11.07 |