Node.js Express框架 - tw511教學網

Express 介紹

Express是一個最小的，靈活的Node.js Web應用程式框架，它提供了一套強大的功能來開發Web和移動應用程式。它有助於基於Node Web應用程式的快速開發。下面是一些Express框架的核心功能：

允許設立中介軟體響應HTTP請求
定義了用於執行基於HTTP方法和URL不同動作的路由表
允許動態渲染基於引數傳遞給模板HTML頁面

安裝Express

首先，安裝Express 框架全域性使用NPM，以便它可以被用來使用Node終端建立Web應用程式。

$ npm install express --save

上面的命令在本地node_modules目錄儲存安裝，並建立一個目錄express在node_modules裡邊。還有，應該使用express安裝以下幾個重要的模組：

body-parser - 這是一個Node.js中介軟體處理JSON，Raw，文字和URL編碼的表單資料
cookie-parser - 解析Cookie頭和填充req.cookies通過cookie名字鍵控物件
multer - 這是一個Node.js的中介軟體處理multipart/form-data

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

Hello world 範例

下面是一個非常基本的Express應用程式，它會啟動伺服器，並偵聽埠3000等待連線。這個應用程式使用"Hello World! "回應！為請求網頁。對於所有其他路徑，這將響應一個404表示未找到。

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/，看看下面的結果。

Request & Response

Express應用程式利用了一個回撥函式，它的引數是request和response物件。

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

您可以檢視兩個物件更詳細的資訊：

Request物件 - 請求物件表示HTTP請求和具有用於請求查詢字串，引數，主體，HTTP報頭，等等的屬性。
Response物件 - 響應物件表示HTTP響應Express應用程式傳送時，它得到一個HTTP請求。

您可以列印提供有關HTTP請求和響應，包括 cookies, sessions, URL 等資訊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

螢幕再次顯示 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

讓我們修改“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

GET 方法

下面是一個簡單的例子，通過使用HTML表單使用GET方法傳遞兩個值。我們將使用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>

讓我們儲存上面的程式碼index.html，並修改server.js處理首頁請示以及輸入HTML表單傳送。

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

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

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

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 存取HTML文件將產生以下表單：

現在，您可以輸入名字和姓氏，然後單擊提交按鈕檢視結果，它應該給結果如下：

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

POST 方法

下面是一個簡單的例子，通過使用HTML表單POST方法提交兩個值。我們將使用 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.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.html', function (req, res) {
   res.sendFile( __dirname + "/" + "index.html" );
})

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)

})

現在存取HTML文件使用 http://127.0.0.1:8081/index.html 將產生以下表單：

現在，可以輸入名字和姓氏，然後單擊提交按鈕檢視結果，它應該給結果如下：

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

File 上傳

下面的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.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.html', function (req, res) {
   res.sendFile( __dirname + "/" + "index.html" );
})

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)

})

現在存取HTML文件使用 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.

Cookies 管理

可以傳送cookie來Node.js載入伺服器，它可以處理使用下面的中介軟體選項。下面是一個簡單的例子來列印所有用戶端傳送的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)