[Spring Boot] 회원 관리 예제 : 웹 MVC 개발
Updated:
회원 웹 기능 - 홈 화면 추가
홈 컨트롤러 추가
controller 패키지에 HomeController.java 추가
@Controller
public class HomeController {
@GetMapping("/") // 첫번째 도메인, localhost 8080으로 들어오면 이 메소드가 호출
public String home() {
return "home";
}
}
홈 화면 추가
templates 에서 home.html 추가
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<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>
-> 회원 가입을 누르면 /members/new url로 연결, 회원 목록을 누르면 /members url로 연결
실행 결과
아무것도 없으면 welcome 페이지 static 페이지로 간다고 했잖아요. 왜 home.html 로 가나요? -> 우선순위가 있다. localhost:8080에서 요청이 오면 관련 컨트롤러를 찾고 없으면 static 파일을 찾는다. 그래서 기존에 있던 정적 리소스는 무시된다.
회원 웹 기능 - 등록
회원 등록 폼 컨트롤러
MemberController.java에 아래 코드 추가
@GetMapping("/members/new")
public String createForm() {
return "members/createMemberForm";
}
resource/template 경로에 members 디렉토리 생성 후, createMemberForm.html 추가
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<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>
실행 결과
등록 버튼을 누르면 key = name : value = spring 이라는 값이 서버로 넘어간다.
회원 등록 컨트롤러 만들기
controller 패키지에 MemberForm.java 생성 후, 코드 작성
package com.example.memberproject.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
➡️ MemberForm.java의 name 변수와 createMemberForm.html의 input 태그의 name = “name”이 매칭이 되면서 값이 들어온다.
MemberController.java에 다음 코드 추가
@PostMapping("/members/new")
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
memberService.join(member); // 회원가입 할 때 만든 join
return "redirect:/"; // 회원가입 후 다시 home으로
}
회원가입에서 입력 버튼을 누르면 다시 home으로 페이지가 돌아간다.
➡️ 회원가입 버튼을 누르면 “” createMemberForm.html 이 뿌려진다.
➡️ form 태그 = 값을 입력할 수 있는 html 태그 : action = “/members/new” method = “post”
➡️ input 태그 : name = “name” (서버로 넘어올 때 key가 된다.)
여기서 등록 버튼을 누르면 action으로 method 방식으로 넘온다. = /members/new 로 post 방식으로 넘어 온다.
➡️ 그럼 MemberController.java의 createForm과 create의 mapping url이 같지만 PostMapping이 있는 메소드가 선택된다.
➡️ input 태그 : name = “name” 을 보고 MemberForm의 name에 입력한 name 값이 들어온다.
➡️ 스프링이 setName을 통해 값을 넣어주고 getName으로 꺼낸다.
- POST : 주로 데이터를 form에 넣어서 전달할 때 사용
- GET : 주로 조회할 때 사용
println 으로 확인 가능 하다.
회원 웹 기능 - 조회
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">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<div>
<table>
<thead>
<tr>
<th>#</th>
<th>이름</th>
</tr>
</thead>
<tbody>
<!-- thymeleaf 문법 foreach -->
<tr th:each="member : ${members}">
<td th:text="${member.id}"></td>
<td th:text="${member.name}"></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
➡️ ${members} : model 안의 값을 꺼내는 것
➡️ th:each : 루프 thymeleaf 문법
➡️ ${member.id}, ${member.name} 출력 : getId, getName에 접근해서 값을 가져와서 출력(프로퍼티 방식)
서버 재실행 후 spring1, spring2 로 회원가입을 하고 회원 목록을 보면 다음과 같이 나온다.
메모리 안에 있기 때문에, 서버를 종료하고 재실행하면 데이터가 다 지워진다.
➡️ 그러니까 데이터를 파일이나 DB에 저장해야 한다 !
Leave a comment