[Spring Boot] 등록, 목록 보기 구현하기

[Spring Boot] 등록, 목록 보기 구현하기

2021. 8. 14. 08:00ㆍBack-End 작업실/Spring Framework

728x90

안녕하세요? 주니하랑 입니다.

오늘은 회원이라는 Key word로 등록과 목록 보기를하는 방법에 대해 공부 해 보도록 할 것이에요.

바로 시작 해 보겠습니다!

코드에 관련한 내용은 주니하랑의 Github에서 확인 하실 수 있습니다!

📋 목차

01.[Spring Boot] thymeleaf와 Spring Boot
02.[Spring Boot] Spring Web 개발 기초
03.[Spring Boot] 회원 관리 예제 - Backend
04.[Spring Boot] Service 개발 및 Test Case 작성
05.[Spring Boot] Spring Bean과 의존관계
06.[Spring Boot] Java Code로 직접 Spring Bean 등록
07.[Spring Boot] 등록, 목록 보기 구현하기
08.[Spring Boot] 기존 코드 손 안대고, 설정으로 구현 Class 변경
09.[Spring Boot] 통합 Test
10.[Spring Boot] JPA
11.[Spring Boot] Spring Data JPA
12.[Spring Boot] AOP

📌 회원 등록

📍 회원 등록 Form Controller

MemberCopntroller.java

package hello.hellospring.controller;

import hello.hellospring.domain.Member;
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
@Controller     // 이 어노테이션을 스프링이 보고, 해당 Controller Class를 객체로 만든 뒤 스프링이 가지고 있는다.
// 그것을 스프링 컨테이너에서 빈으로 관리 된다고 표현한다.
public class MemberController {
        // 아래와 같이 MemberService를 new를 통해 생성하게 되면 다른 Controller에서도 접근이 가능한 문제
//    private final MemberService memberService = new MemberService();

    private final MemberService memberService;

    // Dependency Injection (DI)
    // @controller가 있는 Controller 객체가 생성될 때, @Autowired가 붙은 생성자는 스프링이 컨테이너에서 빈으로 관리할 때, 생성자를 호출하는데, 이 때 MemberService를 넣어준다.
    @Autowired
    public MemberController(MemberService memberService) {
        this.memberService = memberService;
    } // 생성자 () 끝

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

@GetMapping은 Client가 '/members/new'라는 URI를 통해 접근을 하면 Mapping을 시켜주는 것이고,
그 하위에 Method를 호출해 주는 것이에요.

createForm Method는 반환으로 members 밑에 createMemberForm.html로 보내주게 됩니다.

📍 회원 등록 Form View

createMemberForm.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>주니하랑의 Spring Boot Study</title>
</head>

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

이 곳에서는 thymeleaf라는 것을 사용하고 있고, xmlns를 통해 thymeleaf를 th로 Mapping 및 등록을 하여 준 것이에요.

input Tag에서 name을 입력하게 되면 form의 Action에 의해 해당 입력값이 /member/new로 전달되게 되고, http Method 중 Post로 전달 되는 것이에요.

📍 회원 등록 Controller

👉 웹 등록 화면에서 Data를 전달 받을 Form 객체

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;
    }
} // Class 끝

위의 createMemberForm.html에서 input Tag로 전달된 Name값은 해당 Class에 필드 변수 name에 setter를 통해 주입 되게 된답니다!

👉 회원 Controller에서 회원을 실제 등록하는 기능

MemberCopntroller.java

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

        memberService.join(member);

        // 회원 가입이 끝나면 home화면으로 보내기
        return "redirect:/";
    } // create() 끝

위에서 주니하랑은 createMemberForm.html에서 input Tag를 통해 전달 된 name이라는 값이 /members/new로 post 방식으로 전달 된다고 한 것이에요.

그 값은 @PostMapping을 보고 그 URI와 매칭이 되는지 확인을 한답니다.

그런 뒤 해당 Method가 호출되게 되는 것이에요.

먼저 이 Methodsms Member 객체를 하나 생성해서 setter를 통해 이름을 주입하는데, MemberForm이라고 만든 Class에 getter에 입력된 Name을 가져와서 주입을 하는 것이에요.

그런 다음 MemberService에 Join Method를 호출하는데, 인자값으로 Member 객체 (setter를 통해 전달된 name값)을 전달하여 작업을 수행한 뒤 redirect를 통해 main Page로 가라고 알려주고 있는 것이에요.

즉, 작업이 다 끝나고 보면 Main Page로 자동으로 이동되게 한 것이랍니다.

📌 회원 조회

📍 회원 Controller에서 조회 기능

MemberCopntroller.java

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

위의 Method를 보면 Get 방식으로 /members라는 URI를 갖고 오면 해당 Method list로 오게 되며, 최초 List 형이며, 자료형이 Member인 members에 memberService의 findMembers Method에서 찾은 값을 넣어 주는 것이에요.

그럼 모든 가입된 회원 목록이 들어오게 되겠지요?

그런 다음 model.addAttribute를 통해 View에 전달할 값을 지정하게 되는데, "members"는 Key가 되고, members는 값이 되는 것이에요.

💡 참고: Model이란?
Model은 model attributes를 저장하는 Interface. Model에 Attributes를 추가하기 위해 고안되었으며, Java.util.Map으로 모든 Model에 접근을 허용. 주로 addAttribute Method를 통해 데이터를 Model에 저장.

Business Logic 결과를 Client View에게 전송할 때 사용하는것이 바로 Model

📍 회원 List HTML

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>

model.addAttribute를 통해 전달된 값은 ${members}를 통해 받은 것이에요.

Java의 For Each문과 같이 ${members}에 담긴 회원 목록 정보를 하나씩 member에 전달해 주면서 반복이 돌게 되고,

table에 member에 담긴 id와 name이 text 형식으로 보일 수 있도록 해 준 것이에요.

주니하랑의 글이 마음에 드셨나요? 구독과 공감! 그리고, 댓글은 주니하랑에게 많은 힘이 됩니다

728x90

저작자표시 비영리 변경금지

'Back-End 작업실 > Spring Framework' 카테고리의 다른 글

[Spring Boot] 통합 Test (0)	2021.08.17
[Spring Boot] 기존 코드 손 안대고, 설정으로 구현 Class 변경 (0)	2021.08.15
[Spring Boot] Java Code로 직접 Spring Bean 등록 (0)	2021.08.13
[Spring Boot] Spring Bean과 의존관계 (0)	2021.08.12
[Spring Boot] Service 개발 및 Test Case 작성 (0)	2021.08.11

Juny's ITLog

Juny's ITLog

태그

최근글

댓글

공지사항

아카이브

📋 목차

📌 회원 등록

📍 회원 등록 Form Controller

📍 회원 등록 Form View

📍 회원 등록 Controller

📌 회원 조회

📍 회원 Controller에서 조회 기능

📍 회원 List HTML

'Back-End 작업실 > Spring Framework' 카테고리의 다른 글

관련글

티스토리툴바