これまでのところ、私たちが作成したサーバーには実用的な使用がないため、実用的で有用な機能を実装し始めます。
必要なのは、ユーザーがファイルを選択し、ファイルをアップロードしてから、ブラウザにアップロードされたファイルを表示することです。
最初に、ユーザーがコンテンツを入力するにはTextAreaが必要です。次に、POSTリクエストを介してサーバーに送信します。
開始イベントハンドラーにコードを追加し、次のようにrequesthandlers.jsを変更します。
コードコピーは次のとおりです。
関数開始(応答){
console.log( "request handler 'start'が呼び出されました。");
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>'+
'<入力型= "submit" value = "text" />'+
'</form>'+
'</body>'+
'</html>';
Response.writehead(200、{"content-type": "text/html"});
Response.write(body);
Response.End();
}
関数アップロード(応答){
console.log( "要求ハンドラー 'アップロード'が呼び出されました。");
Response.writehead(200、{"content-type": "text/plain"});
Response.Write( "Hello Upload");
Response.End();
}
exports.start = start;
exports.upload = upload;
http:// localhost:8888にアクセスして、ブラウザで開始することで効果を確認できます。
次に、ユーザーがフォームを送信したときに、 /アップロード要求ハンドラーのトリガーを実装して、POSTリクエストを処理するように実装します。
プロセス全体を非ブロッキングするために、node.jsは投稿データを多くの小さなデータブロックに分割し、これらの小さなデータブロックを特定のイベントをトリガーしてコールバック関数に渡します。ここでの特定のイベントには、データイベント(新しい小さなデータブロックが到着したことを示す)と終了イベント(すべてのデータが受信されたことを示す)が含まれます。
これは、リクエストオブジェクトにリスナーを登録することで行います。ここのリクエストオブジェクトは、HTTPリクエストを受信するたびにOnRequestコールバック関数に渡されます。
コードをサーバーに配置し、次のようにserver.jsを変更します。
コードコピーは次のとおりです。
var http = require( "http");
var url = require( "url");
関数開始(ルート、ハンドル){
function onrequest(request、response){
var postdata = "";
var pathname = url.parse(request.url).pathname;
console.log( "request for" + pathname + "受信");
request.setEncoding( "utf8");
request.addlistener( "data"、function(postdatachunk){
postdata += postdatachunk;
console.log( "Post Data Chunk '" + postdatachunk + "'。");
});
request.addlistener( "end"、function(){
ルート(ハンドル、パス名、応答、ポストダタ);
});
}
http.createserver(onrequest).listen(8888);
console.log( "サーバーが開始されました。");
}
exports.start = start;
上記のコードは3つのことを行います。最初に、受信したデータのエンコード形式をUTF-8に設定し、「データ」イベントのリスナーを登録して、毎回新しいデータブロックを収集し、PostData変数に割り当てます。最後に、すべてのデータが受信されたときにのみ発射され、1回だけ発射されることを確認するために、エンドイベントハンドラーへのルートを要求するコールを移動します。また、このデータはリクエストハンドラーによって使用されるため、ポストデータをリクエストルートに渡します。
次に、 /アップロードページに、ユーザー入力を表示します
router.jsを変更しましょう:
コードコピーは次のとおりです。
関数ルート(ハンドル、パス名、応答、ポストダタ){
console.log( "" + pathnameのリクエストをルーティングしようとしています);
if(typeof handle [pathname] === 'function'){
ハンドル[pathname](response、postdata);
} それ以外 {
console.log( "" + pathnameのリクエストハンドラーは見つかりません);
Response.writehead(404、{"content-type": "text/plain"});
Response.write( "404 not not fund");
Response.End();
}
}
exports.route = route;
次に、requesthandlers.jsで、アップロード要求への応答にデータを含めます。
コードコピーは次のとおりです。
関数開始(応答、postdata){
console.log( "request handler 'start'が呼び出されました。");
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>'+
'<入力型= "submit" value = "text" />'+
'</form>'+
'</body>'+
'</html>';
Response.writehead(200、{"content-type": "text/html"});
Response.write(body);
Response.End();
}
関数アップロード(Response、Postdata){
console.log( "要求ハンドラー 'アップロード'が呼び出されました。");
Response.writehead(200、{"content-type": "text/plain"});
Response.write( "送信:" + postdata);
Response.End();
}
exports.start = start;
exports.upload = upload;
最後にしなければならないことは、現在、リクエストのメッセージ本文全体をリクエストルーティングとリクエストハンドラーに渡すことです。 Requestデータをリクエストルーティングとリクエストハンドラーに渡すだけです。私たちの例では、私たちが興味を持っているのはテキストフィールドです。
以前に導入されたクエリストリングモジュールを使用して実装できます。
コードコピーは次のとおりです。
var querystring = require( "querystring");
関数開始(応答、postdata){
console.log( "request handler 'start'が呼び出されました。");
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>'+
'<入力型= "submit" value = "text" />'+
'</form>'+
'</body>'+
'</html>';
Response.writehead(200、{"content-type": "text/html"});
Response.write(body);
Response.End();
}
関数アップロード(Response、Postdata){
console.log( "要求ハンドラー 'アップロード'が呼び出されました。");
Response.writehead(200、{"content-type": "text/plain"});
respons.write( "テキストを送信しました:"+ querystring.parse(postdata).text);
Response.End();
}
exports.start = start;
exports.upload = upload;
OK、上記はすべてポストデータの処理に関するものです。
次のセクションでは、画像のアップロード機能を実装します。