[nodejs MVC 로그인기능] 10. Dom으로 Html 객체 제어

오늘은 로그인을 했을때 입력한 아이디등을 DOM을통해 서버에 전달하는 방법을 배울것이다.

 

DOM은 Document Object Model로 일종의 인터페이스인데, 이를 이용해 js에서 html의 데이터를 가져올수 있게된다.

 

login.js를 다음과같이 작성한다.

querySelector를 이용하면 id = "이름" 에 입력된 이름 으로 html의 데이터를 가져오고,

#이 없으면 해당 객체의 데이터를 가져온다

 

또한 loginbtn에 login함수를 연결해주어 로그인 버튼을 클릭시

아이디에 입력한 값을 console에 출력하도록 수정했다.

 

 

따라서 login.ejs파일 또한 수정해줘야 한다.

다음과 같이 입력하여  아이디에입력한 값은 id, 비밀번호에 입력한 값은 psword으로 가져올수 있도록 한다

 

이제 서버를 띄워 로그에 입력한 아이디가 출력되는지 확인해보자

서버를 종료하고 다시 실행해보면 다음과 같이 아이디에 입력한 값이 콘솔로 출력된다.

login이 잘 실행되고, id값이 닮기는것을 확인했기 때문에, console출력은 넘기고 다음과 같이 수정해준다.

 

req변수에 id,psword를 저장하도록 코드를 수정해주자