출처) 인프런 스프링 입문 강의
1. 홈 화면 만들기
controller 폴더에 HomeController 클래스 생성
HomeController.class
package hello.hellospring.contoller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/")
public String home(){
return "home";
}
}static/templates 폴더에 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>HelloSpringApplication 실행하면 localhost:8080에 home.html에서 생성한대로 화면이 뜸
index.html이 있는데 왜 home.html이 보여지는 것인가?
➡️ 우선 순위가 있기 때문
⭐️ 요청이 들어오면 스프링 컨테이너 안에 관련 컨트롤러가 있는지 확인하고, (컨트롤러가 우선)
없다면 static 파일을 리턴함
이 경우에는 HomeController가 매핑되기 때문에 (GetMapping url이 "/")
컨트롤러가 호출되고, index.html은 무시됨
2. 회원 가입 페이지
아까 home.html에서 생성한 /members/new 를 생성하기 위해서
MemberController에 GetMapping 추가
@GetMapping("/members/new")
public String createForm(){
return "members/creatMemberForm";
} 이후 templates/members/ 아래에 createMemberForm.html 파일 생성
form 형태로 button을 통한 submit이 들어오면 input으로 받은 것을 post 해줌
<!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>application 껐다가 다시 돌리면 이렇게 잘 뜨는 것을 확인할 수 있다
회원 등록하는 폼은 만들었으니, 실제로 DB에 저장하는 컨트롤러가 필요함
controller/ 에 MemberForm.class 생성
name에 대한 getter, setter 만들기
스프링이 setName으로 받은 input을 저장해주고, 우리는 getName으로 꺼내면 됨
package hello.hellospring.contoller;
public class MemberForm {
private String name;
public String getName(){
return name;
}
public void setName(String name){
this.name = name;
}
}MemberController에 해당 기능 넣기
post 기능이기 때문에 @PostMapping 으로 추가
form에서 getNam()으로 입력 받은 이름을 리턴 받아서 setName으로 저장해서 멤버 생성
생성한 멤버를 기존것에 join으로 추가함
회원가입 등록을 하면 홈화면으로 다이렉트 하기 위해 return "redirect:/" 추가
@PostMapping("/members/new")
public String create(MemberForm form){
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}⭐️ 정리
1) members/new 페이지로 이동
2) memberController의 members/new와 매핑되는 GetMapping 함수 호출
여기서는 "members/createMemberForm" 이 리턴되어서 해당 html을 보여줌 (회원가입 페이지 html)
3) createMemberForm.html 중 form 태그의 action url
<form action="/members/new" method="post">
<div class="form-group">
<label for="name">이름</label>
<input type="text" id="name" placeholder="이름을 입력하세요">
</div>
<button type="submit">등록</button>
</form>members/new 로 post 방식으로 input으로 받은 이름을 보냄
4) memberController의 members/new (action url)과 매핑되는 PostMapping 함수 호출
여기서는 create 함수가 호출 됨
⭐️ 위 GetMapping과 URL은 같지만 method가 다르기 때문에 Post로 호출됨
5) create 함수가 호출되어서 멤버를 생성하고, 해당 멤버에 이름을 form에서 받은 이름으로 저장
member.setName(form.getName())
6) 이후 return 되는 redirect:/로 인해 홈화면으로 돌아감
3. 회원 조회 페이지
MemberController에 기능 추가
memberService에서 생성한 findMembers (회원 전체 조회) 한 값을
리스트 형태로 저장하고, model에 담아서 view 템플릿에 넘기기
@GetMapping("/members")
public String List(Model model){
List<Member> members = memberService.findMembers();
model.addAttribute("members",members);
return "members/memberList";
}templates/members 폴더에 memberList.html 생성
th:each 루프문 (for each문이랑 같음)
지금 model안에 members가 들어있는데 이를 루프로 돌려서 출력시킴
th:each="A :${B}" 하고 내부 html에서 A. 로 프로퍼티 접근
B 자리에 members (list 형태 회원 정보)를 넣고 반복문 안에서 해당 값을 부를 변수명을 A에 넣음
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
<div>
<table>
<thread>
<tr>
<th>#</th>
<th>이름</th>
</tr>
</thread>
<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>앱 끄고 다시 켜보면, 회원 목록 클릭했을 때 페이지에
아직은 아무것도 없지만 이름 등록해보고 다시 조회하면
이렇게 전체 회원이 잘 뜨는 것을 확인할 수 있음
메모리에 저장하기 때문에 서버를 껐다가 켜면 데이터가 다 사라짐
➡️ DB에 저장해야함
