-
스프링 부트 - 회원 관리 예제 실습 (웹 MVC 개발)Spring Framework 2022. 4. 11. 00:01
비즈니스 로직을 만들었으니 이제 화면을 구성할 차례입니다.
1. hello.hellospring.controller 패키지에 HomeController.java 파일을 생성합니다.
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"; } }@Controller 어노테이션을 추가해서 스프링 컨테이너에 해당 클래스가 컨트롤러임을 알립니다.
@GetMapping("/") 어노테이션을 추가해서 localhost:8080/으로 응답이 들어왔을 때 처리하도록 합니다.
home을 반환해서 home.html을 호출하도록 합니다.
이전에 static/index.html 으로 localhost:8080/으로 접속했을 때 welcome page를 보여줬었는데 이렇게 겹치게 되면 어떻게 될까요?
스프링 컨테이너가 관련 컨트롤러가 존재하는지 먼저 찾고 없다면 static 파일을 찾도록 되어있기 때문에
1. 컨트롤러 2. static 으로 우선순위를 가지기 때문에 home.html이 화면으로 보입니다.
2. hello-spring/src/main/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>3. 서버를 구동하고 localhost:8080에 접속합니다.
localhost:8080 회원 가입/ 회원 목록에 대한 컨트롤러는 존재하지 않기 때문에 에러가 발생할 것입니다.
4. hello-spring/src/main/resources/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>5. MemberController에 다음과 같은 코드를 추가합니다.
@GetMapping("/members/new") public String createForm() { return "members/createMemberForm"; }이제 회원 가입을 누르면 /members/new로 이동하게 되고 members/createMemberForm.html 이 화면에 보입니다.
6. hello.hellospring.controller 패키지에 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; } }7. MemberController에 다음과 같은 코드를 추가합니다.
@PostMapping("/members/new") public String create(MemberForm form) { Member member = new Member(); member.setName(form.getName()); memberService.join(member); return "redirect:/"; }createMemberForm.html에서 form 태그를 통해 post 요청을 보내면 create 메서드가 실행됩니다.
create 메서드는 member의 이름을 form의 이름으로 지정하고 memberService를 통해 회원가입을 진행합니다.
이후에 return "redirect:/"를 통해 홈 화면으로 이동합니다.
이제 회원가입을 진행할 수 있게 되었습니다.
하지만 아직 회원 목록을 구현되어 있지 않습니다.
8. MemberController에 다음과 같은 코드를 추가합니다.
@GetMapping("/members") public String list(Model model) { List<Member> members = memberService.findMembers(); model.addAttribute("members", members); return "members/memberList"; }회원 목록을 누르면 /members로 이동하고 컨트롤러가 memberService로 부터 모든 회원목록을 받아 model에 담아줍니다.
이후에 memberList.html을 return하여 화면으로 보여줍니다.
9. hello-spring/src/main/resources/templates/members 경로에 templates화면을 보여줄 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>위의 코드는 실제 구동시 다음과 같이 표시됩니다.
실제 페이지 소스 thymeleaf의 문법을 사용한것인데 model에 담긴 데이터를 반복적으로 꺼내 화면에 보여줍니다.
현재는 메모리에 저장되기 때문에 서버를 내렸다가 다시 켜지면 데이터는 모두 지워지게 됩니다.
다음시간에는 여기에 DB를 연동해보겠습니다.
출처
[무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 강의
스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., - 강의 소개 | 인프런...
www.inflearn.com
'Spring Framework' 카테고리의 다른 글
스프링 부트 - 회원 관리 예제 실습 (순수 JDBC로 H2 데이터베이스 연동) (0) 2022.04.24 스프링 부트 - 회원 관리 예제 실습 (H2 데이터베이스 설치) (0) 2022.04.16 스프링 부트 - 회원 관리 예제 실습 (자바 코드로 직접 스프링 빈 등록하기) (0) 2022.04.08 인텔리제이로 스프링부트 시작하는 법 (0) 2022.03.24 스프링 부트 - 회원 관리 예제 실습 (컴포넌트 스캔과 자동 의존관계 설정) (0) 2022.03.23