💡 홈 화면 추가
웹 mvc로 회원관리 예제를 개발해보자
먼저 홈 화면을 추가해보자.
controller 패키지에서 homeController를 만들고 아래와 같은 코드를 작성하자.
@Controller
public class HomeController {
@GetMapping("/")
public String home() {
return "home"; // template 패키지에 home.html이 호출된다
}
}home을 리턴하였기에 template 패키지에 home.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>localhost:8080에 접속하면 home.html 코드의 페이지가 나오는걸 볼 수 있다. 분명 이전에 index.html을 웰컴페이지로 만들었는데 왜 home.html이 나올까? 이유는 스프링 컨테이너에서 먼저 컨트롤러에 매핑된게 있는지 확인한다. 따라서 매핑된 home.html이 나오고 index.html은 무시된다.
💡 회원 등록
기존에 생성했던 memberController에 아래와 같은 코드를 작성한다.
/members/new 경로를 가면 members 폴더에 createMemberForm.html 파일을 리턴한다.
@GetMapping("/members/new")
public String createForm() {
return "members/createMemberForm";
}return 해준 주소를 따라 template 패키지에 members라는 폴더를 만들고 createMemberForm.html을 만들어주자.
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>여기까지하고 localhost:8080에 들어가서 회원가입을 클릭하면 아래와 같은 화면이 생길것이다.
input에 값을 입력하고 등록버튼을 누르면 /members/new에 post방식으로 넘어오는 방식이다. 밑에서 추가적으로 설명하겠다.
회원 등록하는 컨트롤러를 만들어보자. controller 패키지에 MemberForm이라는 클래스를 만들고 아래와 같은 코드를 작성한다. input에서 넘긴 name값이 매칭될 것이다.
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
이제 membercontroller에 코드를 추가하자.
@PostMapping은 데이터를 폼 값은데서 전달할때 쓰고 @GetMapping은 조회할때 주로 쓴다. url은 똑같지만 get, post에 따라 다르게 매핑된다.
따라서 위의 폼에서 값을 입력하고 등록을 누르면 create 메서드가 호출된다. create 메서드를 살펴보자. MemberForm에 name필드에 setName을 통해서 input에 입력한 값이 들어간다. form에서 getName으로 꺼내서 join 메서드로 가입을 한 것이다. sout을 통해 확인해보면 input에 입력한 값이 잘찍히는걸 확인할 수 있다.
@PostMapping("/members/new")
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
System.out.println("member = " + member.getName());
memberService.join(member);
return "redirect:/"; // 홈 화면으로 보냄
}💡 조회
membercontroller에 조회하는 코드를 작성하자.
findMembers를 통해 모든 멤버를 가져와서 리스트 자체를 모델에 담아 넘긴다.
@GetMapping("/members")
public String list(Model model) {
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberlist";
}members 폴더에 memberlist.html을 만들고 랜더링 과정을 살펴보자.
일단 ${}는 모델안에 있는 객체를 꺼내오는 코드다. 그리고 th:each라는 문법은 ${members}객체를 하나씩 꺼내서 member라는 이름으로 하나씩 루프를 도는것이다. 자바에 forEach 문법과 동일하다고 생각하면 된다. 따라서 첫번째 객체를 꺼내서 member에 담고 id, name을 getter를 통해서 접근한다.
<!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>
</body>
</html>서버를 다시 돌려서 spring1, spring2를 각각 등록하고 회원목록을 가보면 아래와 같이 들어가있다.
참고로 메모리에 저장되있는거기 때문에 서버를 재시작하면 데이터가 다 지워진다. 따라서 다음 시간에 데이터베이스에 저장하는 법을 배워보자.
