node.JS POST request
POST 요청을 처리하는 방법
//edit.pug
extends base.pug
block content
h3 Edit
h4 Title
form(method="POST")
input(name="title", placeholder="new title", value="enter",required)
input(type="submit", value="Save")
form 안의 input에 입력된 값을 database로 post 한다. = database를 update한다.
아직까지는 node.js app이 post요청을 어떻게 처리할지 모르기 때문에 라우터를 추가해야 한다.
(form에 action을 따로 지정하지 않아서 post url은 그대로 유지됨)
videoRouter.route("/:id(\\d+)/edit").get(getEdit).post(postEdit);
:id(\d+)/edit url에서 get 요청시 getEdit, post 요청시 postEdit을 수행한다.
위 코드는 아래 두 줄의 코드를 합친것과 같다.
videoRouter.get("/:id(\\d+)/edit", getEdit);
videoRouter.post("/:id(\\d+)/edit", postEdit);
라우터를 지정해뒀으면 이제 post요청을 받았을때 어떻게 처리해야 할지 node.JS app이 알고있다. 하지만 아직 postEdit을 정의하지 않았으므로 controller를 추가해준다.
export const postEdit = (req, res) => {
const { title } = req.body; // form 의 내용을 javascript object로 변환하여 돌려준다.
const { id } = req.params;
videosInfo[id - 1].title = title;
return res.redirect(`/videos/${id}`); // res.redirect("/") 자동으로 url 경로를 "/"로 이동
};
database의 title을 form에서 받은 값으로 변환하고 url을 /videos/${id}로 자동 변경한다.
새로운 컨트롤러를 만들었을 때 export와 import 하는 것을 잊지 말자.
이 때 req.body를 사용하려면 express에 추가적인 작업이 필요한데 이 때, middleware를 통해서 라우터를 실행하기 전에 거치도록 코드 작성 순서에 신경써야한다.
app.use(express.urlencoded({ extended: true })); // express 앱이 form의 value를 이해하게한다.
추가로 input에 name을 지정하지 않으면 req.body를 받아올 수 없음.
Author And Source
이 문제에 관하여(node.JS POST request), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@funco247/node.JS-POST-request저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)