nodejs 서버 쉽게 만들기(10): POST 요청 처리
우리가 해야 할 일은 사용자가 파일을 선택하여 업로드하고 브라우저에서 업로드된 파일을 보는 것이다.
우선 사용자가 내용을 입력할 수 있는 텍스트 영역(textarea)이 필요합니다. 그리고 POST 요청을 통해 서버에 제출해야 합니다.
start 이벤트 프로세서에 코드를 추가합니다. requestHandlers.js 수정은 다음과 같습니다.
function start(response) {
console.log("Request handler 'start' was called.");
var body = '<html>'+ '<head>'+
'<meta http-equiv="Content-Type" content="text/html; '+
'charset=UTF-8" />'+
'</head>'+
'<body>'+
'<form action="/upload" method="post">'+
'<textarea name="text" rows="20" cols="60"></textarea>'+
'<input type="submit" value="Submit text" />'+
'</form>'+
'</body>'+
'</html>';
response.writeHead(200, {"Content-Type": "text/html"});
response.write(body);
response.end();
}
function upload(response) {
console.log("Request handler 'upload' was called.");
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("Hello Upload");
response.end();
}
exports.start = start;
exports.upload = upload;
브라우저에서 액세스http://localhost:8888/start효과를 볼 수 있을 거예요.다음은 사용자가 폼을 제출할 때/upload 요청 처리 프로그램을 터치하여 POST 요청을 처리하는 것을 실현하고자 합니다.
전체 과정이 막히지 않도록 Node.js는 POST 데이터를 작은 블록으로 나누어 특정한 이벤트를 촉발하여 이 작은 블록을 리셋 함수에 전달합니다.여기에 특정한 이벤트는 데이터 이벤트 (새로운 작은 데이터 블록이 도착했다는 뜻) 와end 이벤트 (모든 데이터가 수신되었다는 뜻) 가 있습니다.
우리는 리퀘스트 대상에 감청기 (listener) 를 등록함으로써 실현한다.이 리퀘스트 대상은 HTTP 요청을 받을 때마다 이 대상을 onRequest 리셋 함수에 전달합니다.
우리는 코드를 서버에 두었다, 서버.js 수정은 다음과 같습니다.
var http = require("http");
var url = require("url");
function start(route, handle) {
function onRequest(request, response) {
var postData = "";
var pathname = url.parse(request.url).pathname;
console.log("Request for " + pathname + " received.");
request.setEncoding("utf8");
request.addListener("data", function(postDataChunk) {
postData += postDataChunk;
console.log("Received POST data chunk '"+ postDataChunk + "'.");
});
request.addListener("end", function() {
route(handle, pathname, response, postData);
});
}
http.createServer(onRequest).listen(8888);
console.log("Server has started.");
}
exports.start = start;
상기 코드는 세 가지 일을 했다. 첫째, 우리는 수신 데이터의 인코딩 형식을 UTF-8로 설정한 다음에 "데이터"이벤트의 감청기를 등록하여 매번 수신된 새로운 데이터 블록을 수집하고postData 변수에 값을 부여한다. 마지막으로, 우리는 요청 루트의 호출을 end 이벤트 처리 프로그램으로 옮겨서 모든 데이터가 수신된 후에만 터치하고 한 번만 터치할 수 있도록 한다.우리는 또한 POST 데이터를 요청 루트에 전달한다. 왜냐하면 이러한 데이터는 요청 처리 프로그램이 사용하기 때문이다.다음은/upload 페이지에서 사용자가 입력한 것을 보여 줍니다.
라우터를 고치겠습니다.js:
function route(handle, pathname, response, postData) {
console.log("About to route a request for " + pathname);
if (typeof handle[pathname] === 'function') {
handle[pathname](response, postData);
} else {
console.log("No request handler found for " + pathname);
response.writeHead(404, {"Content-Type": "text/plain"});
response.write("404 Not found");
response.end();
}
}
exports.route = route;
그리고 리퀘스트 핸들러에서.js에서 upload 요청에 대한 응답에 데이터를 포함합니다.
function start(response, postData) {
console.log("Request handler 'start' was called.");
var body = '<html>'+
'<head>'+
'<meta http-equiv="Content-Type" content="text/html; '+
'charset=UTF-8" />'+
'</head>'+
'<body>'+
'<form action="/upload" method="post">'+
'<textarea name="text" rows="20" cols="60"></textarea>'+
'<input type="submit" value="Submit text" />'+
'</form>'+
'</body>'+
'</html>';
response.writeHead(200, {"Content-Type": "text/html"});
response.write(body);
response.end();
}
function upload(response, postData) {
console.log("Request handler 'upload' was called.");
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("You've sent: " + postData);
response.end();
}
exports.start = start;
exports.upload = upload;
우리가 마지막으로 해야 할 일은 현재 요청의 전체 메시지체를 요청 루트와 요청 처리 프로그램에 전달하는 것이다.우리는 POST 데이터 중 우리가 관심 있는 부분만 요청 루트와 요청 처리 프로그램에 전달해야 한다.우리의 이 예에서 우리가 흥미를 느끼는 것은 사실text 필드일 뿐이다.우리는 이전에 소개한querystring 모듈을 사용하여 실현할 수 있다.
var querystring = require("querystring");
function start(response, postData) {
console.log("Request handler 'start' was called.");
var body = '<html>'+
'<head>'+
'<meta http-equiv="Content-Type" content="text/html; '+
'charset=UTF-8" />'+
'</head>'+
'<body>'+
'<form action="/upload" method="post">'+
'<textarea name="text" rows="20" cols="60"></textarea>'+
'<input type="submit" value="Submit text" />'+
'</form>'+
'</body>'+
'</html>';
response.writeHead(200, {"Content-Type": "text/html"});
response.write(body);
response.end();
}
function upload(response, postData) {
console.log("Request handler 'upload' was called.");
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("You've sent the text: "+ querystring.parse(postData).text);
response.end();
}
exports.start = start;
exports.upload = upload;
자, 지금까지 POST 데이터 처리에 관한 모든 내용입니다.다음 절에서 우리는 사진 업로드 기능을 실현할 것이다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Node.js를 AWS서버에서 사용하는 실습간단한 예제와 함께 AWS에서 Node.js를사용하는 법을 배워보도록 하겠다. 해당 github에 있는 레포지토리로 사용을 할 것이다. 3000번 포트로 Listen되는 예제이고 간단히 GET, POST, DELET...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.