(signUp-3) 회원가입 마무리

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)

 

 

이름과 닉네임이 잘 저장된것을 볼 수 있다.