Node.js Express框架

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)