1. passCheck
passCheckNum 데이터를 만들어 비밀번호가 일치할때 0, 틀렸을때 1 값이 부여되도록 설정한다
passCheck(){
if(this.passwordCheck===""||null||undefined||NaN){
this.placeholder = ""
}else if(this.password!==this.passwordCheck){
this.placeholder = "비밀번호가 틀렸습니다";
this.passCheckNum = 1;
}else{
this.placeholder="비밀번호가 일치합니다";
this.passCheckNum = 0;
}
},
2. doubleCheck
지난번에 만든 checkNum는 닉네임이 생성가능하면 0, 중복되면 1 값 을 부여한다
// Vue - signup 의 methods 부분
doubleCheck(){
let saveData = {};
saveData.nickname = this.nickname;
this.$axios.post("signup/doublecheck",JSON.stringify(saveData),{
headers: {
"Content-Type": `application/json`,
},
})
.then(response=>{
this.checkNum = response.data;
if(this.checkNum===0){
alert("사용가능한 닉네임 입니다")
}else{
alert("중복된 닉네임 입니다")
}
console.log(response.data);
})
.catch(error =>{
console.log(error.response);
})
}
3. signCommit
회원가입 정보를 입력후 중복체크까지 하였으면 signCommit 버튼을 통해 Springboot로
데이터를 전송하여 계정을 생성한다.
if문을 사용하여 위의 passCheck 와 doubleCheck의 값이 0일때만 로그인 허용
if(this.passCheckNum===1){
alert("비밀번호를 확인해주세요")
return null;
}
if(this.checkNum===1){
alert("닉네임을 확인해주세요")
return null;
}
let saveUser = {};
saveUser.email = this.email;
saveUser.firstName = this.firstName;
saveUser.lastName = this.lastName;
saveUser.password = this.password;
saveUser.nickName = this.nickName;
saveUser에 데이터를 저장하고 post방식으로 회원가입 url로 전송한다.
회원가입을 성공하면 /Home 페이지로 이동하고, 만약 회원가입에 실패하면 입력 값들을 null로 초기화 후 오류메시지 출력
try {
this.$axios.post("/api/member", JSON.stringify(saveUser), {
headers: {
"Content-Type": `application/json`,
},
})
.then((response) => {
//성공 시 수행될 코드
})
.catch(error =>{
//실패 시 수행될 코드
}
});
} catch (error) {
console.error(error);
}
4. 회원가입 실행
중복확인과 비밀번호 체크를 수행하고 회원가입 버튼을 누르면 완료.
(중복확인 버튼 뒤 숫자는 위에서 만든 checkNum)
이름과 닉네임이 잘 저장된것을 볼 수 있다.
'Vue > Vue' 카테고리의 다른 글
글 작성 (Springboot + Vue) (0) | 2022.01.13 |
---|---|
Store 수정 & 마이페이지 구현 (12.31~1.04) (0) | 2022.01.04 |
(signup-2) 중복확인 (0) | 2021.12.24 |
doFilter 특정 URL 제외시키기 (0) | 2021.12.23 |
(SignUp-1) 회원가입 구현하기 (0) | 2021.12.16 |