Nodejs-express-framework

提供：Dev Guides
2020年6月22日 (月) 18:26時点におけるMaintenance script (トーク | 投稿記録)による版 (Imported from text file)
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
移動先:案内、検索

Node.js-Express Framework

エクスプレスの概要

Expressは、Webおよびモバイルアプリケーションを開発するための堅牢な機能セットを提供する、最小限で柔軟なNode.js Webアプリケーションフレームワークです。 NodeベースのWebアプリケーションの迅速な開発を促進します。 以下は、Expressフレームワークのコア機能の一部です-

  • HTTPリクエストに応答するミドルウェアを設定できます。
  • HTTPメソッドとURLに基​​づいてさまざまなアクションを実行するために使用されるルーティングテーブルを定義します。
  • 引数をテンプレートに渡すことに基づいて、HTMLページを動的にレンダリングできます。

Expressのインストール

まず、NPMを使用してExpressフレームワークをグローバルにインストールし、ノードターミナルを使用してWebアプリケーションを作成できるようにします。 

$ npm install express --save

上記のコマンドは、インストールをローカルに node_modules ディレクトリに保存し、node_modules内にexpressというディレクトリを作成します。 あなたはエクスプレスと一緒に次の重要なモジュールをインストールする必要があります-

  • body-parser -これは、JSON、Raw、Text、およびURLエンコードされたフォームデータを処理するためのnode.jsミドルウェアです。
  • cookie-parser -Cookieヘッダーを解析し、req.cookiesにCookie名をキーとするオブジェクトを入力します。
  • multer -これは、multipart/form-dataを処理するためのnode.jsミドルウェアです。
$ npm install body-parser --save
$ npm install cookie-parser --save
$ npm install multer --save

Hello worldの例

以下は、サーバーを起動し、ポート8081で接続を待機する非常に基本的なExpressアプリです。 このアプリは、ホームページへのリクエストに対して* Hello World！で応答します。 他のすべてのパスについては、 404 Not Found。*で応答します。 

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("Example app listening at http://%s:%s", host, port)
})

上記のコードをserver.jsという名前のファイルに保存し、次のコマンドで実行します。 

$ node server.js

次の出力が表示されます- 

Example app listening at http://0.0.0.0:8081

任意のブラウザーでhttp://127.0.0.1:8081/を開き、次の結果を確認します。

最初のアプリケーション

リクエストとレスポンス

Expressアプリケーションは、パラメータが request および response オブジェクトであるコールバック関数を使用します。 

app.get('/', function (req, res) {
  //--
})
  • link：/nodejs/nodejs_request_object [リクエストオブジェクト]-リクエストオブジェクトはHTTPリクエストを表し、リクエストクエリ文字列、パラメーター、ボディ、HTTPヘッダーなどのプロパティがあります。
  • link：/nodejs/nodejs_response_object [Response Object]-レスポンスオブジェクトは、ExpressアプリがHTTPリクエストを受け取ったときに送信するHTTPレスポンスを表します。

Cookie、セッション、URLなどを含むHTTPリクエストおよびレスポンスに関連する多くの情報を提供する req および res オブジェクトを印刷できます。

基本的なルーティング

ホームページのHTTPリクエストを処理する基本的なアプリケーションを見てきました。 ルーティングとは、特定のエンドポイントに対するクライアントリクエストに対するアプリケーションの応答方法を決定することです。これは、URI（またはパス）および特定のHTTPリクエストメソッド（GET、POSTなど）です。

Hello Worldプログラムを拡張して、より多くの種類のHTTP要求を処理します。 

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

//This responds with "Hello World" on the homepage
app.get('/', function (req, res) {
   console.log("Got a GET request for the homepage");
   res.send('Hello GET');
})

//This responds a POST request for the homepage
app.post('/', function (req, res) {
   console.log("Got a POST request for the homepage");
   res.send('Hello POST');
})

//This responds a DELETE request for the/del_user page.
app.delete('/del_user', function (req, res) {
   console.log("Got a DELETE request for/del_user");
   res.send('Hello DELETE');
})

//This responds a GET request for the/list_user page.
app.get('/list_user', function (req, res) {
   console.log("Got a GET request for/list_user");
   res.send('Page Listing');
})

//This responds a GET request for abcd, abxcd, ab123cd, and so on
app.get('/ab*cd', function(req, res) {
   console.log("Got a GET request for/ab*cd");
   res.send('Page Pattern Match');
})

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

   console.log("Example app listening at http://%s:%s", host, port)
})

上記のコードをserver.jsという名前のファイルに保存し、次のコマンドで実行します。 

$ node server.js

次の出力が表示されます- 

Example app listening at http://0.0.0.0:8081

