Node.jsのExpressのフレームワーク

前：Node.jsのウェブモジュール

次へ：Node.jsのRESTfulなAPI

エクスプレスプロフィール

エクスプレスでは、Webアプリケーション、リッチのHTTPさまざまなツールを作成するための強力な機能の範囲を提供し、シンプルで柔軟なNode.jsのWebアプリケーションフレームワークです。

使用Expressは、すぐに完全に機能するウェブサイトを設定することができます。

エクスプレスフレームコア機能：

ミドルウェアは、HTTPリクエストに応答するように設定することができます。
これは、別のHTTP要求アクションを実行するためのルーティングテーブルを定義します。
あなたは、動的にHTMLページをレンダリングするテンプレートにパラメータを渡すことができます。

インストールエクスプレス

インストールExpressと、リストに依存しているためにそれを保存します。

$ npm install express --save

上記のコマンドは、現在のディレクトリのフレームがマウントされているnode_modulesディレクトリを発現する、ディレクトリが自動的にnode_modulesディレクトリを表現作成されます。 いくつかの重要なニーズや特急モジュールは、フレームワークにインストールされています：

ボディパーサー-処理のためのミドルウェア、JSON、生、テキストやURLエンコードされたデータをNode.jsの。
クッキーパーサ-これはクッキーを解析するためのツールです。req.cookiesによってクッキーの上を通過するために得ることができ、およびオブジェクトに変換します。
multer -のNode.jsにenctype = "multipart / form-データを処理するためのミドルウェア「（セット・フォームのMIMEエンコード）フォームデータ。

$ npm install body-parser --save
$ npm install cookie-parser --save
$ npm install multer --save

第1のフレームワークのインスタンスエクスプレス

次に、私たちは、「Hello World」の出力にExpressのフレームワークを使用します。

次の例では、我々は、文字列 "Hello World"に対するレスポンスを特急モジュールを導入し、要求元のクライアント。

express_demo.jsファイルを作成し、以下のように、コードは次のとおりです。

//express_demo.js 文件
var express = require('express');
var app = express();

app.get('/', function (req, res) {
   res.send('Hello World');
})

var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("应用实例，访问地址为 http://%s:%s", host, port)

})

上記のコードを実行します。

$ node express_demo.js 
应用实例，访问地址为 http://0.0.0.0:8081

ブラウザでアクセスhttp://127.0.0.1:8081は、結果は以下に示すように：

リクエストとレスポンス

データの要求と応答を処理するために要求と応答のオブジェクト：エクスプレスアプリケーションは、コールバック関数のパラメータを使用しています。

app.get('/', function (req, res) {
   // --
})

特定の要求と応答オブジェクトを紹介：

リクエスト・オブジェクト -リクエストオブジェクトは、HTTPリクエストは、リクエストのクエリ文字列パラメータ、コンテンツ、HTTPヘッダー属性が含まれて表しています。共通の属性は次のとおりです。

req.app：アクセス権を持つ外部ファイルへのコールバックは、req.app例を表現します
req.baseUrl：URLルーティングは、現在インストールされている取得します
req.body / req.cookies：取得「リクエストボディ」/クッキー
req.fresh / req.stale：要求はまだ "新鮮"であるかどうかを判断します
req.hostname / req.ip：ホスト名とIPアドレスを取得
req.originalUrl：元の要求のURLを取得
req.params：ルートパラメータを取得します
req.path：リクエストパスを取得します。
req.protocol：プロトコルタイプを取得します。
req.query：URLクエリ文字列パラメータを取得します。
req.route：現在の一致するルートを取得
req.subdomains：サブドメインを取得します。
req.accpetsは（）：要求タイプを受け入れ要求ヘッダーをチェック
req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages
req.get（）：指定されたHTTPリクエストヘッダを取得します。
req.is（）：リクエストヘッダのContent-Type MIMEタイプの場合

応答オブジェクト -応答オブジェクトは、HTTPレスポンス、クライアント応答データに送信された要求を受信したときに、HTTPを表します。共通の属性は次のとおりです。

