BoardOne.vue

• 조회 : await this.axios.get(url, {headers:headers});
• 추가 : await this.axios.post(url, body, {headers:headers});
• 수정 : await this.axios.put(url, body, {headers:headers});
• 삭제 : await this.axios.delete(url, {headers:headers, data:{}});

게시글 삭제 - DELETE

1. 삭제 버튼에 클릭 이벤트를 넣는다.

• @click="handleDelete"

<el-button type="primary" @click="handleDelete(this.no)">
삭제</el-button>

• @click="handleDelete(this.no)"
  : this.no의 메소드를 지정한다.

2. this.no를 메소드에서 받는다.

• methods에서 handleDelete(no)로 만든다.

3. 백엔드에 delete의 url을 불러온다.

const url = `/board/delete?no=${no}`;

4. headers와 body를 불러온다.

• const headers = {"Content-Type":"application/json" };
  : headers
• const body = {};
  : body
  : body는 따로 넘길 값이 없으므로 빈칸으로 정의한다.
• 삭제 : await this.axios.delete(url, {headers:headers, data:{}});
  : 삭제의 형태를 따르기 위해 data에 넣을 body를 만든 것이다.

5. url에 던진 값을 요청한다.

• const response = await this.axios.delete(url, {headers:headers, data:body});
  : data : body 를 입력하여 data를 빈값으로 던진다. (다른 던질 데이터가 없기때문)
• console.log(response);
  : response.data.status = 200 잘 처리되었다는 뜻

6. 마무리

• if문을 사용해서 response.data.status = 200일 경우에 대한 명령을 입련한다.

if(response.data.status === 200){
                    alert('삭제 되었습니다.')
                    this.$router.push({name:"Board"});
                }

• '삭제 되었습니다.' 라는 경고창이 뜨고, Board로 이동한다.