nodejs 서버 쉽게 만들기(10): POST 요청 처리

7309 단어 nodejs서버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 데이터 처리에 관한 모든 내용입니다.
다음 절에서 우리는 사진 업로드 기능을 실현할 것이다.

좋은 웹페이지 즐겨찾기