res.app：req.appと同じ
res.appendは（）：追加のHTTPヘッダーを指定します。
最初res.append前res.setは、（）（）の設定をリセットします
res.cookie（名前、値[オプション]）：設定されたCookie
opition：ドメイン/有効期限が切れる/ HttpOnlyの/ MAXAGE /パス/安全な/署名しました
res.clearCookie（）：クリアクッキー
res.downloadは（）：ファイルの伝送パスを指定します
res.get（）：HTTPヘッダーを返します。
res.json（）：転送JSONレスポンス
res.jsonp（）：JSONP応答を転送
res.location（）：レスポンスのステータスコードを設定するか、または近接していない、唯一の場所HTTPレスポンスヘッダを設定
res.redirect（）：ロケーションHTTPレスポンスヘッダを設定し、ステータスコード302を設定します
res.send（）：HTTPレスポンス転送
res.sendFile（パス[、オプション] [、FN]）：ファイルの送信経路を指定しますが - 自動的にファイルに基づいて、Content-Typeの拡張を設定されています
res.set（）：あなたは複数の着信オブジェクトヘッドを設定することができ、HTTPヘッダーを設定
res.status（）：HTTPステータスコードを設定します
res.type（）：Content-TypeのMIMEタイプを設定します

ルーティング

我々はすでにクライアントの要求に応答する（スクリプトを指定）誰によって決定された基本アプリケーションのHTTPリクエストとルートを知っています。

HTTP要求では、URLルーティングを抽出し、/ POSTのパラメータ要求をGETすることができます。

次に、HTTPリクエストのより多くの種類を処理するためにいくつかの機能を追加するために、Hello Worldのを拡張します。

express_demo2.jsファイルを作成し、以下のように、コードは次のとおりです。

var express = require('express');
var app = express();

//  主页输出 "Hello World"
app.get('/', function (req, res) {
   console.log("主页 GET 请求");
   res.send('Hello GET');
})


//  POST 请求
app.post('/', function (req, res) {
   console.log("主页 POST 请求");
   res.send('Hello POST');
})

//  /del_user 页面响应
app.get('/del_user', function (req, res) {
   console.log("/del_user 响应 DELETE 请求");
   res.send('删除页面');
})

//  /list_user 页面 GET 请求
app.get('/list_user', function (req, res) {
   console.log("/list_user GET 请求");
   res.send('用户列表页面');
})

// 对页面 abcd, abxcd, ab123cd, 等响应 GET 请求
app.get('/ab*cd', function(req, res) {   
   console.log("/ab*cd GET 请求");
   res.send('正则匹配');
})


var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("应用实例，访问地址为 http://%s:%s", host, port)

})

上記のコードを実行します。

$ node express_demo2.js 
应用实例，访问地址为 http://0.0.0.0:8081

次に、効果を確認するために、http://127.0.0.1:8081別のアドレスにアクセスしようとすることができます。

ブラウザでのアクセスhttp://127.0.0.1:8081/list_user、以下に示すような結果：

ブラウザでのアクセスhttp://127.0.0.1:8081/abcd、以下に示すような結果：

ブラウザでアクセスhttp://127.0.0.1:8081/abcdefgは、結果は以下に示すように：

静的ファイル

ように画像、CSS、JavaScriptと：エクスプレスのような静的ファイルを設定する組み込みミドルウェアexpress.staticを提供します。

あなたは、静的ファイルのパスを設定するexpress.staticミドルウェアを使用することができます。 たとえば、あなたが描く場合、CSSは、パブリックディレクトリ内のJavaScriptファイルは、次のように記述することができます。

app.use(express.static('public'));

以下のように、いくつかの写真を委任された私たちは、公共/ imagesディレクトリに行くことができます：

node_modules
server.js
public/
public/images
public/images/logo.png

私たちは、次の「Hello Wordは、「アプリケーション処理機能静的ファイルを追加、変更してみましょう。

express_demo3.jsファイルを作成し、以下のように、コードは次のとおりです。

var express = require('express');
var app = express();

app.use(express.static('public'));

app.get('/', function (req, res) {
   res.send('Hello World');
})

var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("应用实例，访问地址为 http://%s:%s", host, port)

})

上記のコードを実行します。

$ node express_demo3.js 
应用实例，访问地址为 http://0.0.0.0:8081

上記のコードを実行します。

GETメソッド

次の例では、GETメソッドにより送信されたフォームで2つのパラメータを示している、我々は、入力を処理するために、ファイル内のルータserver.jsprocess_getを使用することができます。

index.htmファイルのコードは次のとおりです。

<html>
<body>
<form action="http://127.0.0.1:8081/process_get" method="GET">
First Name: <input type="text" name="first_name">  <br>

Last Name: <input type="text" name="last_name">
<input type="submit" value="Submit">
</form>
</body>
</html>

server.jsファイルのコードは次のとおりです。

var express = require('express');
var app = express();

