카테고리 없음

회원 관리 예제 - 웹 MVC 개발

JWonK 2022. 1. 6. 15:49
728x90
반응형

홈 화면 추가

 

홈 화면을 html형태로 추가할건데 어떻게 추가하냐면 홈 컨트롤러를 가장 먼저 생성해준다.

package Hello.HelloBus.controller;

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

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

동작방식은 서버가 실행되고 Controller에서 GetMapping컨트롤러를 통해 home.html로 시작화면이 띄워진다. 

이유는 컨트롤러가 정적파일보다 우선순위가 높기 때문이다. 만약 컨트롤러가 존재하지 않는다면 정적 파일(html)이 띄워지겠지만 현재는 Controller를 통해 반환되는 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>

위 html이 home.html인데 회원가입은 members/new 로 넘어가고 회원 목록은 members로 넘어간다.

 

 

package Hello.HelloBus.controller;

import Hello.HelloBus.domain.Member;
import Hello.HelloBus.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("/members/new")
    public String createForm(){
        return "members/createMemberForm";
    }

    @PostMapping("/members/new")
    public String create(MemberForm form){
        Member member = new Member();
        member.setName(form.getName());

        memberService.join(member);

        return "redirect:/";
    }
}

members/new로 GetMapping한 것은 다시 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>

위 화면이 띄워지게 된다. 여기서 확인해야할 것이 

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

이 부분인데 form은 데이터를 입력받는 뜻이고 method가 post방식이다. 즉 post방식으로 데이터를 입력받는 건데 이것은 위 Controller 클래스의 @PostMapping 어노테이션으로 감싸져있는 메소드와 매핑이된다. 

 

데이터를 받는 형식을 method로 지정해주고 클래스 내에 method와 일치하는 어노테이션을 확인한 후 정보를 받는 것이다. @PostMapping 메소드의 매개변수는 Controller 내 또 다른 클래스의 get/set방식으로 만들어져있다. 이것 또한 html의 value와 일치하게 만들어준다. 아래 html의 value가 name이므로

<input type="text" id="name" name="name" placeholder="이름을
package Hello.HelloBus.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

필드 값을 일치하게 만들어주는 것이다.

 

728x90
반응형