Node, Vue 일지 #7 (20210907) 회원 정보 수정
-Mypage.vue 메뉴 수정
*App.vue에서 했던 것 처럼 '회원 정보 수정'과 '회원 탈퇴'를 changeMenu 로 변경하고
mounted() 변수로 메소드 호출하는 형식으로 수정한다.
<div>
<h3>마이 페이지</h3> <hr />
<input type="button" @click="changeMenu(1)" value="회원정보 수정" />
<input type="button" @click="changeMenu(2)" value="회원 탈퇴" />
</div>
... ...
mounted() {
this.changeMenu(1); // 메소드 호출하기
},
7. 회원 정보 수정
-회원 정보 수정 구현
*mypage에서 버튼 생성(vue mapage.vue)
*회원 가입 시 입력한 정보가 얼마 없기 때문에 username 만 수정한다.
*정보 수정 버튼을 만들어 버튼 클릭 시 정보 수정이 실행되도록 한다.
<div>
<h3>마이 페이지</h3> <hr />
<input type="button" @click="changeMenu(1)" value="회원정보 수정" />
<input type="button" @click="changeMenu(2)" value="회원 탈퇴" />
<div v-if="menu===1">
<h3>회원정보 수정</h3>
<input type="text" v-model="username" />
<input type="button" value="정보 수정" @click="updateHandle "/>
</div>
<div v-if="menu===2">
<input type="button" value="회원 탈퇴" @click="deleteHandle "/>
</div>
</div>
*화면 확인
*Mypage 클릭 시 초기 저장한 username 값을 text 창에 표현하도록 한다.(vue Mypage.vue)
async changeMenu(val){
this.menu = val;
if(val === 1 ) {
const url ="/member/update";
const response = await axios.get(url, {
headers : {token : this.token }
}); <-member.js 에서 update 코드 입력
console.log(response);
if(response.data.res === 1) { //출력값 확인 후 아래 작성
}
}
},
*node update(get) 생성(node member.js)
*update는 정보를 먼저 가져오고 이후 업데이트를 하는 것으로 get, put 두가지 update를 만든다.
//127.0.0.1:3000/member/update
router.get('/update', checkToken, async function(req, res, next){
try{
//인증 후 넘어오는 토큰에 포함된 아이디 값
const userid = req.idx; //auth 참고
const query = {_id : userid};
//db연결
const dbconn = await mongoclient.connect(mongourl);
const coll = dbconn.db(mongodb).collection(mongocoll);
const result = await coll.findOne(query, {projection : {name:1}});
res.send({res : 1, data : result});
}
catch(error){
console.error(error);
res.send({ret:-1, data:error}); //에러
}
});
*console 값 확인(크롬)
*node에서 보낸 resut를 받아 vue에서 response를 출력하여 전달 되는 값을 확인한다.
ex) res의 값, name의 위치
*username 출력
async changeMenu(val){
this.menu = val;
if(val === 1 ) {
const url ="/member/update";
const response = await axios.get(url, {
headers : {token : this.token }
});
console.log(response);
if(response.data.res === 1) { //출력값 확인 후 아래 작성
this.username = response.data.data.name; <- 콘솔창에 출력된 정보를 바탕으로 name 경로 확인
}
}
},
*화면 확인
*콘솔창에 나타나 name 값이 자동으로 반영된 것을 확인
*정보 수정 버튼 클릭 시 이루어질 methods 구현(vue Mypage.vue)
<input type="button" value="정보 수정" @click="updateHandle "/>
... ...
async updateHandle() {
const url ="/member/update";
const headers = {"Content-Type" : "application/json", "token" : this.token };
const body = {
username : this.username,
};
const response = await axios.put(url, body, {headers : headers});
console.log(response); <-member.js 에서 update 코드입력 후 확인
//수정 완료 후 메세지 처리 등...
},
*node update(put) 생성(node member.js)
router.put('/update', checkToken, async function(req, res, next){
try{
//인증 후 넘어오는 토큰에 포함된 아이디 값
const userid = req.idx; //auth 참고
const query = {_id : userid};
//바꿀 내용
console.log(req.body); <- 변경할 변수 확인
const change = {$set : {name : req.body.username}};
//db연결
const dbconn = await mongoclient.connect(mongourl);
const coll = dbconn.db(mongodb).collection(mongocoll);
//수정
const result = await coll.updateOne(query, change);
console.log(result); <- result 결과 호출하여 if 문에 사용할 변수 찾기
if(result.matchedCount === 1){
return res.send({ret : 1, data : "수정 성공."});
}
return res.send({ret : 0, data : "수정 실패."});
}
catch(error){
}
});
*console 값 확인(크롬)
*node에서 보낸 resut를 받아 vue에서 response를 출력하여 수정 성공 유무를 확인한다.
*콘솔 값에 대한 알림창 출력(vue mypage.vue)
async updateHandle() {
const url ="/member/update";
const headers = {"Content-Type" : "application/json", "token" : this.token };
const body = {
username : this.username,
};
const response = await axios.put(url, body, {headers : headers});
console.log(response);
//수정 완료 후 메세지 처리 등...
if(response.data.ret === 1 ) {
alert(response.data.data);
}
else{
alert(response.data.data);
}
},
*회원 정보 수정 구현
