Express.js

在介紹 Node.js 時我們有提到它可以非常簡易的啟動一個 HTTP 的伺服器服務,但啟動之後他只會執行我們透過程式碼撰寫的內容並顯示,這樣的 HTTP 伺服器是無法用來做複雜的網頁,或說,如果要拿來寫網頁會非常的複雜且不好維護。

所以我們需要這個稱作 Express.js 的 Node.js 模組來協助我們將瀏覽器的 URL 資訊指向我們要呈現給使用的檔案,這樣我們在維護以及撰寫網頁上都會變得方便許多。

官方網站:http://expressjs.com

安裝

因為 Express.js 並不是 Node.js 內建的套件庫,所以我們必須透過 Node.js 的套件管理程式 npm 來安裝這個套件。

請確認你的系統連上網路後,開啟終端機輸入

npm install express --save

如此便會開始安裝,當一切就緒後,我們可以來做點實驗了。

使用

Express 有許多應用方式,但我只介紹在本書中會使用到的幾個應用。

在使用模組之前,你的 Node.js 伺服器檔案必須輸入這段

var express = require('express');

這樣在啟動時才會把 Express 這個模組給引入,然後我們還要建立一個物件然後,我們還要建立一個 Express 的物件,如此才能夠使用它的功能。

var app = express(); //建立 Express 物件

Express 初步認識

在 URL 處理中,我們最常見的處理事件就是 GET 事件了,也就是透過網址 / 後的資訊來選擇要呈現什麼內容給使用者。

建立一個名為 test_express.js 的檔案,然後輸入以下的內容。

var http = require('http');             // 引入 http 模組
var express = require('express');       // 引入 express 模組
var app = express();                    // 建立 express 物件
var server = http.createServer(app);    // 建立 http 物件

// 處理 / (根目錄) 的 URL GET 要求
app.get('/',function(request, response){
    response.end('嗨,這是 / 的內容');
});

// 處理 /test 的 URL GET 要求
app.get('/test',function(request, response){
    response.end('嗨,這是 test 的內容');
});

// 啟動 http 伺服器服務於位址 127.0.0.1 阜號 8080
server.listen(8080,'127.0.0.1',function(){
    console.log('HTTP Server: http://127.0.0.1:8080/');
});

在這個範例程式中,我們設定了兩個 URL GET 的指向位址,其一是 / 也就是只輸入網址,另一個則是 /test

當你在瀏覽器中輸入 http://127.0.0.1:8080/ 時會出現

嗨,這是 / 的內容

而如果輸入 http://127.0.0.1:8080/test 時則會出現

嗨,這是 test 的內容

輸出 HTML

在了解 get 這個方法的功用之後,我們就可以讓 Node.js 的 Server 根據我們的設定來輸出要呈現的 HTML 檔案給相對應的 URL。

不過在繼續下去之前,我們要先來建立兩個基本的 HTML 檔案,分別叫做 index.html 以及 test.html,他們的內容如下:

index.html

<html>
  <head>
    <title>index</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    <h1>天佑冠霆</h1>
    <img src="images/lena.jpg" alt="myJPG">
  </body>
</html>

lena.jpg 可以為任意圖片,並置於 public 的 images 目錄下,稍後會用到。

test.html

<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    <h1>天佑冠霆 TEST 頁面</h1>
  </body>
</html>

建立好這兩個 HTML 檔案之後,我們可以來準備編輯 server.js 的內容,也就是 node.js 的 HTTP 伺服器啟動程式。

server.js

取得 HTML 檔案內容

現在我要輸出 index.html 的內容到 / 的 URL 路徑,我可以利用這段程式碼來做到。

// 讀取 index.html 檔案內容
app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

然後它還可以擴充更多的路徑

// 讀取 index.html 檔案內容
app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

// 讀取 test.html 檔案內容
app.get('/test', function(req, res){
  res.sendFile(__dirname + '/test.html');
});

但這樣的方式並無法直接存取圖片或其他檔案(如:CSS、JavaScript),而且在很多時候,這樣的設定方式是非常惱人的。所以我們需要用另一個方法來處理這件事。

這個方法就是利用 Express.js 所提供的 static 方法,也就是靜態且可被全域訪問的位置。簡單來說,就是直接將放置這些檔案的資料夾可以被 URL 所訪問。

也就是說,假設我希望當我輸入以下這些網址時可以直接讀取到檔案內容,而且我不想要一個一個去設定他們的 get 位址時...

http://127.0.0.1:8080/images/lena.jpg
http://127.0.0.1:8080/css/style.css
http://127.0.0.1:8080/hello.html

而這些資料被放在 public 資料夾中,我可以這樣做

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

這樣當我輸入上述的網址時就可以讓使用這看到那些內容。

當然你也為這些資料設定特殊的路徑,例如

http://127.0.0.1:8080/static/images/lena.jpg
http://127.0.0.1:8080/static/css/style.css
http://127.0.0.1:8080/static/hello.html

那我的 static 方法就要改成這樣

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

/static 就是我所額外指定的 URL 位址。

但這樣做有風險,因為若你不小心把一些重要的伺服器設定檔案也放進那個資料夾中的話,就會有安全上的顧慮,所以在設定與規劃資料夾時要特別注意別讓存有伺服器相關資料的檔案也包含在其中。

綜合以上的功能以及所學後,我們的 server.js 大概長這個樣子

var http = require('http');
var express = require('express');
var app = express();
var server = http.createServer(app);

// 讀取 index.html 檔案內容
app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

// 讀取 test.html 檔案內容
app.get('/test', function(req, res){
  res.sendFile(__dirname + '/test.html');
});

// 你可以嘗試把這段註解掉
app.use(express.static('public'));

// 啟動 http 伺服器服務於位址 127.0.0.1 阜號 8080
server.listen(8080,'127.0.0.1',function(){
    console.log('HTTP Server: http://127.0.0.1:8080/');
});

範例檔案下載

http://goo.gl/bYNyTv