22. 회원가입
-회원 가입
백엔드 : #45 회원가입
* axios 설치(cmd)
*회원가입 회면 구성(Join.vue)
<template>
<div>
<h3>회원 가입</h3>
이메일 <input type="text" v-model="email" /> <br />
암호<input type="password" v-model="passwd" /> <br />
암호 확인<input type="password" v-model="passwd1" /> <br />
이름 <input type="text" v-model="name" /> <br />
<select v-model="role" >
<option value="CUSTOMER">고객</option>
<option value="SELLER">판매자</option>
<option value="ADMIN">관리자</option>
</select> <br />
<input type="button" @click="handleJoin" value="회원가입" />
</div>
</template>
*회면 확인
*회원가입 버튼 클릭 시 이벤트 구성(Join.vue)
*console.log(response); 를 이용해 버튼 클릭 후 전달값 확인한다.
<script>
import axios from 'axios'
export default {
methods:{
async handleJoin(){
const url = "/REST/api/member/join";
const headers = {"Content-Type":"application/json"}
const body = {
email : this.email,
passwd : this.passwd,
passwd1 : this.passwd1,
name : this.name,
role : this.role
}
const response = await axios.post(url, body, {headers});
console.log(response);
}
},
data(){
return{
email : '',
passwd : '',
passwd1 : '',
name : '',
role : ''
}
}
}
</script>
*console 확인
*if 조건문을 이용해 성공 유무 확인과 다음 동작 입력
export default {
methods:{
async handleJoin(){
const url = "/REST/api/member/join";
const headers = {"Content-Type":"application/json"}
const body = {
email : this.email,
passwd : this.passwd,
passwd1 : this.passwd1,
name : this.name,
role : this.role
}
const response = await axios.post(url, body, {headers});
//console.log(response);
if(response.data.status === 200){
alert("회원가입 되었습니다.");
this.$router.push({name: 'Home'});
}
else{
alert("회원가입 실패했습니다.");
}
}
},
*회원가입
*성공 메세지 확인 후 h2-console 에서 확인한다.
'node, vue' 카테고리의 다른 글
| Vue 일지 #24 (20211005) 비밀번호 변경 (0) | 2021.10.05 |
|---|---|
| Vue 일지 #23 (20211005) 로그인 (0) | 2021.10.05 |
| Vue 일지 #21 (20211005) Spring 연동 (0) | 2021.10.05 |
| Vue 일지 #20 (20210928) spring 연동(비밀번호 변경) (0) | 2021.10.01 |
| Vue 일지 #19 (20210928) spring 연동(정보 수정) (0) | 2021.10.01 |