오늘은 게시판 삭제 수정 만든다. 그럼 CRUD 완성
Vue Js Axios 및 Rest Api 를 활용한 CRUD 구현 | Bottlehs Tech Blog
Vue Js Axios 및 Rest Api 를 활용한 CRUD 구현
Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며,Ajax를 통해서 서버에 요청을 한
www.bottlehs.com
[ Vue.js ] 게시판만들기 (Update, Delete) (tistory.com)
[ Vue.js ] 게시판만들기 (Update, Delete)
detail components 게시글 클릭했을 때, 상세 페이지 만들기 Read.vue 기존 Read 컴포넌트에서 onClick 이벤트를 이용해서 detail 컴포넌트로 이동하는 함수를 실행시킨다. detail(i){ this.$router.push({ //params를 넘
bill1224.tistory.com
DetailPage.vue에서 수정, 삭제 버튼먼저 만들어준다.
<template>
<div class="board-detail">
글번호 : {{ detail.bno }}<br>
글제목 : {{ detail.btitle }}
<button v-on:click="update">수정</button>
<button v-on:click="deletepost"></button>
<br>
글쓴이 : {{ detail.m_name }}<br>
쓴날짜 : {{ detail.bdate }}<br>
내 용 : {{ detail.bcontent }}<br>
<button v-on:click="board">게시판으로</button>
</div>
</template>
method 부분 하단에 삭제버튼에 대한 기능 만들어준다.(deletepost)
일단 버튼을 클릭했을 때 해당글번호(this.detail.bno)를 팝업으로 띄워본다.
methods:{
board(){
this.$router.push({path : '/boardList'});
},
boardDetail(){
//alert('페이지가 구동되면 바로 호출됩니다.');
axios.get('http://localhost:3000/detail?bno='+this.$route.query.bno)
.then((res) => {
this.detail = res.data.detail;
})
.catch((err) => {
alert('오류가 발생했습니다.' + err);
});
},
deletepost(){
alert(this.detail.bno + "!");
}
}
삭제버튼 누르면
글번호를 잘 잡아온다.
삭제버튼 누르면 confirm창 뜨게 만들어보면
deletepost(){
if(confirm('삭제하시겠습니까?')){
alert(this.detail.bno + "!");
}
}
컨펌창이 뜨고
확인을 눌러야 글번호팝업이 뜬다.
이제 삭제버튼을 누르면 post방식으로 아래 url로 이동하는데 매개변수로는 bno를 가지고 갈거다.
deletepost(){
if(confirm('삭제하시겠습니까?')){
//alert(this.detail.bno + "!");
alert('삭제합니다.');
axios.post({
url:'http://localhost:3000/delete',
params:{bno:this.detail.bno}
});
}
}
main.js에서 router를 전역변수로 선언해준것처럼 axios 도 전역변수로 사용해볼예정(아마 내일)
그러면 매번 아래처럼 import 해주지 않아도 된다.
다시 돌아와서 통신 성공/실패시 팝업창 하나씩 만들어준다.
성공시 data.result로 받아올건가보다.
deletepost(){
if(confirm('삭제하시겠습니까?')){
//alert(this.detail.bno + "!");
alert('삭제합니다.');
axios.post({
url:'http://localhost:3000/delete',
params:{bno:this.detail.bno}
})
.then((res)=>{
alert('통신 결과 : ' + res.data.result);
})
.catch((err)=>{
alert('에러가 발생했습니다.' + err);
});
}
}
이클립스로 가서 BoardController 에 url로 이동하는 로직 만들어줄거다.
삭제버튼을 눌렀을때 bno를 컨트롤러에서 잡아와서
이걸 매개변수로 delete메소드 실행
잘된다. !!!
이제 삭제하면 db삭제 메세지가 뜨면서 게시판 페이지로 돌아가게 만들어줬다.
deletepost() {
if (confirm("삭제하시겠습니까?")) {
alert(this.detail.bno + "!");
axios({
url: "http://localhost:3000/delete",
method: "post",
params: { bno: this.detail.bno },
})
.then((res) => {
if (res.data.result == 1) {
alert("데이터베이스에서 삭제했습니다.");
this.$router.push("/boardList");
} else {
alert("oops! 문제가 발생했습니다. 다시 시도하지 마세요.");
}
//alert("통신결과 : " + res.data);
})
.catch((err) => {
alert("에러가 발생했습니다" + err);
});
}
데이터부분에
requestBody 추가해주고
data() {
return {
requestBody: this.$route.query,
detail: {
bno: this.$route.query.bno,
btitle: "",
bcontent: "",
bdate: "",
m_name: "",
blike: "",
},
};
},
result 값 받아오기 성공했을 때 router에 넣어주는 부분 아래처럼 변경해줬다.
게시판 페이지로 이동하면서 requestBody를 가지고 간다.??
.then((res) => {
if (res.data.result == 1) {
alert("데이터베이스에서 삭제했습니다.");
this.$router.push({
path : '/boardList',
params : this.requestBody
});
} else {
alert("oops! 문제가 발생했습니다. 다시 시도하지 마세요.");
}
[Vue] Vue.js 게시판 만들기 8 - 게시글 생성, 수정, 삭제 (tistory.com)
[Vue] Vue.js 게시판 만들기 8 - 게시글 생성, 수정, 삭제
게시글 생성 (CREATE) 게시글 생성 부터 진행해보도록 하겠습니다. BoardList.vue 에서 등록 버튼을 누르면 fnWrite 함수를 호출하도록 작업했습니다. vue-router에서 생성 화면으로 연결하고 저장까지 진
onethejay.tistory.com
main.js에 axios 를 전역변수로 선언해준다.
포트번호도 요기에 선언해준다. 이렇게 해주지 않으면 포트번호 바뀔때마다 url부분을 찾아서 매번 수정해줘야 한다.
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
const app = createApp(App)
app.config.globalProperties.$axios = axios;
app.config.globalProperties.$server = 'http://localhost:3000';
app.use(router).mount('#app')
이제 DetailPage에 있는 axios 임포트문은 지운다.
요렇게 this로 전역변수를 불러와준다.
BoardList에서도 axios 임포트문 지우고 전역변수로 사용해준다.
이제 수정버튼 기능 만들자. (update)
DetailPage에서 delete 메소드 아래에 update 메소드 만들어준다.
일단 bno를 잡아서 /update 로 보낼거다.
update(){
if(confirm('수정하시겠습니까?')){
this.$router.push({
path:'/update',
bno : this.detail.bno
});
}
}
import
WritePage.vue를 복사해서
UpdatePage.vue를 만든다.
WritePage.vue 와 UpdatePage.vue 에서도 전역변수 $axios 와 포트번호를 사용해준다.
UpdatePage.vue 에 데이터 넣어준다.
들어올 값들을 null 혹은 ' ' (빈따옴표) 로 처리해준다.
data(){
return{
requestBody: this.$route.query,
title:null,
content:null,
detail: {
bno : this.$route.query.bno,
btitle: '',
bcontent: '',
},
};
},
mounted(){},
아래쪽에 mounted() 메소드 만들어준다.
그 아래 method 부분에 boardDetail 메소드 만들어준다. (DetailPage에 있던 메소드복사해와서 조금만수정)
mounted() {
this.boardDetail();
},
methods: {
boardDetail() {
this.axios
.get(this.$server + "/detail?bno=" + this.$route.query.bno)
.then((res) => {
this.detail = res.data.detail;
this.title = this.detail.btitle;
this.content = this.detail.bcontent;
})
.catch((err) => {
alert("오류가 발생했습니다." + err);
});
},
내가 가진 bno를 뽑아서 서버로 던져주고 ....
가져온 title을 위의 data에 있는 비워져있는 detail의 btitle에다가 넣어준다는 의미인가????
data() {
return {
requestBody: this.$route.query,
title: null,
content: null,
detail: {
bno: this.$route.query.bno,
btitle: "",
bcontent: "",
},
};
},
mounted() {
this.boardDetail();
},
methods: {
boardDetail() {
this.axios
.get(this.$server + "/detail?bno=" + this.$route.query.bno)
.then((res) => {
this.detail = res.data.detail;
this.title = this.detail.btitle;
this.content = this.detail.bcontent;
})
.catch((err) => {
alert("오류가 발생했습니다." + err);
});
},
뭘까
Vue 라이프사이클 훅 - created, mounted 차이 (velog.io)
Vue 라이프사이클 훅 - created, mounted 차이
Vue 라이프사이클 훅 - created, mounted
velog.io
일단 아래부분 변경한다.
아래에서 requestBody로 query 로? 저장을 했으니
아래에서 requestBody로 받아서
update(){
if(confirm('수정하시겠습니까?')){
this.$router.push({
path:'/update',
//bno : this.detail.bno
query: this.requestBody
});
}
}
모르겠다.
UpdatePage.vue 에서 write 부분 다 update로 수정해주고
이클립스 가서 /update 요청에 대한 로직 만든다.
@PatchMapping 이걸 사용해본다고 한다.
Vue.js에서 axios를 사용하여 서버통신하는 방법 (stories.pe.kr)
Vue.js에서 axios를 사용하여 서버통신하는 방법
웹 또는 앱을 개발하다 보면 거의 대부분이 서버가 필요하게 됩니다. 서버에 내용을 저장하고 웹이나 앱에서 서버의 저장된 내용을 불러다가 사용자에게 보여주게 되는데요. 이때 javascript에는 a
ux.stories.pe.kr
UpdatePage.vue 에 update 메소드 부분
axios 사용할때 $ 기호를 자꾸 빼먹어서 오류가 났었다.
update() {
let saveData = {};
saveData.title = this.title;
saveData.content = this.content;
saveData.bno = this.$route.query.bno;
//alert(saveData.title);
this.$axios
.patch(this.$server + "/update", JSON.stringify(saveData), {
headers: { "Content-Type": "application/json" },
})
.then((res) => {
if (res.data.result == 1) {
alert("데이터베이스에 글을 저장했습니다.");
//location.href="/boardList";
this.$router.push("/boardList");
} else {
alert("ooops! 문제가 발생했습니다.");
}
})
.catch((err) => {
alert("문제가 발생했습니다." + err);
});
},
},
saveData 에 bno도 추가해줬다.
컨트롤러에서 수정값을 map으로 잡아서 db로 보내자
가져간 bno와 일치하는 title과 content 를 update하는 쿼리문 작성
