Node.js Express 框架

Express 簡介

Express 是一個簡潔而靈活的 node.js Web應用框架, 提供了一係列強大特性幫助你創建各種 Web 應用，和豐富的 HTTP 工具。

使用 Express 可以快速地搭建一個完整功能的網站。

Express 框架核心特性：

可以設置中間件來響應 HTTP 請求。
定義了路由表用於執行不同的 HTTP 請求動作。
可以通過向模板傳遞參數來動態渲染 HTML 頁麵。

安裝 Express

安裝 Express 並將其保存到依賴列表中：

$ cnpm install express --save

以上命令會將 Express 框架安裝在當前目錄的 node_modules 目錄中， node_modules 目錄下會自動創建 express 目錄。以下幾個重要的模塊是需要與 express 框架一起安裝的：

body-parser - node.js 中間件，用於處理 JSON, Raw, Text 和 URL 編碼的數據。
cookie-parser - 這就是一個解析Cookie的工具。通過req.cookies可以取到傳過來的cookie，並把它們轉成對象。
multer - node.js 中間件，用於處理 enctype="multipart/form-data"（設置表單的MIME編碼）的表單數據。

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

安裝完後，我們可以查看下 express 使用的版本號：

$ cnpm list express
/data/www/node
└── express@4.15.2  -> /Users/tianqixin/www/node/node_modules/.4.15.2@express

第一個 Express 框架實例

接下來我們使用 Express 框架來輸出 "Hello World"。

以下實例中我們引入了 express 模塊，並在客戶端發起請求後，響應 "Hello World" 字符串。

創建 express_demo.js 文件，代碼如下所示：

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，結果如下圖所示：

請求和響應

Express 應用使用回調函數的參數： request 和 response 對象來處理請求和響應的數據。

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

request 和 response 對象的具體介紹：

Request 對象 - request 對象表示 HTTP 請求，包含了請求查詢字符串，參數，內容，HTTP 頭部等屬性。常見屬性有：

req.app：當callback為外部文件時，用req.app訪問express的實例
req.baseUrl：獲取路由當前安裝的URL路徑
req.body / req.cookies：獲得「請求主體」/ Cookies
req.fresh / req.stale：判斷請求是否還「新鮮」
req.hostname / req.ip：獲取主機名和IP地址
req.originalUrl：獲取原始請求URL
req.params：獲取路由的parameters
req.path：獲取請求路徑
req.protocol：獲取協議類型
req.query：獲取URL的查詢參數串
req.route：獲取當前匹配的路由
req.subdomains：獲取子域名
req.accepts()：檢查可接受的請求的文檔類型
req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages：返回指定字符集的第一個可接受字符編碼
req.get()：獲取指定的HTTP請求頭
req.is()：判斷請求頭Content-Type的MIME類型

Response 對象 - response 對象表示 HTTP 響應，即在接收到請求時向客戶端發送的 HTTP 響應數據。常見屬性有：

res.app：同req.app一樣
res.append()：追加指定HTTP頭
res.set()在res.append()後將重置之前設置的頭
res.cookie(name，value [，option])：設置Cookie
opition: domain / expires / httpOnly / maxAge / path / secure / signed
res.clearCookie()：清除Cookie
res.download()：傳送指定路徑的文件
res.get()：返回指定的HTTP頭
res.json()：傳送JSON響應
res.jsonp()：傳送JSONP響應
res.location()：隻設置響應的Location HTTP頭，不設置狀態碼或者close response
res.redirect()：設置響應的Location HTTP頭，並且設置狀態碼302
res.render(view,[locals],callback)：渲染一個view，同時向callback傳遞渲染後的字符串，如果在渲染過程中有錯誤發生next(err)將會被自動調用。callback將會被傳入一個可能發生的錯誤以及渲染後的頁麵，這樣就不會自動輸出了。
res.send()：傳送HTTP響應
res.sendFile(path [，options] [，fn])：傳送指定路徑的文件 -會自動根據文件extension設定Content-Type
res.set()：設置HTTP頭，傳入object可以一次設置多個頭
res.status()：設置HTTP狀態碼
res.type()：設置Content-Type的MIME類型

路由

我們已經了解了 HTTP 請求的基本應用，而路由決定了由誰(指定腳本)去響應客戶端請求。

在HTTP請求中，我們可以通過路由提取出請求的URL以及GET/POST參數。

接下來我們擴展 Hello World，添加一些功能來處理更多類型的 HTTP 請求。

創建 express_demo2.js 文件，代碼如下所示：

express_demo2.js 文件代碼：

執行以上代碼：

$ 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，結果如下圖所示：

靜態文件

Express 提供了內置的中間件 express.static 來設置靜態文件如：圖片， CSS, JavaScript 等。

你可以使用 express.static 中間件來設置靜態文件路徑。例如，如果你將圖片， CSS, JavaScript 文件放在 public 目錄下，你可以這麼寫：

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

我們可以到 public/images 目錄下放些圖片,如下所示：

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

讓我們再修改下 "Hello World" 應用添加處理靜態文件的功能。

創建 express_demo3.js 文件，代碼如下所示：

express_demo3.js 文件代碼：

var express = require('express'); var app = express(); app.use('/public', 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

執行以上代碼：

在瀏覽器中訪問 http://127.0.0.1:8081/public/images/logo.png（本實例采用了菜鳥教程的 logo），結果如下圖所示：

GET 方法

以下實例演示了在表單中通過 GET 方法提交兩個參數，我們可以使用 server.js 文件內的 process_get 路由器來處理輸入：

index.html 文件代碼：

<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 文件代碼：

執行以上代碼：

node server.js 
應用實例，訪問地址為 http://0.0.0.0:8081

瀏覽器訪問 http://127.0.0.1:8081/index.html，如圖所示：

現在你可以向表單輸入數據，並提交，如下演示：

POST 方法

以下實例演示了在表單中通過 POST 方法提交兩個參數，我們可以使用 server.js 文件內的 process_post 路由器來處理輸入：

index.html 文件代碼：

<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 文件代碼：

執行以上代碼：

$ node server.js
應用實例，訪問地址為 http://0.0.0.0:8081

瀏覽器訪問 http://127.0.0.1:8081/index.html，如圖所示：

現在你可以向表單輸入數據，並提交，如下演示：

文件上傳

以下我們創建一個用於上傳文件的表單，使用 POST 方法，表單 enctype 屬性設置為 multipart/form-data。

index.html 文件代碼：

<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 文件代碼：

執行以上代碼：

$ node server.js 
應用實例，訪問地址為 http://0.0.0.0:8081

瀏覽器訪問 http://127.0.0.1:8081/index.html，如圖所示：

現在你可以向表單輸入數據，並提交，如下演示：

Cookie 管理

我們可以使用中間件向 Node.js 服務器發送 cookie 信息，以下代碼輸出了客戶端發送的 cookie 信息：

express_cookie.js 文件代碼：

// express_cookie.js 文件 var express = require('express') var cookieParser = require('cookie-parser') var util = require('util'); var app = express() app.use(cookieParser()) app.get('/', function(req, res) { console.log("Cookies: " + util.inspect(req.cookies)); }) app.listen(8081)

執行以上代碼：

$ node express_cookie.js

現在你可以訪問 http://127.0.0.1:8081 並查看終端信息的輸出，如下演示：

相關資料

Express官網： http://expressjs.com/
Express4.x API 中文版： Express4.x API Chinese
Express4.x API：http://expressjs.com/zh-cn/4x/api.html

server.address().address 會返回 : 的問題，查證相關文檔

As the docs say,

Begin accepting connections on the specified port and hostname. If the hostname is omitted, the server will accept connections on any IPv6 address (::) when IPv6 is available, or any IPv4 address (0.0.0.0) otherwise. A port value of zero will assign a random port.

So, the following code would print running at http://:::3456:

var express      = require('express');
var app          = express();
var server = app.listen(3456, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log('running at http://' + host + ':' + port)
});

But if you add an explicit hostname:

var server = app.listen(3456, "127.0.0.1", function () {

It would print what you want to see: running at http://127.0.0.1:3456

Also you might want to use some IP lib as pointed in this answer

也就是說默認為 IPV6 模式了，至於如何改可能要研究下，所以地址最好顯示聲明為 "127.0.0.1" 或 localhost。

Allen4年前 (2018-10-15)

在文件上傳的 server.js 代碼中:

res.end( JSON.stringify( response ) );

該語句執行後，如果保存路徑存在中文字符，直接輸出會產生保存路徑中文部分亂碼的問題，需要在此語句之前聲明頭，後可正常輸出中文字符：

res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});
res.end( JSON.stringify( response ) );

Yume4年前 (2018-10-23)

直接從服務端向前端返回 json 數據，如果包含中文的話，會顯示亂碼，web 端顯示的 HTML 頁麵不包含編碼信息，HTML 默認編碼可能是 GBK：

var response = {
       "first_name":'名',
       "last_name":'姓'
   };
res.end(JSON.stringify(response));

應該添加：

res.write('<head><meta charset="utf-8"></head>');
或
res.write('<head><meta charset="Unicode"></head>');

臨淵4年前 (2019-08-20)

因為希望把上載文件放在同一個 folder/tmp/ 和使用原檔名, 所以修改了一下:

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

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

app.use('/public', 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 = "tmp/" + req.files[0].originalname;
   console.log("the name is: "+des_file);
   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)

})

執行後, 上載檔案名稱不會變成編碼, 會使用原來檔案名稱, 並且存儲在 tmp 子目錄下。

Simon3年前 (2019-11-16)

菜鳥教程 -- 學的不僅是技術，更是夢想！

Node.js Express 框架

Express 簡介

安裝 Express

第一個 Express 框架實例

express_demo.js 文件代碼：

請求和響應

路由

express_demo2.js 文件代碼：

靜態文件

express_demo3.js 文件代碼：

GET 方法

index.html 文件代碼：

server.js 文件代碼：

POST 方法

index.html 文件代碼：

server.js 文件代碼：

文件上傳

index.html 文件代碼：

server.js 文件代碼：

Cookie 管理

express_cookie.js 文件代碼：

相關資料

4 篇筆記寫筆記

點我分享筆記

菜鳥教程 -- 學的不僅是技術，更是夢想！

Node.js Express 框架

Express 簡介

安裝 Express

第一個 Express 框架實例

express_demo.js 文件代碼：

請求和響應

路由

express_demo2.js 文件代碼：

靜態文件

express_demo3.js 文件代碼：

GET 方法

index.html 文件代碼：

server.js 文件代碼：

POST 方法

index.html 文件代碼：

server.js 文件代碼：

文件上傳

index.html 文件代碼：

server.js 文件代碼：

Cookie 管理

express_cookie.js 文件代碼：

相關資料

4 篇筆記 寫筆記

點我分享筆記

微信關注

4 篇筆記寫筆記