app.use(express.static('public'));

app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.get('/process_get', function (req, res) {

   // 输出 JSON 格式
   response = {
       first_name:req.query.first_name,
       last_name:req.query.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("应用实例，访问地址为 http://%s:%s", host, port)

})

上記のコードを実行します。

node server.js 
应用实例，访问地址为 http://0.0.0.0:8081

ブラウザのアクセスhttp://127.0.0.1:8081/index.htm、図示のように：

今、あなたは、フォームにデータを入力し、次のプレゼンテーションを提出することができます：

POSTメソッド

次の例では、我々は、入力を処理するために、ファイル内のルータserver.jsprocess_postを使用することができ、フォームを送信するPOSTメソッドを介して、2つのパラメータを示しています。

次のように変更されたindex.htmファイルコード：

<html>
<body>
<form action="http://127.0.0.1:8081/process_post" method="POST">
First Name: <input type="text" name="first_name">  <br>

Last Name: <input type="text" name="last_name">
<input type="submit" value="Submit">
</form>
</body>
</html>

次のように変更されたserver.jsファイルのコード：

var express = require('express');
var app = express();
var bodyParser = require('body-parser');

// 创建 application/x-www-form-urlencoded 编码解析
var urlencodedParser = bodyParser.urlencoded({ extended: false })

app.use(express.static('public'));

app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.post('/process_post', urlencodedParser, function (req, res) {

   // 输出 JSON 格式
   response = {
       first_name:req.body.first_name,
       last_name:req.body.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("应用实例，访问地址为 http://%s:%s", host, port)

})

上記のコードを実行します。

$ node server.js
应用实例，访问地址为 http://0.0.0.0:8081

ブラウザのアクセスhttp://127.0.0.1:8081/index.htm、図示のように：

今、あなたは、フォームにデータを入力し、次のプレゼンテーションを提出することができます：

ファイルのアップロード

私たちは、POSTメソッドを使用してファイルをアップロードするためのフォームを作成するには、以下の、フォームのenctype属性をmultipart / form-dataに設定します。

次のように変更されたindex.htmファイルコード：

<html>
<head>
<title>文件上传表单</title>
</head>
<body>
<h3>文件上传：</h3>
选择一个文件上传: <br />
<form action="/file_upload" method="post" enctype="multipart/form-data">
<input type="file" name="image" size="50" />
<br />
<input type="submit" value="上传文件" />
</form>
</body>
</html>

次のように変更されたserver.jsファイルのコード：

var express = require('express');
var app = express();
var fs = require("fs");

var bodyParser = require('body-parser');
var multer  = require('multer');

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(multer({ dest: '/tmp/'}).array('image'));

app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.post('/file_upload', function (req, res) {

   console.log(req.files[0]);  // 上传的文件信息

   var des_file = __dirname + "/" + req.files[0].originalname;
   fs.readFile( req.files[0].path, function (err, data) {
        fs.writeFile(des_file, data, function (err) {
         if( err ){
              console.log( err );
         }else{
               response = {
                   message:'File uploaded successfully', 
                   filename:req.files[0].originalname
              };
          }
          console.log( response );
          res.end( JSON.stringify( response ) );
       });
   });
})

var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("应用实例，访问地址为 http://%s:%s", host, port)

})

上記のコードを実行します。

$ node server.js 
应用实例，访问地址为 http://0.0.0.0:8081

ブラウザのアクセスhttp://127.0.0.1:8081/index.htm、図示のように：

今、あなたは、フォームにデータを入力し、次のプレゼンテーションを提出することができます：

クッキー管理

私たちは、ミドルウェアを使用することができます次のコードは、クッキー情報がクライアントによって送信された出力、Node.jsのサーバーにCookie情報を送信します。

// express_cookie.js 文件
var express      = require('express')
var cookieParser = require('cookie-parser')

var app = express()
app.use(cookieParser())

app.get('/', function(req, res) {
  console.log("Cookies: ", req.cookies)
})

app.listen(8081)

上記のコードを実行します。

$ node express_cookie.js

今、あなたは、次のプレゼンテーションを出力端末情報にアクセスしてhttp://127.0.0.1:8081表示することができます。

Node.js コース

Node.jsのExpressのフレームワーク

エクスプレスプロフィール

インストールエクスプレス

第1のフレームワークのインスタンスエクスプレス

リクエストとレスポンス

ルーティング

静的ファイル

GETメソッド

POSTメソッド

ファイルのアップロード

クッキー管理

関連情報