5. 회원 관리 예제 - 웹 MVC 개발

spring

5. 회원 관리 예제 - 웹 MVC 개발

희구 2021. 7. 24. 16:18

회원 웹 기능 - 홈 화면 추가
회원 웹 기능 - 등록
회원 웹 기능 - 조회

1) 회원 웹 기능 - 홈화면 추가

홈 컨트롤러 추가

package hello.hellospring.controller;


import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping("/") /* / : localhost:8080으로 들어오면 아래 메소드가 호출된다. */
    public String home(){
        return "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>

주소창에 localhost:8080 검색

* 우리가 앞서 기본 화면으로 index.html이라는 정적파일을 만들어 놓았다.

주소를 쳤을 때 기본 화면으로 index.html이 아닌 home.html이 나오는 이유는

컨트롤러가 정적파일보다 우선순위가 높기 때문이다.

2) 회원 웹 기능 - 등록

회원등록 폼 개발

회원등록 폼 컨트롤러

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.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class MemberController  {
    private  final MemberService memberService;
    /*new로 생성하지 않고 스프링 컨테이너에 등록을 한 후 사용한다*/

    @Autowired
    public MemberController(MemberService memberService) {

        this.memberService = memberService;
    }

    @GetMapping("/members/new")
    public String createForm(){
        return "members/createMemberForm"; /*여기로 이동.. 리턴하면 템플릿에서 찾는다.*/
    }


}

회원등록폼인 createMemberForm을 만들어줌.

createForm()메서드에서 return할때 "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>

템플릿에 createMemberForm.html을 만들어줌.

뷰리졸버를 통해 얘가 선택되고 타임리프템플릿을 통해 화면에 뿌려진다.

회원등록 컨트롤러

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

package hello.hellospring.controller;

public class MemberForm {

    private String name;

    public String getName() {
        return name;
    }

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

웹 등록화면에 우리가 입력받을 값은 name.

name값을 전달 받을 객체를 생성해준다.

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

    @PostMapping("/members/new") /* createMemberForm을 통해 멤버스 뉴의 포스트 방식으로 연결됨. 여기로 왔음*/
    public String create(MemberForm form){ /*create 메서드 호출됨*/
        Member member = new Member(); /*멤버폼으로 가서 셋 네임으로 아까 크레이트 폼에서 넣었던 네임값을 넣어준다.*/
        member.setName(form.getName()); /*폼에서 겟 네임으로 꺼내줌*/

        memberService.join(member);

        return "redirect:/";

    }

회원컨트롤러에 추가해줌.

createMemberForm에서 등록을 하면 action을 타고 members/new의 포스트방식인 여기로 create메서드로 연결이 된다.

(보통 데이터를 등록할 땐 post방식을 사용함)

멤버폼의 setName을 통해 아까 createMemberForm에서 넣었던 name값이 들어가게된다.

form에서 getName으로 값을 꺼내준다.

memberService의 join을 통해 member 가입 완료.

3) 회원 웹 기능 - 조회 (회원 목록 동작)

회원목록을 누르면 members로 가게 해놓았기 때문에 "@GetMapping(value = "/members")"라고 써줌

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

회원조회를 해준다.

findMembers()를 하면 모든 멤버를 조회할 수 있다.

조회한 데이터를 members라는 list에 담고 model에 통째로 담아줌.

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