지금까지 우리가 만든 서버는 실용적으로 사용되지 않으므로 실용적이고 유용한 기능을 구현하기 시작할 것입니다.
우리가해야 할 일 : 사용자는 파일을 선택하고 파일을 업로드 한 다음 브라우저에서 업로드 된 파일을 봅니다.
먼저 사용자가 컨텐츠를 입력 한 다음 게시물 요청을 통해 서버에 제출하려면 TextArea가 필요합니다.
시작 이벤트 핸들러에 코드를 추가하고 다음과 같이 requestHandlers.js를 수정합니다.
코드 사본은 다음과 같습니다.
함수 시작 (응답) {
Console.log ( "요청 핸들러 '시작'이 호출되었습니다.");
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 = "제출"value = "텍스트 제출" />'+
'</form>'+
'</body>'+
'</html>';
response.writehead (200, { "content-type": "text/html"});
응답. 쓰기 (신체);
응답 ();
}
함수 업로드 (응답) {
Console.log ( "요청 처리기 '업로드'가 호출되었습니다.");
response.writehead (200, { "content-type": "text/plain"});
response.write ( "Hello Upload");
응답 ();
}
Exports.start = 시작;
Exports.upload = 업로드;
브라우저에서 http : // localhost : 8888/시작을 방문하여 효과를 볼 수 있습니다.
다음으로 사용자가 양식을 제출할 때 게시물 요청을 처리하기 위해 /업로드 요청 핸들러의 트리거링을 구현하려고합니다.
전체 프로세스를 비 블로킹으로 만들려면 Node.js는 게시물 데이터를 많은 작은 데이터 블록으로 분할 한 다음 특정 이벤트를 트리거하여 이러한 작은 데이터 블록을 콜백 기능으로 전달합니다. 여기의 특정 이벤트에는 데이터 이벤트 (새로운 소규모 데이터 블록이 도착했음을 나타냅니다)와 종료 이벤트 (모든 데이터가 수신되었음을 나타냅니다)가 포함됩니다.
우리는 요청 객체에 리스너를 등록하여이를 수행합니다. 여기의 요청 객체는 HTTP 요청이 수신 될 때마다 OnRequest 콜백 함수로 전달됩니다.
코드를 서버에 넣고 다음과 같이 Server.js를 수정합니다.
코드 사본은 다음과 같습니다.
var http = 요구 사항 ( "http");
var url = require ( "url");
함수 시작 (경로, 핸들) {
onrequest (요청, 응답) {
var postdata = "";
var pathname = url.parse (request.url) .pathname;
console.log ( "" + pathname + "에 대한 요청");
request.setencoding ( "utf8");
request.addlistener ( "data", function (postdatachunk) {
postdata += postdatachunk;
console.log ( "포스트 데이터 청크 '" + postDatachunk + "'.");
});
request.addlistener ( "end", function () {
경로 (핸들, PathName, 응답, postdata);
});
}
http.createserver (onrequest) .listen (8888);
Console.log ( "서버가 시작되었습니다.");
}
Exports.start = 시작;
위의 코드는 세 가지 작업을 수행합니다. 먼저 수신 된 데이터의 인코딩 형식을 UTF-8로 설정 한 다음 "Data"이벤트에 대한 리스너를 등록하여 매번 수신 된 새 데이터 블록을 수집하고 PostData 변수에 할당합니다. 마지막으로, 경로를 최종 이벤트 처리기로 요청하는 통화를 이동하여 모든 데이터를 수신 할 때만 해고되고 한 번만 발사됩니다. 이 데이터는 요청 핸들러에서 사용되므로 게시물 데이터를 요청 경로에 전달합니다.
다음으로 /업로드 페이지에 사용자 입력을 표시하십시오
router.js를 변경합시다.
코드 사본은 다음과 같습니다.
기능 경로 (핸들, PathName, 응답, postdata) {
Console.log ( "" + pathname에 대한 요청을 라우팅하려면);
if (typeof handle [pathname] === 'function') {
핸들 [pathname] (응답, postdata);
} 또 다른 {
console.log ( "" + pathname에 대한 요청 핸들러 없음);
response.writehead (404, { "content-type": "text/plain"});
response.write ( "404 찾을 수 없음");
응답 ();
}
}
Exports.route = 경로;
그런 다음 requestHandlers.js에 업로드 요청에 대한 응답에 데이터를 포함합니다.
코드 사본은 다음과 같습니다.
함수 시작 (응답, 사후 데이터) {
Console.log ( "요청 핸들러 '시작'이 호출되었습니다.");
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 = "제출"value = "텍스트 제출" />'+
'</form>'+
'</body>'+
'</html>';
response.writehead (200, { "content-type": "text/html"});
응답. 쓰기 (신체);
응답 ();
}
함수 업로드 (응답, 사후 데이터) {
Console.log ( "요청 처리기 '업로드'가 호출되었습니다.");
response.writehead (200, { "content-type": "text/plain"});
response.write ( "당신은 보냈습니다 :" + postdata);
응답 ();
}
Exports.start = 시작;
Exports.upload = 업로드;
마지막으로해야 할 일은 다음과 같습니다. 현재 요청의 전체 메시지 본문을 요청 라우팅 및 요청 핸들러에 전달합니다. 우리는 게시물 데이터, 관심있는 부분, 요청 라우팅 및 요청 처리기에만 전달해야합니다. 이 예에서 우리가 관심있는 것은 텍스트 필드입니다.
이전에 소개 된 쿼리 스트링 모듈을 사용하여 구현할 수 있습니다.
코드 사본은 다음과 같습니다.
var querystring = require ( "QueryString");
함수 시작 (응답, 사후 데이터) {
Console.log ( "요청 핸들러 '시작'이 호출되었습니다.");
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 = "제출"value = "텍스트 제출" />'+
'</form>'+
'</body>'+
'</html>';
response.writehead (200, { "content-type": "text/html"});
응답. 쓰기 (신체);
응답 ();
}
함수 업로드 (응답, 사후 데이터) {
Console.log ( "요청 처리기 '업로드'가 호출되었습니다.");
response.writehead (200, { "content-type": "text/plain"});
response.write ( "텍스트를 보냈습니다 :"+ querystring.parse (postData) .Text);
응답 ();
}
Exports.start = 시작;
Exports.upload = 업로드;
자, 위의 것은 게시물 데이터 처리에 관한 것입니다.
다음 섹션에서는 이미지 업로드 기능을 구현합니다.