..

[Spring Basic] 5. Member Management Example - Web MVC

Table of contents

회원 웹 기능

홈 화면 추가

HomeController생성

controller/HomeController.java

@Controller  
public class HomeController {  
	@GetMapping("/")  
	public String home() {  
		return "home";  
	}  
}

resources/templates/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> <!-- /container -->  
</body>  
</html>
  • view가 호출하는데 우선순위(priority)가 있다
    • 먼저 mapping된 view가 있는지 container에서 확인
      • 등록된 Controller가 있고 mapping된 View가 있는경우 -> viewResolver가 resource:templates/ + {viewName} + .html 에서 view를 찾아 변환 후 return
    • 없으면 resources:static/ 하위의 파일에서 index.html을 보여준다

등록

회원 등록하는 view를 생성, MemberController에서 path설정

controller/MemberController.java

@Controller  
public class MemberController {  
  
	private final MemberService memberService;  
	  
	@Autowired  
	public MemberController(MemberService memberService) {  
		this.memberService = memberService;  
	}  
	  
	@GetMapping("/members/new")  
	public String createForm(){  
		return "members/createMemberForm";  
	}
}


html 페이지 생성

templates/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>
  • 등록 button을 누르면 members/new URL로 POST방식으로 값이 넘어온다.


MemberForm 클래스 생성

controller/MemberForm.java

public class MemberForm {  
	private String name;  
	  
	public String getName() {  
		return name;  
	}  
	  
	public void setName(String name) {  
		this.name = name;  
	}  
}
  • Post방식으로 받아오는 데이터를 처리하기 위해서 필요한 클래스이다.


MemberController에 PostMapping 설정

controller/MemberController.java

@Controller  
public class MemberController {  
	  
	private final MemberService memberService;  
	  
	@Autowired  
	public MemberController(MemberService memberService) {  
		this.memberService = memberService;  
	}  
	  
	@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:/";  
	}  
}
  • Form에 담긴 데이터를 전달 받는다 (POST방식)
  • MemberForm의 name 변수에 우리가 적은 name이 들어오게 된다
  • Spring이 MemberForm클래스의 name이라는 변수에 setName을 통해(사용해서) Post로 넘어오는 (< input type=”text” name=”name” … > ) name의 값을 넣어준다.
  • @GetMapping - 조회 시
  • @PostMappig - Form에 데이터를 넣어서 전달할때

조회

멤버 목록 조회를 위한 GetMapping 설정

controller/MemberController.java

@GetMapping("/members")  
public String list(Model model){  
	List<Member> members = memberService.findMembers();  
	model.addAttribute("members", members);  
	return "members/memberList";  
}

templates/members/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>  
					<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>
  • Model안에 있는 members를 읽어서 loop를 돌면서 property방식(getter, setter) 으로 데이터에 접근해서 값을 가져와 출력 해준다
  • template엔진이 렌더링 할때 ${members} 는 Model안의 값을 꺼내오는것
    • ${member.id} - Member객체의 getId() 로 값을 가져온다
    • ${member.name} - Member객체의 getName() 으로 값을 가져온다

지금까지는 저장한 데이터들이 Memory에 저장되기 때문에 서버를 내리고 다시 시작하면 Data가 전부 지워진다. 이런 데이터들을 File이나 DB에 저장을 해야한다