[백엔드 첫 걸음] 웹 MVC 개발 - (회원 관리 예제)

khyojun·2022년 7월 27일
0

Spring 시작

목록 보기
12/15
post-thumbnail

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

📂 java/controller/HomeController.java

   @Controller
public class HomeController {

    @GetMapping("/")
    public String home(){
        return "home";
    }
}

📂 resource/template/home.html

 <!DOCTYPE html>
<html xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
  <div>
    <h1>Hello Review Spirng</h1>
    <p>회원 기능</p>
    <p>
      <a href="/members/new">회원가입</a>
      <a href="/members">회원 목록 </a>
    </p>
  </div>
</div>
</body>
</html>

기본적인 홈 화면에대한 구현이다. getmapping을 통하여서 홈화면은 기본 화면이므로 기본 url에 바로 화면을 띄우도록 설정하였다.

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

📂 java/controller/HomeController.java

    @GetMapping("/members/new")
    public String createForm(){
        return "members/createForm";
    }
    @PostMapping("/members/new")
    public String create(MemberForm form){

        Member member = new Member();
        member.setName(form.getName());
        System.out.println("member 가입은?" + member.getName());
        memberService.join(member);

        return "redirect:/";

    }

이곳에서 보게되면은 create, createForm이 있다. create부분에서는 실질적으로 회원등록을 하게 되었을때 데이터를 받아오게 되는 부분, createForm은 회원 등록 화면에 대한 부분이다.

📂 java/controller/MemberForm.java

public class MemberForm {

    private String name;
    public String getName() {
        return name;
    }

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

📂 resource/template/members/createForm.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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>
</body>
</html>

회원 등록이 되는 과정에 있어서 createForm.html부터 시작이 된다. form 태그에서 method로 post방식으로 받아오기 때문에 input 태그에 있는 name속성에 value로 name이라고 기록이 되어있는 부분을 받아와 Spring에서는 자동적으로 MemberForm에 있는 name으로 넘겨주게 되어진다. 그렇게 진행이 되어지고 redirect:/를 반환하게 되는데 다시 처음 기본 화면으로 돌아가는 것을 의미하게 되어진다.

여기서 가장 신기한 점이 Spring에서 자동적으로 컨트롤러에 있는 create메소드를 통하여서 받아오는 파라미터인 MemberForm의 name이 input태그에서 기록되어진 name으로 자동적으로 지정이 되는것이 가장 신기한 부분이었다.

알게 된 점

  1. 회원등록, 홈 화면 구현.

참고

김영한 - 스프링 입문 강의

profile
코드를 씹고 뜯고 맛보고 즐기는 것을 지향하는 개발자가 되고 싶습니다

0개의 댓글