vuejs 게시판 만들기 #10 (삭제하기)

 

backend단 진행

1) 라우터 설정

2) 데이터 삭제 모듈 추가

 

frontend단 진행

1) 상세페이지 삭제 버튼 및 함수 추가

 

먼저 backend단 진행

라우터를 설정한다.

파일경로 : back/routes/api/board/index.js

const router = require('express').Router();
const dao = require('./dao');

router.get("/",dao.list);

router.get('/:num',dao.view);

router.post("/",dao.add);

router.put('/',dao.mod);

router.put('/',dao.delete); //삭제 모듈 추가

router.all('*',(req, res)=> {
	res.status(404).send({success:false, msg:'board unknown uri ${req.path}'});
})

module.exports = router;

 

데이터 삭제 모듈 추가

파일경로 : back/routes/api/board/dao.js

----------------생략---------------------

exports.delete = (req, res) => {
	body = req.query;
	sql = " DELETE FROM tb_board WHERE num = ? ";
	dbcon.query(sql,[body.num],(err,result) => {
		if(err) throw err;
		res.send({success:true,result:result});
	})
}

 

frontend단 진행

버튼 및 함수 추가

파일경로 : front/src/compoents/board/View.vue

<template>
...생략

<div class="btnWrap">
  <a href="javascript:;" @click="fnList" class="btn">목록</a>
  <a href="javascript:;" @click="fnMod" class="btnAdd btn">수정</a>
  <a v-if="num" href="javascript:;" @click="fnDeleteProc" class="btnDelete btn">삭제</a>
</div>

...생략
</template>

<script>
	....생략
    methods:{
    	,fnDeleteProc() {
			if(confirm("삭제하시겠습니까?")) {
				this.$axios.delete('http://localhost:3000/api/board',{params:this.body})
				.then((res)=>{
					if(res.data.result) {
						alert("삭제되었습니다.");
						this.fnList();
					} else {
						alert("실행중 실패했습니다.\n다시 이용해 주세요.");
					}
				})
				.catch((err)=>{
					console.log(err);
				})
			}
		}
    }
</script>

상세화면에서 삭제기능 확인