exprss에서 html접근, 제목변경

jaeyunim00·2023년 1월 30일
0

nodeJS

목록 보기
1/8
post-thumbnail

⭐️ 방법

First Video의 이름을 바꾸고싶다면 html에 접근해야하는데 express를 이용할때는

html의 form을 이해하고 사용할수있는 js object 형식으로 바꿔주는 코드가 필요하다.

메인js파일에 다음과 같은 코드(미들웨어)를 추가해주면 된다.

app.use(express.urlencoded({ extended: true }));

router로 연결되기 전에 선언해주어야 주소에 접근하기 전에 적용된다.


⭐️ 제목변경 코드

다음 코드는 html을 편하게 이용하기 위한 pug코드이다.
input안에 name을 통해 js에서 req.body.titleinput상자에 적힌 텍스트를 가져올 수 있다!

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로 바꾸는 코드다.

제목이 수정된걸 확인할 수 있다!

profile
개발노트

0개의 댓글