노드에서 POST 요청을 처리합니다.js
파일 구조를 설정하는 데 시간이 좀 걸립니다.
controllers
app_controller.js
items_controller.js
views
items
index.html
new.html
index.html
app.js
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<h1>Index</h1>
<a href="/items">Items</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Items</title>
</head>
<body>
<h1>Items</h1>
<a href="/">Index</a>
<a href="/items/new">Create Item</a>
</body>
</html>
action 필드를 "/items"로 설정하고 method 필드를 "POST"로 설정해야 한다.특히 텍스트 입력 name 필드의 값은 우리가 요청을 처리할 때 데이터를 추출하는 매개 변수의 이름입니다.<!DOCTYPE html>
<html>
<head>
<title>Create Item</title>
</head>
<body>
<h1>Create Item</h1>
<a href="/items">Items</a>
<form action="/items" method="POST">
<input type="text" name="value" />
<input type="submit" />
</form>
</body>
</html>
const fs = require("fs");
const appController = (request, response) => {
if (request.url === '/') {
fs.readFile("./views/index.html", (error, html) => {
if (error) throw error;
response.write(html);
return response.end();
});
}
}
module.exports = appController;
const fs = require("fs");
const items = [];
const itemsController = (request, response) => {
if (request.url === "/items") {
fs.readFile("./views/items/index.html", (error, html) => {
if (error) throw error;
response.write(html);
response.write("<ul>");
for (const item of items) {
response.write(`<li>${item}</li>`);
}
response.write("</ul>");
return response.end();
});
}
if (request.url === "/items/new") {
fs.readFile("./views/items/new.html", (error, html) => {
if (error) throw error;
response.write(html);
return response.end();
});
}
}
module.exports = itemsController;
response.write를 여러 번 호출했을 뿐이다.이제 프로젝트 컨트롤러를 통합합시다.이를 위해, 우리는 프로그램 컨트롤러 내부에서 그것을 호출해서, 아래로 적당한 파라미터를 전달할 수 있도록 하기만 하면 된다.
애플리케이션 컨트롤러js는 지금 아래와 같아야 한다.
const fs = require("fs");
const itemsController = require("./items_controller");
const appController = (request, response) => {
if (request.url === '/') {
fs.readFile("./views/index.html", (error, html) => {
if (error) throw error;
response.write(html);
return response.end();
});
}
itemsController(request, response);
}
module.exports = appController;
const http = require("http");
const controller = require("./controllers/app_controller");
http.createServer(controller).listen(3000);
node app.js
localhost:3000에 액세스하여 각 경로를 탐색할 수 있는지 확인합니다.당신은 또한 이 기회를 빌려 테스트 폼을 제출할 수 있습니다.제출하면/items 경로로 안내되지만, 항목이 문서에 나타나지 않습니다.우리 이 문제를 해결합시다!이러한 행위를 실현하기 위해서, 우리는/items 루트를 바꾸고, 하나의 노드를 이용하기만 하면 된다.js 패키지 호출
querystring 은 전송된 파라미터를 분석합니다.우선, 우리는 루트에 두 개의 독립된 실행 경로를 만들어야 한다.우리는
method 매개 변수의 request 속성을 검사해서 이 지점을 만들 것입니다.우리 노선의 전체적인 구조는 다음과 같다.
if (request.url === "/items") {
if (request.method === "POST") {
...
}
else {
fs.readFile("./views/items/index.html", (error, html) => {
if (error) throw error;
response.write(html);
response.write("<ul>");
for (const item of items) {
response.write(`<li>${item}</li>`);
}
response.write("</ul>");
return response.end();
});
}
}
method 파라미터의 request 속성이 "POST" 과 같지 않은 상황에서만 실행됩니다.이제 좀 까다로운 부분을 살펴봅시다.HTTP 요청의 비동기성 때문에 이벤트 구동 행위를 이용하여 전송된 데이터를 포착하고 리셋을 사용하여 값을 그룹으로 밀어넣어야 합니다.
우리가 이 기능의 실현을 완성한 후에items 컨트롤러.js는 다음과 같다.
const fs = require("fs");
const qs = require("querystring");
const items = [];
const itemsController = (request, response) => {
if (request.url === "/items") {
if (request.method === "POST") {
let body = '';
request.on("data", chunk => {
body = `${body}${chunk.toString()}`;
});
request.on("end", () => items.push(qs.parse(body).value));
response.writeHead(301, { Location: "/items" });
return response.end();
}
else {
fs.readFile("./views/items/index.html", (error, html) => {
if (error) throw error;
response.write(html);
response.write("<ul>");
for (const item of items) {
response.write(`<li>${item}</li>`);
}
response.write("</ul>");
return response.end();
});
}
}
if (request.url === "/items/new") {
fs.readFile("./views/items/new.html", (error, html) => {
if (error) throw error;
response.write(html);
return response.end();
});
}
}
module.exports = itemsController;
request 이라는 인자 on 에 대한 익숙하지 않은 두 가지 호출을 알 수 있습니다.우리가 이 방법에 전달한 첫 번째 매개 변수는 우리가 감청하고 있는 사건이다.이벤트가 터치될 때, 우리의 리셋은 호출될 것입니다."data" 이벤트를 터치할 때, 우리는 chunk라는 인자를 익명 함수에 전달하고, 이 함수는 리셋 함수로 사용합니다.이 함수에서, 우리는 문자열화된 데이터 블록을 우리가 명명한 빈 문자열 body 에 연결합니다.이 데이터들은 우리가 추출하고자 하는 값을 포함하지만, 데이터가 통과될 때 블록을 나누어 수집해야 한다.요청이 완료되면
"end" 이벤트가 트리거됩니다.지금이야말로 body 변수를 분석하고 새로 되돌아오는 대상의 value 속성을 items 그룹에 저장하는 가장 좋은 시기입니다. 왜냐하면 우리는 이때 필요한 모든 데이터를 확보할 수 있기 때문입니다.마지막으로, 우리는 상태 코드301와 위치"/items"를 응답의 헤더에 기록할 것입니다.일단 우리가 호출하면 response.end, 즉시/items로 호출됩니다.터미널에서 다음 명령을 다시 입력하십시오.
node app.js
localhost:3000/items/new에 액세스하여 텍스트 필드를 작성하고 커밋을 누릅니다.현재 항목이 무질서한 목록에 표시되는 것을 볼 수 있습니다.여러 항목을 제출할 수 있지만, 프로그램이 닫히면 항목을 잃어버립니다. 데이터가 오래 지속되지 않기 때문입니다.나는 너희들 중 일부가 이 작은 강좌가 매우 도움이 된다는 것을 발견할 수 있기를 바란다.다음 주에 나는 SQLite 데이터베이스와
sqlite3 노드의 데이터 지속성을 소개할 것이다.js 패키지.이 기회에 API 설정에 JSON을 렌더링하는 방법도 논의합니다.우리는 이곳에서 끝난 곳에서부터 이 노력을 시작할 것이다.
Reference
이 문제에 관하여(노드에서 POST 요청을 처리합니다.js), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/brandonmweaver/handling-post-requests-in-node-js-1mgo텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
