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

atdawn·2024년 5월 10일

SPRING BOOT+JPA

목록 보기

8/49

📹 참고 : 인프런 [ 스프링 입문 - 김영한 ]

회원 등록, 조회 버튼이 있는 화면 추가

HomeController 생성

java/hello/hellospring/controller/HomeController.java

@Controller
public class HomeController {

    @GetMapping("/") //기본 도메인
    public String home(){
        return "home";
    }
}

회원 관리용 홈

resources/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> <!-- /container -->
</body>
</html>

index.html이 연결되지 않는 이유는 스프링 컨트롤러 안을 우선으로 찾기 때문이다. "/" 연결 경로가 없다면 그 다음으로 static 파일을 찾아 웰컴페이지를 띄우게 된다.

회원 등록 폼 개발

회원 등록 폼 컨트롤러

java/hello/hellospring/controller/MemberController.java

@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";
    }
}

회원 등록 폼 HTML

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

회원 등록 컨트롤러

웹 등록 화면에서 데이터를 전달 받을 폼 객체
java/hello/hellospring/controller/MemberForm.java

public class MemberForm {

    private String name;

    public String getName() {
        return name;
    }

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

회원 컨트롤러에서 회원을 실제 등록하는 기능
java/hello/hellospring/controller/MemberController.java

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

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

에서 입력받은 "spirng" 이라는 이름을 MemberForm 의 name 변수에 저장된다. 이후 MemberController 의 create 메소드에서 getName() 을 통해 전달받아 join 시킨다.

GET/POST 이해하기

👉 GET 방식 : 어떠한 정보를 가져와서 조회하기 위해 사용되는 방식
▪ URL에 변수를 포함시켜 요청한다.
▪ 데이터를 header를 포함하여 전송한다.
▪ URL에 데이터가 노출되어 보안에 취약하다.
▪ 캐싱이 가능하다. (캐싱: 한번 접근후, 똑같은 요청을 할 시 빠르게 접근하기 위해 레지스터에 데이터를 저장시키는것)

👉 POST 방식: 데이터를 서버로 제출하여 추가 또는 수정하기 위해서 데이터를 전송하는 방식
▪ URL에 변수에 변수를 노출하지 않고 요청을 한다.
▪ 데이터를 Body에 포함시킨다.
▪ URL에 데이터가 노출되지 않아서 기본 보안이 설정되어 있다.
▪ 전송하는데 길이 제한이 없고 캐싱이 불가능하다.
(출처 : https://lsh2016.tistory.com/95)

회원 웹 기능 - 조회

회원 컨트롤러에서 조회 기능

java/hello/hellospring/controller/MemberController.java

@GetMapping("members")
    public String list(Model model){
        List<Member> members=memberService.findMembers(); //회원 전체 조회
        model.addAttribute("members",members); //모델로 뷰에 넘김
        return "members/memberList";
    }

회원 리스트 HTML
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>

 <tr th:each="member : ${members}">  * 자바의 for-each 구분과 비슷한 thymeleaf 구문
                <td th:text="${member.id}"></td> * Getter을 통해 값을 가져옴.
                <td th:text="${member.name}"></td>
            </tr>