인프런/스프링 입문

7)회원 관리 예제 - 웹 MVC 개발 , 회원 웹기능 - 조회

backend dev 2022. 11. 27.

GetMapping을 통해 도메인을 통해 들어왔을시

리소스-> 템플릿-> home.html 이라는 html 모습을 볼 수 있게끔 설정

위와 같은 원리로!

리소스-> 템플릿에

home.html 추가

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>

코드를 보면 회원가입을 누를시 /members/new로 이동시키고

회원목록을 누를시 /members로 이동시키게끔 해두었다.

스프링을 실행시키고 들어가봤을때 모습

현재는 회원가입,회원목록을 눌러도 화이트라벨 에러페이지만 보여준다.

-> 컨트롤러에 매핑해놓지않았으니까.

멤버컨트롤러에 다음과 같은 매핑을 설정해준다.

리턴으로 members/createMemberForm으로 해두었으니

templates 폴더 하위폴더로 members를 생성해준다.

createMemberForm 내용

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

인풋으로 이름만 받는다.

이름을 넣게되면 name이라는 키값에 넣은 이름이 value값으로 들어오게 될것이다.

입력을 받아 사용하기 위해 MemberForm이라는 자바파일을 생성해준다.

package hello.hellospring.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

다음과 같이 name을 받을 수 있게 코드를 구성해준다(게터 세터 필수)

MemberController에 추가한 코드

@PostMapping("/members/new") //http://127.0.0.1:8080/members/new에서 무언가 값을 보낼때 MemberForm으로 그 값을 받고
public String create(MemberForm form) {
    Member member = new Member();
    member.setName(form.getName()); // form에 받은값을 멤버에 저장해서

    memberService.join(member); //가입시켜주는 로직

    return "redirect:/";// 가입이 끝났으니 redirect를 이용하여 home화면으로 보내준다.
}

http에 도메인을 입력하여 들어오는것을 get방식이라고 한다.

@GetMapping("/members/new") //GetMapping을 이용해서 해당 도메인(http://127.0.0.1:8080/members/new)에 접근하면 템플릿에 존재하는 html파일로 이동,내용을 보여주고
public String createForm() {
    return "members/createMemberForm";
}

get방식을 이용해서 http://127.0.0.1:8080/members/new에 들어오면

return 때문에 template-> members-> createMemberForm.html을 보여주게 되는것이다.(타임리프가 보여주는거)

여기다가 이름을 적고 등록을 누르게되면

createMemberForm.html의 내용을 봤을때

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

<form action="/members/new" method="post">

이 부분때문에 /members/new에 post 방식으로

 <input type="text" id="name" name="name" placeholder="이름을
입력하세요">

input인 작성된 이름값이 value로 들어오고 , name이 키값으로 들어오게 된다.

그렇게되면 MemberController에 PostMapping으로 적어둔곳이 실행될것이다.

@PostMapping("/members/new") //http://127.0.0.1:8080/members/new에서 무언가 값을 보낼때 MemberForm으로 그 값을 받고
public String create(MemberForm form) {
    Member member = new Member();
    member.setName(form.getName()); // form에 받은값을 멤버에 저장해서

    memberService.join(member); //가입시켜주는 로직

    return "redirect:/";// 가입이 끝났으니 redirect를 이용하여 home화면으로 보내준다.
}

PostMapping은 데이터를 전달할때 주로쓰고

GetMapping은 url 접속또는 데이터 조회할때 주로쓴다.

PostMapping의 create가 실행되면서

MemberForm 안에 name변수속에는 form으로 입력해준 name의 값이 들어가게 된다. (MemberForm안에 setName을 통해서)

MemberController.java 전체코드

@Controller //이렇게 컨트롤러 어노테이션을 적어놓으면 스프링컨테이너가 생성되면서 멤버컨트롤러로서 해당 어노테이션을 가진 컨트롤러를 넣어놓는다.
//그리고 스프링이 관리를 한다.
public class MemberController {

    private final MemberService memberService;

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


    @GetMapping("/members/new") //GetMapping을 이용해서 해당 도메인(http://127.0.0.1:8080/members/new)에 접근하면 템플릿에 존재하는 html파일로 이동,내용을 보여주고
    public String createForm() {
        return "members/createMemberForm";
    }

    @PostMapping("/members/new") //http://127.0.0.1:8080/members/new에서 무언가 값을 보낼때 MemberForm으로 그 값을 받고
    public String create(MemberForm form) {
        Member member = new Member();
        member.setName(form.getName()); // form에 받은값을 멤버에 저장해서

//        System.out.println("member = " + member.getName());

        memberService.join(member); //가입시켜주는 로직

        return "redirect:/";// 가입이 끝났으니 redirect를 이용하여 home화면으로 보내준다.
    }
}

회원 웹 기능 - 조회

회원가입까지는 구현했고

이제는 회원목록을 구현해보자

MemberController에 다음과 같은 코드를 추가한다. (멤버 목록을 보기위함)

@GetMapping("/members")
public String list(Model model) {
    List<Member> members = memberService.findMembers();
    model.addAttribute("members", members); // model에다가 members를 담아서 화면(뷰템플릿)에 보내기 위함
    return "members/memberList";

}

여기서 Model은 MVC에서 model을 의미하고

모델안에 members라는 값을 담아서 뷰 템플릿엔진에 보내는 코드이다.

예전에 헬로컨트롤러할때도 이런식으로 모델에 값을 담아서 보내줬고 , html에서 그 값을 이용했었다.

모델안에 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>

<tr th:each="member : ${members}">
  <td th:text="${member.id}"></td>
  <td th:text="${member.name}"></td>
</tr>

코드를 보면 members의 값을 하나씩 가져와서 멤버아이디 멤버네임 구성으로 출력하는것을 확인 할 수 있다.

(자바의 foreach처럼)

오른쪽 마우스 눌러서 소스보기를 하면

멤버 아이디, 멤버 네임이 적혀있는것을 체크할 수 있음.

지금 리포지토리가 메모리안에 있기때문에 서버를 꺼버리면 안에 저장한 회원(데이터)는 지워지게된다.

그래서 그 데이터는 따로 저장하던지 , 데이터베이스에 저장해야한다.

그 부분부터는 다음 게시글에 작성한다.

'인프런 > 스프링 입문' 카테고리의 다른 글

9)순수 JDBC, DI(dependency injection)과 다형성의 장점 , 스프링통합테스트 (0)	2022.11.27
8)스프링 DB 접근기술(H2 데이터베이스 설치), 테이블생성,데이터생성,DDL SQL 관리 (0)	2022.11.27
6)스프링 빈과 의존관계, 스프링 빈 등록방법 1. 컴포넌트 스캔 2. 자바로 직접 등록 (0)	2022.11.11
5)회원 서비스 만들기(회원가입..등),테스트하기,static변수특징,생성자사용하기,인터페이스객체,의존성주입 (0)	2022.10.29
4)비즈니스 요구사항 정리,회원도메인,회원 리포지토리생성,테스트코드생성,테스트해보기 (0)	2022.10.12