[스프링입문]Section 5 - 회원 관리 예제_웹MVC개발

JiMin LEE·2022년 9월 29일

[Spring]입문

목록 보기
5/7
post-thumbnail

1. 회원 웹 기능 - 홈 화면

controller/HomeController

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"; // home.html로 연결
    }
}



resource/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>
    </body>
</html>



2. 회원 웹 기능 - 회원 등록

templates/member/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>



controller/memberController

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;

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

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

    @PostMapping(value = "/members/new") // httpmethod == post
    public String create(MemberForm Form){
        Member member = new Member(); // member 객체 생성
        member.setName(Form.getName()); // Form을 통해 입력 받은 이름은 객체의 name 속성에 넣어주기

        memberService.join(member); // 중복되는 회원인지 확인 후 아니면 hashmap에 저장

        return "redirect:/";
    }
}



controller/MemberForm

package hello.hellospring.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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



💡 회원 등록 과정
  1. localhost:8080/members/new/에 접속하면
  2. Get 방식으로 접속하게 되고
  3. method가 ‘Get’이면 MemberController의 ‘Getmapping(”members/new/”)’에 잡혀서
    createForm 함수로 들어간다.
  4. 이 함수는 members/createMemberForm(회원 등록을 시켜주는 페이지, html)를 랜더링한다.
  5. 이 html을 통해 <'form'>, <'input'> 태그를 통해 post 방식으로 이름을 입력하고 등록버튼을 누르면
  6. method가 ‘Post’여서 MemberController의 ‘Postmapping(”members/new/”)’에 잡혀서 create 함수가 호출된다.
  7. 이 함수는 member 모델 객체를 생성하고
  8. form을 통해 전달된 이름 정보를 MemberForm 객체의 getName()함수를 통해 불러와 member 객체의 setName()함수를 통해 member의 name에 넣는다.
  9. memberservice의 join함수를 통해 중복되는 회원이 있는지 확인 후
  10. 없다면 memberrepository 저장소의 hashmap에 저장한다.
  11. 위 명령들이 다 실행되었다면 home 페이지를 redirect한다.



3. 회원 웹 기능 - 회원 조회

controller/memberController

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;

    ...

    @GetMapping("/members")
    public String list(Model model) {
        List<Member> members = memberService.findMembers(); // hashmap에 저장된 모든 id, name를 불러와 list members에 저장
        model.addAttribute("members", members); // 조회할 리스트 파라미터 객체를 위에서 불러온 members로 설정하기
        return "members/memberList";
    }
}



templates/members/memberList

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <body>
        <div class="container">
            <div>
                <table>
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>이름</th>
                    </tr>
                    </thead>

                    <tbody>
										<!-- timeleaf 문법, for문 처럼 전달된 회원정보가 담긴 list를 조회함 -->
                    <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>

0개의 댓글