[Spring Intro] Section 05. 회원관리 예제 - 웹 MVC 개발(회원 웹 기능, 홈 화면 추가, 등록, 조회)

🖋️ study/spring

[Spring Intro] Section 05. 회원관리 예제 - 웹 MVC 개발(회원 웹 기능, 홈 화면 추가, 등록, 조회)

기뮨지 2023. 1. 25. 02:44

회원 웹 기능 - 홈 화면 추가

# HomeController

java/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";
    }
}

> @GetMapping("/")에서 "/"는 가장 처음의 도메인(localhost:8080)을 의미한다.

> home() 메서드를 통해 home.html이 호출된다.

# 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의 index.html 화면이 뜨지 않나요?

지난 포스팅 참고
> Section 02. 스프링 웹 개발 기초 - 정적 컨텐츠, MVC와 템플릿 엔진, API

내장 톰캣 서버에서는 스프링 컨테이너에서 관련 컨트롤러가 있는지 먼저 찾고, 없다면 static 파일을 찾도록 했다.

현재 HomeController에서 매핑된 home 화면이 있기 때문에 해당 화면을 호출하고 끝나는 것이다.

즉, 컨트롤러가 정적 파일보다 우선 순위가 높기 때문에 home.html 화면이 나타나는 것

회원 웹 기능 - 등록

회원 등록 폼 개발

# 회원 등록 폼 컨트롤러

java/hello/hellospring/controller/MemberController.java

@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";
        }
}

# 회원 등록 폼 HTML

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>

회원 등록 컨트롤러

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

java/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;
    }
}

# 회원 컨트롤러에서 회원을 실제 등록하는 기능

java/hello/hellospring/controller/MemberController.java에 아래 코드 추가

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

    memberService.join(member);

    return "redirect:/";
}

# 실행

이전 화면에서 회원가입을 누르면 위 화면(/members/new)으로 이동한다.

이름에 spring 입력 후 등록을 눌렀을 때 다시 이전 화면으로 돌아오면 성공이다.

회원 등록 원리

위 화면(http://localhost:8080/members/new) 접속, GET 방식

GET 방식을 사용했기 때문에 memberController - createForm 메서드 호출

return에 의해 templates > members > createMemberForm으로 이동

viewResolver에 의해 createMemberForm이 선택되어 thymeleaf 템플릿 엔진이 렌더링하며 html이 화면에 뿌려짐

이때 값을 입력할 수 있는 form 태그 내의 input 태그를 확인해보면, name="name" 부분을 확인할 수 있다.

저 name에 내가 입력한 이름인 "spring"이 저장되며,

등록 버튼을 누르면 <form action="/members/new" method="post">에 의해

action에 적힌 url(/members/new)에 Post 방식으로 입력한 name이 넘어가게 된다.

Post 방식으로 넘겼기 때문에, memberController - create 메서드 호출

create의 매개변수 MemberForm으로 이동

MemberForm에는 private String으로 name이 선언되어 있다.

여기에 setName을 통해 아까 넘겨준 name인 "spring"이 저장된다.

이후 getName을 통해 내가 설정한 이름에 접근하면 된다.

다시 create 메서드로 돌아와보면 member 객체를 생성하고,

form.getName()을 통해 이름을 불러와서 member 이름을 설정한다.

이후 memberService.join의 매개변수에 방금 생성한 member 객체를 넣어주면 가입이 완료된다.

주로 아래 방식으로 GET/POST를 사용한다.

데이터를 조회할 때 : GET
데이터를 전달(등록)할 때 : POST

회원 웹 기능 - 조회

# 회원 컨트롤러에서 조회 기능

java/hello/hellospring/controller/MemberController.java에 아래 코드 추가

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

# 회원 리스트 HTML

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>

# 실행