TODO 프로젝트 – 9. 할 일 추가하기
할 일을 추가해 보겠습니다.
할 일 추가는 ADD 페이지에서 이루어집니다.
할 일 제목과 내용이 들어가며 내용은 빈칸으로 입력이 가능합니다.
1.프론트처리 (frontend/src/commponents/page/add.vue)
<template>
<div class="add">
<h2 class="comm__title">ADD</h2>
<div class="ipt__box">
<input type="text" ref="tit" class="ipt" v-model="newTodoTitle" placeholder="Inser Todo" v-on:keyup.enter="addTodo">
</div>
<div class="ipt__box">
<input type="text" class="ipt" v-model="newTodoDesc" placeholder="Insert Content" v-on:keyup.enter="addTodo">
</div>
<div class="ipt__btn">
<a href="#" class="btn btn--confirm btn--large" v-on:click="addTodo">ADD</a>
</div>
</div>
</template>
<script>
export default {
data() {
return {
newTodoTitle :'',
newTodoDesc :''
}
},
methods : {
addTodo() {
if (!this.newTodoTitle) {
alert('할일을 입력해주세요.');
return false;
}
this.$http.post('/api/todo/add',{title : this.newTodoTitle, desc : this.newTodoDesc}).then((response) => {
if (response.data.success == true) {
alert('등록되었습니다.');
this.$router.push('/list');
}
});
},
clearInput() {
this.newTodoTitle ='';
this.newTodoDesc ='';
this.$refs.tit.focus();
}
}
}
</script>
[ADD] 버튼을 클릭하면 addTodo 함수가 실행되고 API로 할일 타이틀과 할일 내용이 전달됩니다.
제대로 입력되었을시 등록완료 얼렛창을 띄웁니다.
2.할일 추가 API 추가 (backend/app.js)
app.post('/api/todo/add',function (req,res,next) {
var params = [req.body.title,req.body.desc];
var userNo = req.session.userNo;
connection.query(
"INSERT INTO `todos` VALUES ('',?,?,"+userNo+",0,NOW())",params,
function (error,result,fields) {
if (error) console.log(error);
res.json({
success : true
})
}
)
})
프론트에서 호출된 API에서는 제목과 내용을 DB에 저장합니다.
성공적으로 등록되었을 시 true를 리턴합니다.