2. 회원등록 화면 및 기능 추가

1. Bootstraop의 Grid System을 이용하여 화면 및 Form 배치

회원 등록 화면으로 이동이나 메인 화면으로 이동하는 페이지 이동은 Vue Router 라이브러리 사용

 

 

 

2. DB에 Not Null로 정의된 이름, 휴대폰 번호, 회원권, 옷 대여 여부는 프론트 단에서 required 속성으로 전처리

이 과정에서 axios.post가 form 안의 required 속성을 무시하고 그냥 Post 요청 보내버려서 check 변수를 두고 필수로 입력해야 하는 input 태그는 값이 비었는지 확인하고 모두 입력되면 check가 true로 axios.post를 실행하도록 함

form 안의 input 데이터들은 v-model로 양방향 데이터 바인딩

form 안의 입력값과 양방향 데이터 바인딩 되는 반응형 객체

 

 

 

3. form 태그의 submit 버튼 새로고침 기능 제거: form 안에 버튼이 하나면 자동으로 그 버튼이 submit 버튼이 되어 submit을 보내고 새로고침을 실행함 => 등록 버튼을 누르면 router.push로 메인화면 '/' 경로로 갔다가 새로고침되어 다시 /signup으로 가게 됨

회원 등록을 하면 메인 화면으로 페이지 이동을 위해 아래와 같이 form 태그의 submit 버튼 새로고침 기능 막음

form의 onsubmit 속성으로 새로고침 기능 막음

 

 

 

4. axios post 요청 보낸 것을 MemberController에서 @RequestBody HashMap<String, Objec>로 받아 MemberService에 넘겨 처리

MemberService에서 입력한 휴대폰 번호가 이미 DB에 있는지 JPA Repository로 확인

 

LocalDateTime을 이용해 회원가입 날짜, 만료 날짜 설정

membership 테이블의 회원권 값은 HeidiSQL로 다음과 같이 INSERT 해놓음

 

다음과 같이 자바 String의 메서드로 입력한 휴대폰 번호의 뒷 4자리를 추출하여 비밀번호로 설정, JPA Repository의 save로 DB에 저장

 

 

 

 

5. 테스트

위와 같이 입력 후 등록 버튼으로 POST 요청 보냄

DB에 위와같이 잘 저장됨(나머지 데이터들은 테스트 해본것들)