Spring boot기반 Web Application 개발[16] - 회원 목록 조회

1 minute read

이전 포스팅에서 간단한 회원 등록 기능을 구현했다. 이어서 등록된 회원을 조회할 수 있는 페이지를 만들어보자.

회원 웹 기능 - 조회

회원 조회 메서드

controller 폴더에 MemberController.java 파일에 아래 코드를 추가하자.

@GetMapping("/members")
public String list(Model model){
	List<Member> members = memberService.findMembers();
	model.addAttribute("members",members);
	return "members/memberList";
}
  • addAttribute로 렌더링할 객체를 담아준다.
  • memeberList.html에서 회원 목록을 렌더링 할 수 있도록 url을 지정해 return 해준다.

image

파일명 : MemberController.java
위치 : \main\hello.hellospring\controller\MemberController.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
public class MemberController {

    private final MemberService memberService;

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

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

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

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

회원 목록 조회 HTML

memberList.html 파일을 생성하고 아래 코드를 작성하자.

image

파일명 : memberList.html
위치 : \main\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>

  • 넘어온 members 객체의 id, name 값을 순차적으로 렌더링한다.


동작 과정

이제 실제로 회원을 등록해보고, 회원 목록을 조회해보자.

1) 회원 등록

spring1, spring2를 이름으로 회원등록

image

image

2) 회원 목록 조회

회원 목록 버튼을 클릭하면, 회원 목록이 렌더링된다.

image

3) 페이지 소스보기

membersList.html 에서 each 문으로 members 객체를 iteration 하면서 member.idmember.name이 테이블의 요소로 생성된 후 렌더링되는 것이다.

image

지금까지 MVC를 활용해 홈 화면, 회원 등록, 회원 목록 조회 기능을 구현했다. HashMap 자료구조를 적용해 저장소를 구현했는데, 다음 포스팅에서는 이제 진짜 데이터베이스를 적용해 저장소를 구현해볼 것이다.


이 포스팅은 인프런 김영한님의 스프링 입문 - 코드로 배우는 스프링 부트 강의를 토대로 작성되었습니다.

Reference

Leave a comment