회원 웹 기능 - 홈 화면 추가
홈 컨트롤러 추가
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";
}
}회원 관리용 홈
<!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>참고✅
이 전에 생성해두었던 static 폴더의 index.html 이 실행되지 않는다.
이유는?
- 컨트롤러가 정적 파일보다 우선순위가 높다! 그렇기 때문에
homeController가 실행된다.
회원 웹 기능 - 등록
MemberController create 메서드 추가
- 데이터를 전달 할
@PostMapping("/members/new")으로 작성 - .html 에서 name="name" 으로 서버에 전달된 키를 getName으로 가져온다.
- join으로 회원 등록을 완료한다.
- 등록을 누르면 홈 화면으로
redirect를 처리한다.
@PostMapping("/members/new")
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
// .html 에서 name="name" 으로 서버에 전달된 키를 getName으로 가져온다.
System.out.println("member = " + member.getName());
memberService.join(member);
return "redirect:/";
}createMemberForm.html 작성
memberController의PostMapping을 찾아 create 메서드를 호출한다.MemberForm의name과 html의name="name"이 매칭이 되어 서버로 넘어온다
<!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>
<!-- name="name" 서버로 넘어올 때 key가 된다.-->
<button type="submit">등록</button> </form>
</div> <!-- /container -->
</body>
</html>회원 웹 기능 - 조회
MemberController list 메서드 추가
List<Member> members로 모든 멤버를 찾아model담아준 뒤, view(html)로 넘겨준다.
@GetMapping("/members")
public String list(Model model) {
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}memberList.html 작성
루프를 돌면서 로직을 실행한다.
<tr th:each="member : ${members}">
<td th:text="${member.id}"></td>
<td th:text="${member.name}"></td>
</tr>- '$'는
model안에 있는 값을 꺼내서member에 담는다. <td th:text="${member.id}"></td>:member.getId()을 출력<td th:text="${[member.name](http://member.name/)}"></td>: `member.getName()을 출력
전체 코드
<!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}"> <!-- '$'는 model 안에 있는 값을 꺼내서 member에 담는다. -->
<td th:text="${member.id}"></td> <!-- getId()을 출력 -->
<td th:text="${member.name}"></td> <!-- getname()을 출력 -->
</tr>
</tbody>
</table>
</div>
</div> <!-- /container -->
</body>
</html>참고✅
- 회원 등록 후 목록들은 모두 로컬에 저장되어있기 때문에 서버를 종료 후 재실행했을 때는 리스트가 사라진다.
- 서버를 종료 후, 재시작 했을 때에도 이전에 입력했던 데이터를 출력하고 싶다면 데이터베이스에 저장해야한다.
