Node.js-Express Framework

Expressの概要

Expressは、最小限で柔軟なNode.js Webアプリケーションフレームワークであり、Webおよびモバイルアプリケーションを開発するための堅牢な機能セットを提供します。これにより、ノードベースの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ヘッダーを解析し、Cookie名でキー設定されたオブジェクトをreq.cookiesに入力します。

  • multer −これはmultipart / form-dataを処理するためのnode.jsミドルウェアです。

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

Helloworldの例

以下は、サーバーを起動し、ポート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) {
   // --
})

  • リクエストオブジェクト-リクエストオブジェクトはHTTPリクエストを表し、リクエストクエリ文字列、パラメータ、本文、HTTPヘッダーなどのプロパティがあります。

  • 応答オブジェクト-応答オブジェクトは、ExpressアプリがHTTP要求を受け取ったときに送信するHTTP応答を表します。

印刷できます req そして res Cookie、セッション、URLなど、HTTP要求と応答に関連する多くの情報を提供するオブジェクト。

基本的なルーティング

ホームページの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

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

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

静的ファイルの提供

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

静的アセットを保持するディレクトリの名前をに渡す必要があります express.staticファイルの直接提供を開始するミドルウェア。たとえば、画像、CSS、JavaScriptファイルをpublicという名前のディレクトリに保存すると、次のことができます。

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

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

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

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

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を開き、次の結果を確認します。

GETメソッド

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

<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>

上記のコードをindex.htmに保存し、server.jsを変更して、ホームページのリクエストとHTMLフォームから送信された入力を処理しましょう。

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) {
   // 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.htmを使用してHTMLドキュメントにアクセスすると、次のフォームが生成されます-

これで、姓名を入力し、[送信]ボタンをクリックして結果を確認すると、次の結果が返されます。

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

POSTメソッド

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

<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>

上記のコードをindex.htmに保存し、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.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

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.htmを使用して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>

上記のコードをindex.htmに保存し、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.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

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.htmを使用して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)
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved