Node.js — 讓您在Server環境下用JavaScript進行操作

Sean Yeh
Web Design Zone
Published in
10 min readFeb 5, 2020
Photo by Taylor Vick on Unsplash

從前端到後端的JavaScript

為什麼要寫這一篇?

早期,我們認為JavaScript只是個用於前端的程式語言。在傳統意義上,JavaScript可以直接嵌入HTML頁面,其主要功能用來在HTML頁面上添加一些互動行為。是一種解釋性程式語言,它的代碼本身不進行預先的編譯。

實際上,Node. js 似乎改變這一切,現在的JavaScript不只適用於前端,本來只有在透過後端腳本語言才能做到的事情,現在 JavaScript也可以幫你做到。今天就是要說明JavaScript一樣可以用於後端伺服器。

什麼是Server

根據維基百科上面的定義:

伺服器(英語:Server)指:

一個管理資源並為用戶提供服務的電腦軟體,通常分為檔案伺服器(能使用戶在其它電腦存取檔案),資料庫伺服器和應用程式伺服器

執行以上軟體的電腦,或稱為網路主機(Host)。

簡單的說Server就是伺服器。我們透過與Server的對話交換我們需要的各種資料。也就是說,我們透過兩種方式與Server對話,取得資料或者是送出資料給Server。

我們為什麼需要使用Server

溝通是主要原因

我們可以藉由此方式讓兩台電腦進行溝通,彼此傳遞資料。

當使用者在本機端(Client端)操作應用程式App時,應用程式藉由發出請求(request)給遠端的Server(Server端)。

遠端的Server則依照使用者發出的請求,回覆(response)適當的資料給本機端的應用程式。這個一來一往的request與response行為,就是Client端與Server端的對話方式。

信任的資料交換

本機端與遠端Server只有在信任的溝通管道下,才可以交換資料。Server可以確認使用者是否具有使用權限。確認有使用權限後,才可以執行相對應的指令。

Photo by Jason Briscoe on Unsplash

在Server環境下的JavaScript: Node.js

如果你見過HTML靜態網頁,就可能使用過Apache或IIS等Web伺服器來傳送靜態檔案,讓瀏覽器可以檢視網頁。但Node提供的方式與傳統伺服器不一樣。

JavaScript可以存在Client端也可以存在Server端。

前面說到,我們一般認知的JavaScript,都是存在本機端(Client端)也就是前端。

在Client端,我們一般會透過JavaScript控制瀏覽器網頁的各種DOM元素,讓畫面更生動活潑。

然而,若要在伺服器端使用JavaScript的話,則需要使用Node.js。可以說Node.js是在Server環境下的JavaScript。

安裝Node.js

Node網站下載Node.js。安裝到電腦上面。

Node.js

使用Command Line

打開終端機,沒錯不要懷疑,就是那黑黑的畫面。

輸入下面指令(註:$符號代表該程式碼是在終端機裡輸入的,$本身不需要輸入。)以確認Node是否已經安裝在電腦上了。

$ node -v

或是

$ node --version

如果看到類似下面的版本號(號碼依照安裝版本而異),就表示已經安裝成功。

> v10.16.3

Test Drive: 進入Node Console模式進行測試

輸入node指令,以進入Node Console狀態:

$ node

在Node Console狀態下(畫面會出現一個 >符號),可以執行運算:例如1+1的運算

> 1+1

或者是:

> let num = 7> 10+ num

按下enter鍵測試看看是否出現結果。

退出Node Console

請按「兩次」control + c ( 或在>後面輸入.exit )可以退出 node console模式。

使用編輯器Text Editor

如果您需要寫很多行程式碼(誰不是?),比較適合的方式是使用Text Editor來撰寫。建議使用VS Code來撰寫。(請自行安裝,安裝方式在此不贅述)。

在 VS Code裡面也可以使用command line。你可以按下control + T 執行VS Code裡面的command line。畫面如下,command line會出現在最下面:

建立Server

環境設定完畢之後,我們言歸正傳。我們接下來要建立一個簡易的 Node Server。

我們會在server.js裡載入一個 http 原生模組。並且使用http模組提供的createServer()方法建立一個 http Server包含回呼函式並使用request及response 參數。接下來我們開始分解動作:

  1. 在Node環境下建立一個檔案,檔名為server.js。
  2. 打開server.js並且載入一個 http 原生模組。
let http = require("http")

3. 使用http模組提供的createServer()方法建立一個 http Server包含回呼函式並使用request及response 參數。在server.js中建立一個變數myApp,並且把http.createServer() 存入myApp變數中:

let myApp = http.createServer();

4. 讓 myApp 監聽:

myApp.listen();

5. 接下來我們要告訴server當它聽到要求時,該做什麼事,要如何反應。createServer()裡面,建立一個包含兩個參數的無名函數。這個無名函數需要兩個參數:req(request) 與 res(response)。

createServer(function (req,res) {   //do something});

當server聽到要求時,這時候我們希望它回覆一段文字。因此,可以使用res.send()來回覆一段文字:『welcome to the page』。因為編碼的關係,這裡的範例暫時不用中文,如果用中文的話,會出現亂碼。

let myApp = http.createServer(function (req, res) {res.end("welcome")})

此外,我們需要引入http

let http = require("http")

並且,我們希望server監聽 prot 3000。

myApp.listen(3000)

接下來,就可以在command Line執行 server.js檔案。

$ node server

啟動伺服器後,輸入http://localhost:3000瀏覽。

結果顯示如圖

最簡易的server就這樣子完成了。由於Node背後的核心理念是採取事件驅動程式編寫方式。在這個範例中,事件是隱藏的。所處理的事件是一個HTTP請求,並且透過函式作為引數,這個函式在每次被呼叫時傳送welcome字串。

註:localhost,代表你所在的電腦,它是127.0.0.1的別名。你也可以用127.0.0.1來取代localhost。

完整檔案:

let http = require("http")let myApp = http.createServer(function (req, res) { res.writeHead(200, {"Content-Type": "text/html"}) res.end("welcome")})myApp.listen(3000)

你也可以在GitHub上找到這個完整檔案。檔案位置

路由(Routing)

路由是指將使用者所要求的內容傳送回給他。使用者一般會透過URL指定想要的內容(具體來說會是「路徑」或「查詢的字串」),伺服器再依照所選的路徑或查詢的字串來回應內容給使用者。

接下來,我們繼續修改上面的程式碼。我們希望使用者在瀏覽網頁時,Server會依照不同的網址回應給使用者不同的訊息。

為了達到這個效果,我們要修改下面的這一段程式碼。

let myApp = http.createServer(function (req, res) { res.end("welcome")})

由於req.url可以知道目前所在的頁面是哪一個,我們可以利用這個性質來寫一組判斷式。依照目前使用者到達的頁面是哪一個來判斷,並針對特定頁面回覆特定的訊息。整個判斷的邏輯如下:

若 (req.url的結果 為 首頁 ) 則 {

回覆『歡迎來到首頁。』

}

又若 (req.url的結果 為 關於我們頁) 則 {

回覆『歡迎來到關於我們頁

}

否則 {

回覆『抱歉,找不到您的網頁。

}

寫成程式碼如下:

let myApp = http.createServer(function (req, res) { if (req.url == '/') {   res.end("歡迎來到首頁。") } else if (req.url == '/about') {   res.end("歡迎來到關於我們頁") } else {   res.end("抱歉,找不到您的網頁。") }})

writeHead

為了要讓伺服器傳送HTML字串,我們要在writeHead的地方,加上Content-Type的設定。設定為 text/html 會傳送HTML字串。如果設定為text/plain只會傳送純文字訊息。

又為了讓瀏覽器顯示中文字,我們需要設定編碼。因此需要加上charset=utf-8設定,這是要告訴瀏覽器此文件的格式為 utf-8。

res.writeHead(200, {"Content-Type": "text/html; charset=utf-8"})

接下來,再次在command Line執行 server.js檔案。

$ node server

執行後,首頁開始出現中文字。如下:

首頁

網址改成/about後,瀏覽器上的文字出現變化。改成「關於我們…」等文字。

about頁面時

如果隨便輸入一個網址名字,瀏覽器文字就會顯示「找不到您的網頁」等字樣。

找不到頁面時

在GitHub上可以找到修改的檔案

以上,就是我們利用Node.js實作出來的簡易版伺服器。

--

--

Sean Yeh
Web Design Zone

# Taipei, Internet Digital Advertising,透過寫作讓我們回想過去、理解現在並思考未來。並樂於分享,這才是最大贏家。