[로그인 기능 만들기] 7. website login-form 만들기(3)

저번에 했던 빈 object를 만들어 thymeleaf의 form을 이용해 서버로 값을 넘겨주는 방식은,

검증에 도움이 된다고 한다.

또한, 많은 값을 지정해야할 때에도 이렇게 간단하게 표기할 수 있다는 장점이 있다.

 

저번에 로그인 페이지에서 아이디와 비밀번호를 입력할 수 있는 form을 만들었고,

이번에는 서버로 제출해 서버에 입력되는걸 확인하는 과정까지 해보려한다.

 

이전에, POST 방식으로 submit하는 부분까지 html로 만들었다.

그럼, 이 post 방식으로 서버에서 객체 정보를 받아올 수 있도록 해야한다.

이번에는 다시 controller 패키지에 새로운 controller 코드를 작성해야 한다. 여기서는 @ModelAttribute를 사용한다.

@ModelAttribute는 Model 객체를 생성해 전달받은 데이터를 담은 객체를 넣어주는 과정까지 모두 자동으로 연결해준다. 따라서 Model 객체 없이 view 단에 데이터를 넘겨줄 수 있는 것이다!

 

controller는 다음과 같이 작성하였다.

// submit login information
    @PostMapping("/login")
    public String loginForm(@ModelAttribute("loginForm") LoginFormDto loginFormDto){
        log.info("loginFormDto : id={}, pw={}", loginFormDto.getId(), loginFormDto.getPw());
        return "testThymeleaf";
    }

여기서 주의할 점은, 기존에 사용한 get mapping과 똑같은 url path로 되어야한다는 것. 안그럼 제출이 제대로 안됨.

그리고, 이 폼에 제출할 경우, testThymeleaf 웹페이지가 켜지도록 했다.

server의 log로 loginFormDto의 데이터를 출력해 실제 데이터가 제대로 입력되었는지도 테스트하였다.

(그러기위해 Slf4j도 추가함! - log용)

 

우선, login 페이지에 접속한다.

 

ID와 PW를 각각 입력하고,

 

로그인하기를 누르면

이렇게 설정해둔 testPage가 뜨게되고,

 

server의 log를 확인하면 

이렇게 id와 pw를 제대로 받아온 것을 알 수 있다.