これで、http：//127.0.0.1：8081でさまざまなリクエストを試して、server.jsによって生成された出力を確認できます。 以下は、さまざまなURLに対するさまざまな応答を示すスクリーンショットです。

再び表示される画面http://127.0.0.1:8081/list_user

2番目のアプリケーション

再び表示される画面http://127.0.0.1:8081/abcd

第3アプリケーション

再び表示される画面http://127.0.0.1:8081/abcdefg

第4アプリケーション

静的ファイルの提供

Expressは、画像、CSS、JavaScriptなどの静的ファイルを提供する組み込みミドルウェア express.static を提供します。

静的アセットを保持するディレクトリの名前を express.static ミドルウェアに渡して、ファイルの直接提供を開始するだけです。 たとえば、画像、CSS、およびJavaScriptファイルをpublicという名前のディレクトリに保存する場合、これを行うことができます- 

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

次のように、いくつかの画像を public/images サブディレクトリに保存します- 

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

「Hello Word」アプリを変更して、静的ファイルを処理する機能を追加しましょう。 

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("Example app listening at http://%s:%s", host, port)
})

上記のコードをserver.jsという名前のファイルに保存し、次のコマンドで実行します。 

$ node server.js

ブラウザでhttp://127.0.0.1:8081/images/logo.pngを開き、次の結果を確認します。

5番目のアプリケーション

GETメソッド

次に、HTML FORM GETメソッドを使用して2つの値を渡す簡単な例を示します。 server.js内で process_get ルーターを使用して、この入力を処理します。 

<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を変更して、ホームページ要求とHTMLフォームによって送信された入力を処理します。 

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

app.use(express.static('public'));
app.get('/index', function (req, res) {
   res.sendFile( __dirname + "/" + "index" );
})

app.get('/process_get', function (req, res) {
  //Prepare output in JSON format
   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("Example app listening at http://%s:%s", host, port)
})

_http：//127.0.0.1：8081/index_を使用してHTMLドキュメントにアクセスすると、次のフォームが生成されます-

ファーストネーム：

苗字：

今、あなたは名と姓を入力し、結果を見るために送信ボタンをクリックすることができ、それは次の結果を返すはずです- 

{"first_name":"John","last_name":"Paul"}

POSTメソッド

以下は、HTML FORM POSTメソッドを使用して2つの値を渡す簡単な例です。 server.js内で process_get ルーターを使用して、この入力を処理します。 

<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を変更して、ホームページ要求とHTMLフォームから送信された入力を処理します。 

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

//Create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })

app.use(express.static('public'));
app.get('/index', function (req, res) {
   res.sendFile( __dirname + "/" + "index" );
})

app.post('/process_post', urlencodedParser, function (req, res) {
  //Prepare output in JSON format
   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("Example app listening at http://%s:%s", host, port)
})

_http：//127.0.0.1：8081/index_を使用してHTMLドキュメントにアクセスすると、次のフォームが生成されます-

ファーストネーム：

苗字：

今、あなたは名と姓を入力し、次の結果を見るために送信ボタンをクリックすることができます- 

{"first_name":"John","last_name":"Paul"}

ファイルアップロード

次のHTMLコードは、ファイルアップローダーフォームを作成します。 このフォームのメソッド属性は POST に設定され、enctype属性は multipart/form-data に設定されます 

<html>
   <head>
      <title>File Uploading Form</title>
   </head>

   <body>
      <h3>File Upload:</h3>
      Select a file to upload: <br/>

      <form action = "http://127.0.0.1:8081/file_upload" method = "POST"
         enctype = "multipart/form-data">
         <input type="file" name="file" size="50"/>
         <br/>
         <input type = "submit" value = "Upload File"/>
      </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/'}));

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

app.post('/file_upload', function (req, res) {
   console.log(req.files.file.name);
   console.log(req.files.file.path);
   console.log(req.files.file.type);
   var file = __dirname + "/" + req.files.file.name;

   fs.readFile( req.files.file.path, function (err, data) {
      fs.writeFile(file, data, function (err) {
         if( err ) {
            console.log( err );
            } else {
               response = {
                  message:'File uploaded successfully',
                  filename:req.files.file.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("Example app listening at http://%s:%s", host, port)
})

_http：//127.0.0.1：8081/index_を使用してHTMLドキュメントにアクセスすると、次のフォームが生成されます- 

File Upload:
Select a file to upload:



NOTE: This is just dummy form and would not work, but it must work at your server.

クッキー管理

次のミドルウェアオプションを使用して、同じものを処理できるNode.jsサーバーにCookieを送信できます。 以下は、クライアントから送信されたすべてのCookieを印刷する簡単な例です。 

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)
「https://www.finddevguides.com/index.php?title=Nodejs-express-framework&oldid=3709」から取得
Powered by MediaWiki