Node.js+Express 安裝設置與簡單實作

陳小痘
8 min readFeb 8, 2020

--

圖片來源

各位讀者好,最近筆者因工作而開始接觸 Node.js+Epress 和 EJS,至於 EJS 留到下一篇再來分享,此篇是分享 Node.js+Epress。如果讀者對於如何使用 JavaScript 建造出在伺服器運行的 API 有興趣的話,歡迎往下閱讀,但內容十分基礎,主要是自己在記錄使用,先讓大家知道一下,那麼開始囉!

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 這邊下載安裝檔,安裝過程照預設即可。

筆者是下載 Windows Installer (64-bit)

設置工作環境 + 安裝 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 編寫的軟體套件管理系統。

建立 package.json 的過程
在工作目錄出現剛建立好的 package.json

最後,我們終於可以將 Express 安裝至工作目錄中,請執行 npm install express 指令即可。但如果想把 Express 儲存在相依關係清單中( dependencies ),請記得後面加 --save 就可以了(筆者是有使用)。

將 Express 安裝至工作目錄中

我們開啟看 package.json,就可以發現多了 dependencies,而且裡面擺放著剛剛安裝的 Express,代表我們有成功把 Express 儲存進相依關係清單中。

package.json 出現 dependencies 並擺放剛剛安裝的 express

相信讀者對於 dependencies 的用處還是很模糊,這邊我詳細說明一下。Node.js 有個指令 npm install,它是把預設套件安裝至 node_modules 資料夾,除此之外它還會安裝 package.json 內 dependencies 的套件。所以簡單來說,讀者可以在自己的工作目錄下,每一項安裝指令都加上 --save,讓 dependencies 記錄下你所有安裝的套件。之後你只要帶著 package.json 走,在任何地方擺放 package.json,並在其目錄下執行 npm install 就可以一次安裝完你之前反覆安裝套件的指令了( npm install 套件名稱 ),是不是超級方便的!

node_modules 資料夾擺放所有經過安裝的套件,剛剛安裝的 express 也在裡面

安裝 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,當兩者都達成條件後就會執行後面的 functionfunction 內容為 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!,代表我們的伺服器有成功運行起來。

使用 nodemon 啟動伺服器

接著在瀏覽器中輸入 http://127.0.0.1:3000/,就可以看到 Respond 傳送回來的 Hello World!

註:因為是在本地測試,所以 URL 根目錄為 127.0.0.1

伺服器接收到此路由的要求,並以 Hello World! 當作回應

但對於其他 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 是有粗體字效果!

伺服器接收到 http://127.0.0.1:3000/mypath 路由的要求,並做出回應

我本篇的分享就先到這裡,其實這是最簡易 Express 應用程式的建立。它是單一檔案的應用程式,與使用 Express 產生器所產生的結果截然不同。Express 產生器會建立完整的應用程式框架,其中含有眾多 JavaScript 檔案、EJS 範本,以及各種用途的子目錄。我將在下篇和大家好好分享,順便介紹一下 EJS 範本,那麼我們就下次見啦!掰掰~

--

--