Node.js
Node.js 是能夠在伺服器端運行 JavaScript 的開放原始碼。
Node.js 的基本模組是使用 JavaScript 語言編寫。在 Node.js 出現之前,JavaScript 通常作為用戶端程式設計語言使用,以 JavaScript 寫出的程式常在用戶的瀏覽器上執行。Node.js 的出現,讓 JavaScript 也能在伺服器端編程。
Express
Express 是設計用來建造 Web 應用 和 API,而且針對 Node.js 所量身打造的 Web 應用框架,在 MIT 許可證下作為自由及開放原始碼軟體發行。
安裝 Node.js
請到官方 Download | Node.js 這邊下載安裝檔,安裝過程照預設即可。
設置工作環境 + 安裝 Express
安裝好 Node.js 之後,現在要建立目錄來保留我們的應用程式,並讓它成為我們的工作目錄。
首先開啟 Node.js command prompt 將位置移動到我們希望的工作根目錄(筆者是選擇 D 槽)。mkdir myapp
建立工作資料夾,cd myapp
再一次移動位置到工作目錄。
使用 npm init
指令,為我們的應用程式建立 package.json 檔。
當我們執行 npm init
指令之後,會開始詢問你一些事項,例如:應用程式的名稱和版本。基本上我們都使用預設值,除了一項例外:entry point: (index.js)
這邊是詢問我們想要的主檔名稱( 執行檔 )。筆者是更改成習慣的 app.js
,當然如果讀者覺得預設 index.js
很好,那麼也可以直接使用。
註:npm( Node Package Manager,即『node包管理器』)是 Node.js 預設的,以 JavaScript 編寫的軟體套件管理系統。
最後,我們終於可以將 Express 安裝至工作目錄中,請執行 npm install express
指令即可。但如果想把 Express 儲存在相依關係清單中( dependencies ),請記得後面加 --save 就可以了(筆者是有使用)。
我們開啟看 package.json,就可以發現多了 dependencies,而且裡面擺放著剛剛安裝的 Express,代表我們有成功把 Express 儲存進相依關係清單中。
相信讀者對於 dependencies 的用處還是很模糊,這邊我詳細說明一下。Node.js 有個指令 npm install
,它是把預設套件安裝至 node_modules 資料夾,除此之外它還會安裝 package.json 內 dependencies 的套件。所以簡單來說,讀者可以在自己的工作目錄下,每一項安裝指令都加上 --save,讓 dependencies 記錄下你所有安裝的套件。之後你只要帶著 package.json 走,在任何地方擺放 package.json,並在其目錄下執行 npm install
就可以一次安裝完你之前反覆安裝套件的指令了( npm install 套件名稱
),是不是超級方便的!
安裝 nodemon
這邊筆者特別補充一個好用的套件 - nodemon。
當我們想要跑執行檔時( 如:app.js ),都必續使用 node 指令 node app.js
;但是如果我們還處於開發階段,必須要不斷修改並頻繁地測試內容,這樣豈不是要一直重複打 node app.js
指令嗎?而有了 nodemon,我們就可以省去這些不必要的麻煩動作了!
nodemon 會監視我們的程式碼有無任何更動,一有更動就會自動重新啟動服務,這時我們只要刷新瀏覽器就能看到變化了。這麼棒的 nodemon 我們快來立馬安裝 ,未來就使用 nodemon 來取代 node 執行程式碼,讓開發變得好輕鬆。( 底下 -g 為安裝至全域 )
npm install nodemon -g
簡單實作
好的!安裝完也設置好工作環境,我們來開始簡單的實作吧!
在 myapp 工作目錄下,先手動新增執行檔( 筆者是 app.js,如果讀者是使用預設的話,請命名為 index.js ),並新增下列程式碼:
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World!');
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
require
是匯入的意思,我們把 express 套件匯入進來。並 express()
實體化產生為物件,此物件宣告給 app
來使用。這樣我們就可以藉由 app
來使用 express 物件了!app.get('/',...);
是當路由相符時,也就是指向 URL 根目錄 ( / ),並且 HTTP 的要求方法為 GET,當兩者都達成條件後就會執行後面的 function
,function
內容為 res.send('Hello World!');
即是傳送 Hello World! 來當作回應。
最後 app.listen(3000,...);
是指跑執行檔讓伺服器啟動後,用 port:3000 來接聽連線。所以成功啟動了伺服器,將會印出字樣 Example app listening on port 3000!
。
我們現在就來跑跑看執行檔!一樣開啟 Node.js command prompt 將位置移動到工作目錄,並使用我們之前安裝好的 nodemon 套件來啟動伺服器。一啟動就可以看到字樣 Example app listening on port 3000!,代表我們的伺服器有成功運行起來。
接著在瀏覽器中輸入 http://127.0.0.1:3000/,就可以看到 Respond 傳送回來的 Hello World!
註:因為是在本地測試,所以 URL 根目錄為 127.0.0.1
但對於其他 URL 路徑,伺服器的回應是 404 找不到。可是如果我們在 URL 根目錄加其他相對路徑,伺服器的回應卻是 Cannot GET,代表著找不到 /mypath 此路由的 GET 要求。
我們加入新的路由 /mypath
來測試看看!一樣 HTTP 的要求方法為 GET。為了凸顯跟 Hello World! 字樣的不同,我們在 My Path 前後加入 <b> 粗體字效果。
app.get('/mypath', function (req, res) {
res.send('This Is <b>My Path<b>');
});
因為使用 nodemon 跑伺服器,所以我們只要把剛剛修改的執行檔存好檔,就可以直接在瀏覽器看效果。輸入 http://127.0.0.1:3000/mypath,就可以看到 This Is My Path,而且 My Path 是有粗體字效果!
我本篇的分享就先到這裡,其實這是最簡易 Express 應用程式的建立。它是單一檔案的應用程式,與使用 Express 產生器所產生的結果截然不同。Express 產生器會建立完整的應用程式框架,其中含有眾多 JavaScript 檔案、EJS 範本,以及各種用途的子目錄。我將在下篇和大家好好分享,順便介紹一下 EJS 範本,那麼我們就下次見啦!掰掰~