Jehyun Jung

Slowly Developing Myself

Java Spring Framework

Web MVC를 바탕으로 회원관리 기능을 구현하자

Homepage

HomeController

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

hello.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>
</body>
</html>

”/” 경로 대한 라우팅을 제공하는 Controller와 이에 대한 View이다. 기존에는 index.html을 보이도록 하였지만, Java Spring에서는 controller가 우선순위를 가지기 때문에, GetMapping(“/”)를 담당하는 HomeController가 먼저 실행된다. Homepage에는 회원 가입과 회원 목록 버튼이 존재하는데, 이를 클릭했을 때에 대한 Controller를 구현해야한다.

Member Management

Member Join

MemberController

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

@PostMapping("/members/new")
//Java Spring에서 자동적으로 MemberForm 객체를 인자로 전달한다.
public String create(MemberForm form){
    Member member=new Member();
    member.setName(form.getName());
    //회원관리 기능 수행을 위해 Member Service를 호출한다.
    memberService.join(member);

    return "redirect:/"
}

MemberForm

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

members/createMemberForm.html

<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 -->

회원 가입을 눌렀을 때, createForm 함수가 실행되며 이에 따라 createMemberForm.html이 랜더링 된다. 해당 html에서는 사용자로부터 이름을 입력받고, 이를 /members/new 로 POST 방식으로 HTTP request을 한다. 그러면 MemberController에 있는 @PostMapping(/members/new)가 설정된 함수가 실행된다.

Member List

회원 조회 기능 또한, Member Controller, Member Service를 활용해서 구현하면 된다.

Controller

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

    return "members/memberList"
}

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>
            <!-- thymeleaf 문법에 의해 자동적으로 Model로 전달한 memberList를 이용해서 있는 각각의  member에 대한 랜더링을 자동으로 진행한다. -->
            <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>

References

link: inflearn

댓글남기기

참고