🧱 Framework/Node.js

express에서 html접근, 제목변경

jaeyunim 2023. 1. 23. 10:42

🌳방법

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

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

 

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

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

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


🌳제목변경 코드

<HTML>

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")

 

<JS>

//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}`);
}

 

req.body.title을 통해 html에 접근 후 제목 변경이 가능하다.

 


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