이번 시간에는 생성한 비디오를 수정하거나 삭제할 수 있도록 해주겠습니다. 앞의 내용과 매우 유사하기 때문에 자세한 설명은 생략하도록 하겠습니다.
youtube
*|routes.js
|controllers
*|videoController.js
|routers
*|videoRouter.js
|views
*|editVideo.pug
editVideo와 deleteVideo를 텍스트가 아니라 상황에 맞게 출력을 할 수 있도록 함수로 바꿔줍니다. 이렇게 하는 이유는 express를 위한 변수를 표시한 주소와 변수가 실제로 들어간 주소를 구분해주기 위해서 입니다. 함수를 보면 id가 들어왔냐 안들어왔냐를 조건문을 통해 구분해 return값을 달리 주는 것을 확인할 수 있습니다.
const routes = {
editVideo: (id)=>{
if(id){
return `/videos/${id}/edit`;
}else{
return EDIT_VIDEO;
}
},
deleteVideo: (id) => {
if(id){
return `/videos/${id}/delete`;
}else{
return DELETE_VIDEO;
}
}
}
export default routes;
routes.js에서 수정한 내용을 반영해줍니다.
-editVideo
기존 editVideo 함수를 get method에 응답할 getEditVideo함수와 post method에 응답할 postEditVideo함수로 나누어줍니다.
export const getEditVideo = async(req, res) => {
const {params:{id}} = req;
const video = await Video.findById(id);
res.render("eidtVideo", {video});
}
export const postEditVideo = async(req, res) => {
const {body:{title, description}, params:{id}} = req;
await Video.findByIdAndUpdate(id, {title, description});
res.redirect(`/videos${videoDetail(id)}`);
}
export const deleteVideo = async(req, res) => {
const {params:{id}} = req;
try{
await Video.findByIdAndDelete(id);
}catch(e){
console.log(e);
}
res.redirect(routes.home);
}
routes.js에서 수정한 내용을 반영해주고 get method와 post mehtod에 맞는 함수를 연결해줍니다.
/*import 생략*/
videoRouter.get(routes.editVideo(), getEditVideo);
videoRouter.post(routes.editVideo(), postEditVideo);
videoRouter.get(routes.deleteVideo(), deleteVideo);
extends layout/main
block content
.form-container
form(action="", method="post")
input(type="text", value=video.title)
input(type="text", value=video.description)
input(type="submit", value="Update")
a(href=routes.deleteVideo(id)) Delete Video