First Video의 이름을 바꾸고싶다면 html에 접근해야하는데 express를 이용할때는
html의 form
을 이해하고 사용할수있는 js object
형식으로 바꿔주는 코드가 필요하다.
메인js파일에 다음과 같은 코드(미들웨어)를 추가해주면 된다.
app.use(express.urlencoded({ extended: true }));
router로 연결되기 전에 선언해주어야 주소에 접근하기 전에 적용된다.
다음 코드는 html을 편하게 이용하기 위한 pug코드이다.
input
안에 name
을 통해 js에서 req.body.title
로 input
상자에 적힌 텍스트를 가져올 수 있다!
extends partials/base.pug
block content
h4 Change Title of video
form(method = "POST")
input(name = "title", placeholder = "Video Title", value = video.title, required = true)
input(type="submit", value="Save")
//videoController.js
//임시 데이터
const videos = [
{
title: "First Video",
views: 36,
rating: 4.5,
comments: 20,
id: 1
},
{
title: "Second Video",
views: 52,
rating: 1,
comments: 1,
id: 2
}
]
export const postEdit = (req, res) => {
const id = req.params.id;
const title = req.body.title;
videos[id - 1].title = title;
return res.redirect(`/videos/${id}`);
}
가상 데이터인 videos의 title을 html에서 가져온 title로 바꾸는 코드다.
제목이 수정된걸 확인할 수 있다!