vuejs 게시판 만들기 #9 (수정하기)

backend단 구현순서

1) 라우터 설정

2) 데이터 수정 모듈 구현

 

frontend단 구현순서

1) 상세화면에서 수정화면으로 이동 기능 구현

2) 수정화면에서 상세 데이터 호출 기능 구현

3) 수정화면에서 수정 프로세스 구현

 

먼저 backendek단

라우터를 설정하자

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

router.put('/',dao.mod);  //상세 라우터 추가

 

데이터 수정 모듈 추가

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

exports.mod = (req,res) => { //수정 모듈
	body = req.body; //post
	sql = " UPDATE tb_board SET subject = ?, cont = ?, editdate = now() WHERE num = ? ";
	conn.query(sql,[body.subject, body.cont, body.num],(err,result) => {
		if(err) throw err;
		res.send({success:true});
	})
}

 

frontend단 구현

상세화면에서 수정화면으로 이동(버튼 추가, 이동함수 추가)

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

<div class="btnWrap">
  <a href="javascript:;" @click="fnList" class="btn">목록</a>
  <a href="javascript:;" @click="fnMod" class="btnAdd btn">수정</a>
</div>	

--- 내용생략 ---

<script>
.....
	metdhos:{
    	,fnMod() {
			this.$router.push({path:'./write',query:this.body}); //등록화면으로 이동하면서 파라미터를 넘겨준다.
		}
    }
.....
</script>

 

수정화면 구현

파일경로 : front/src/components/board/Write.vue

<template>
	<div>
		<h1>게시판 {{num ? '수정':'등록'}}</h1> <!-- num 값에 따라 제목 변경 -->

		<div class="AddWrap">
			<form>
				<table class="tbAdd">
					<colgroup>
						<col width="15%" />
						<col width="*" />
					</colgroup>
					<tr>
						<th>제목</th>
						<td>
                        <!-- v-model 양뱡향데이터전송으로 상세 데이터 넣어준다 -->
                        <input type="text" v-model="subject" ref="subject" /></td>
					</tr>
					<tr>
						<th>내용</th>
						<td><textarea v-model="cont" ref="cont"></textarea></td>
					</tr>
				</table>
			</form>
		</div>

		<div class="btnWrap">
			<a href="javascript:;" @click="fnList" class="btn">목록</a>
			<a v-if="!num" href="javascript:;" @click="fnAddProc" class="btnAdd btn">등록</a>
			<a v-else href="javascript:;" @click="fnModProc" class="btnAdd btn">수정</a>
		</div>	
	</div>
</template>

<script>
export default {
	data() {
		return{
			board_code:'news'
			,subject:''
			,cont:''
			,id:'admin'
			,body:this.$route.query 
			,form:'' //form 전송 데이터
			,num:this.$route.query.num
		}
	}
	,mounted() { //최초 로딩 시 실행
		if(this.num) { // num 값이 있으면 상세 데이터 호출한다.
			this.fnGetView();
		}
	}
	,methods:{
		fnList(){
			delete this.body.num;
			this.$router.push({path:'./list',query:this.body});
			
		}
		,fnGetView() {
			this.$axios.get('http://localhost:3000/api/board/'+this.body.num,{params:this.body})
			.then((res)=>{
				this.view = res.data.view[0];
				this.subject = this.view.subject;
				this.cont = this.view.cont;
			})
			.catch((err)=>{
				console.log(err);
			})
		}
		,fnView() {
			this.$router.push({path:'./view',"query":this.body});
		}	
		,fnAddProc() {
			if(!this.subject) {
				alert("제목을 입력해 주세요");
				this.$refs.subject.focus(); //방식으로 선택자를 찾는다.
				return;
			}

			this.form = {
				board_code:this.board_code
				,subject:this.subject
				,cont:this.cont
				,id:this.id
			} 
			
			this.$axios.post('http://localhost:3000/api/board',this.form)
			.then((res)=>{
				if(res.data.success) {
					alert('등록되었습니다.');
					this.fnList();
				} else {
					alert("실행중 실패했습니다.\n다시 이용해 주세요");
				}
			})
			.catch((err)=>{
				console.log(err);
			})
			
		}
		,fnModProc() {
			if(!this.subject) {
				alert("제목을 입력해 주세요");
				this.$refs.subject.focus(); //방식으로 선택자를 찾는다.
				return;
			}

			this.form = {
				board_code:this.board_code
				,subject:this.subject
				,cont:this.cont
				,id:this.id
				,num:this.num
			} 
			
			this.$axios.put('http://localhost:3000/api/board',this.form)
			.then((res)=>{
				if(res.data.success) {
					alert('수정되었습니다.');
					this.fnView();
				} else {
					alert("실행중 실패했습니다.\n다시 이용해 주세요");
				}
			})
			.catch((err)=>{
				console.log(err);
			})
		}
	}	
}
</script>

<style scoped>
	.tbAdd{border-top:1px solid #888;}
	.tbAdd th, .tbAdd td{border-bottom:1px solid #eee; padding:5px 0;}
	.tbAdd td{padding:10px 10px; box-sizing:border-box;}
	.tbAdd td input{width:100%; min-height:30px; box-sizing:border-box; padding:0 10px;}
	.tbAdd td textarea{width:100%; min-height:300px; padding:10px; box-sizing:border-box;}
	.btnWrap{text-align:center; margin:20px 0 0 0;}
	.btnWrap a{margin:0 10px;}
	.btnAdd {background:#43b984}
	.btnDelete{background:#f00;}
</style>

 

웹화면에서 확인하자!!