- 해당 게시물은 인프런 "스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술" 강의를 참고하여 작성한 글 입니다.
회원 웹 기능 - 홈 화면 추가
다음과 같이 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("/") 에서 볼 수 있듯이 "/" 경로로 들어올 경우 호출 된다.
즉, home 화면이다.
그리고 다음과 같이 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아래는 실행 화면이다.
회원 웹 기능 - 등록
이제는 등록 기능을 구현할 차례이다. 회원의 등록이므로 MemberController에 아래와 같이 코드를 작성해 준다.
@GetMapping("/members/new")
public String createForm(){
return "members/createMemberForm";
}위에 코드는 @GetMapping("/members/new")에서 볼 수 있듯이, "/members/new"을 Get으로 들어왔을 경우 실행한다.
그 후, "members/createMemberForm" 파일에 아래 코드를 작성해준다.
<!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>아래는 http://localhost:8080/members/new에 들어올 경우 실행화면이다.
이제 등록기능을 만들었으니, 해당 등록기능을 수행할 경우 오는 POST요청을 처리할 차례이다.
아래와 같이, DTO 기능을 수행하는 MemberForm을 만들어준다.
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}중요한 점은 위에서 post 메세지에서 name이라는 이름으로 오기때문에 동일한 변수명을 사용하면 자동으로 매칭된다.
그리고 post요청을 받아 해당 데이터를 repository에 저장하는 로직을 MemberController에 구현해 주면 된다.
@PostMapping("/members/new")
public String create(MemberForm form){
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}해당 코드는 DTO를 통해서 POST요청을 받고 해당 데이터를 repository에 저장하는 코드이다.
회원 웹 기능 - 조회
이제 조회기능을 구현해보겠다. 조회기능 또한 회원에대한 기능이므로 MemberController에 구현한다.
@GetMapping("/members")
public String list(Model model){
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}굳이 어려운점을 하나 꼽자면 Model 객체이다. 아래 링크를 참고하여 이해하였다
https://gocoder.tistory.com/2489
간단하게 설명하자면 model을 이용하면 해당 데이터를 가지고 이동한다. 그래서 이동한 html페이지에서 해당 데이터를 사용할 수 있다.
그리고 "members/memberList" 파일에 아래와 같이 코드를 작성해준다.
<!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>아래는 실행결과이다.
현재는 메모리에 회원정보를 저장하기 때문에 서버를 재가동할 경우 회원목록은 초기화 된다.
그래서 파일이나 DB를 사용해야한다.
잘 읽었습니다. 좋은 정보 감사드립니다.