2023. 4. 24. 11:05ㆍSpring/Java
회원 가입, 회원 조회를 웹에서 볼 수 있도록 만들고자 한다.
홈 화면 추가
HomeController
package hello.hellospring.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/")
public String home() {
return "home";
}
}이전에 @GetMapping("/")이 localhost:8080의 주소를 가리킨다. 하지만 예전에 static 안에 index.html로 연결되는 welcome page를 만들어 두었던 기억이 난다.
요청에 대한 우선순위가 있다고 한다.
먼저 Controller어 안에서 관련된 것이 있는지 찾고 없으면 static 파일을 찾는다고 한다.
Home.html
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</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>
</body>
</html>a 태그를 이용하여 members/new 와 /members로 접속 가능하게 만들었다.
회원 등록
회원 등록을 위해 MemberController에 이 코드를 추가한다.
@GetMapping("/members/new")
public String createForm() {
return "members/createMemberForm";
}아래는 createMemberForm.html
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</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>
</body>
</html>get 요청이 오면 이 html 페이지를 띄워준다. html 안에는 form 태그를 이용하여 post요청을 받는 부분이 있다.
MemberForm.java
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
MemberForm을 미리 만들어 둔다.
@PostMapping("/members/new")
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}Controller에서 postmapping을 해주고 MemberForm을 받아 온다. 위에 createMemberForm.html 에서 input에 값을 넣으면 input태그 안에 name="name"에 값이 들어가 MemberForm의 String name에 저장이 된다.
Controller에서는 이 저장된 MemberForm을 받아 member 객체를 새로 만들고 회원가입 시킨다.
회원 조회
@GetMapping("/members")
public String list(Model model) {
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}Controller에서 회원 조회를 하기 위해 mapping을 해준다. 기존에 Service에서 미리 만들어두었던 함수를 가져와 members라는 List에 담는다. 이를 model에 추가해 준다.
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<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>memberList.html 에서는 thymeleaf 문법을 이용하여 model의 members로 저장된 객체들을 가져와서 렌더링 해준다.
이제 회원가입을 하면 이런 식으로 볼 수 있다.
참고로 현재 데이터베이스는 메모리 구현체로 이용하고 있기 때문에 서버를 껐다가 켜면 모두 날아가는 상태이다.