[Spring 입문] 05. 회원 관리 예제 - 웹 MVC 개발

PADO·2021년 1월 21일

Spring

Spring 입문

목록 보기

6/8

🌱 회원 관리 예제 - 웹 MVC 개발

회원 웹 기능 - 홈 화면 추가

HomeController.java

@Controller
public class HomeController {

    @GetMapping("/")
    public String home() {
        return "home";
    }
}

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>

스프링부트는 static content location에서 index.html을 찾고 웰컴 페이지를 렌더링하지만,
컨트롤러가 정적 파일보다 우선순위가 높으므로, 요청이 오면 관련 컨트롤러부터 찾고, 없다면 static 폴더를 찾는다. 따라서 index.html은 무시되고, homeController가 존재하므로 home.html이 렌더링 된다.

회원 웹 기능 - 등록

회원 등록 폼 컨트롤러

@Controller
    public class MemberController {
        private final MemberService memberService;
        @Autowired
        public MemberController(MemberService memberService) {
            this.memberService = memberService;
        }
        @GetMapping(value = "/members/new")
        public String createForm() {
            return "members/createMemberForm";
        }
}

resources/templates/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>

회원 등록 화면에서 데이터를 전달 받을 폼 객체

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

회원 등록 컨트롤러

@GetMapping("members/new")
    public String createForm() {
        return "members/createMemberForm";
    }

@PostMapping("members/new")
    public String create(MemberForm memberForm) {
        Member member = new Member();
        member.setName(memberForm.getName());

        memberService.join(member);

        return "redirect:/";
    }

원리

[회원 가입] 클릭 → members/new → (url로 데이터를 조회하는 http GET 방식) MemberController
GetMapping된 createForm() 호출 → members/createMemberForm으로 이동
viewResolver가 templates에서 members/createMemberForm을 찾아 렌더링 (html이 뿌려짐)
뿌려진 html(회원 등록 폼)에는 action="members/new" method="post"인 <form/> 태그가 존재
이름 입력창에 값을 입력하고 등록 버튼을 누르면 action url로 http post 요청
PostMapping된 create() 호출 → (data를 등록하는 http POST 방식)
MemberForm의 name필드에 setter를 통해 화면에서 입력한 name값이 들어옴
MemberFrom에서 getter로 값을 꺼내 Member 생성후 저장 → home화면 ("/")으로 리다이렉트

회원 웹 기능 - 조회

회원 조회 컨트롤러

@GetMapping("members")
    public String list(Model model) {
        List<Member> members = memberService.findMembers();
        model.addAttribute("members", members);
        return "members/memberList";
    }

resources/templates/members/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>