회원 웹 기능 구현

Posted Apr 1, 2024

By sunjong0214 2 min read

Controller에 회원 기능을 추가하고 그에 맞는 View를 추가해 화면을 구현하자

Controller

  
package hello.hellospring.controller;

import hello.hellospring.domain.Member;
import hello.hellospring.domain.MemberForm;
import hello.hellospring.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import java.util.List;

@Controller
public class MemberController {
    private final MemberService memberService;

    @Autowired
    public MemberController(MemberService memberService) {
        this.memberService = memberService;
    }

    @GetMapping("/members/new")
    public String creatForm() {
        return "members/creatMemberForm";
    }

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

    @PostMapping("/members/new")
    public String create(MemberForm form) {
        Member member = new Member();
        member.setName(form.getName());
        memberService.join(member);
        return "redirect:/";
    }
}

MemberController에 join과 list 기능을 Mapping 해줬다.

여기서 특이한 점은 create 메소드에서 기존에 존재하는 Member 객체가 아닌 MemberForm이라는 새로운 Domain 객체를 만들었다는 점이다.

그 이유는 Member 객체를 사용해도 위 코드에서는 문제가 없지만 실무에서는 Controller에 넘어오는 정보가 Member에 필요한 데이터 뿐만 아니라 다양한 데이터가 들어온다. 또 DB 에서 Member에 필요한 정보가 추가로 더 필요한 경우도 있으므로 Form에서 들어오는 데이터를 저장할 MemberForm과 실제 DB에 저장할 Member 객체를 분리하는 것이 좋다.

View

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

MemberForm을 받는 view 파일이다.

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

list를 출력해주는 view 파일이다.

여기서 살펴볼 점은 thymeleaf의 문법 중 하나인데 java의 foreach문과 비슷하게 작동한다.

하지만 최근에는 th:each 보다 data-th-each와 같이 앞에 data를 붙인다.

Spring

This post is licensed under CC BY 4.0 by the author.

Controller

View

Trending Tags