先介紹node.js的安裝,再介紹使用node.js建立一個簡單的web伺服器,最後透過一個簡單的範例,示範網頁與伺服器之間的資料互動的實作。
WEB伺服器
WEB伺服器也稱為WWW伺服器。 WWW(World Wide Web、翻譯成中文:萬維網或環球資訊網)伺服器的基本功能就是提供Web資訊瀏覽服務。 Web伺服器可以向Web瀏覽器等客戶端提供文檔,也可以放置網站文件,讓全世界瀏覽,更可以放置資料文件,讓全世界下載。
常見的Web伺服器軟體有Apache、Internet資訊伺服器(Internet Information Services,IIS)等。
Apache伺服器:Apache伺服器是一款開源免費的伺服器軟體,幾乎可以在所以有的電腦平台上運行,由於Apache是開源,因此所有人都可以參與開發新功能,並且不斷對Apache伺服器進行完善。 Apache HTTP Server(簡稱Apache)是Apache軟體基金會的一個開放原始碼的網頁,它是一個模組化的伺服器,可以運行在幾乎所有廣泛使用的電腦平台上(即支援多平台)。其屬於應用程式伺服器。
IIS伺服器:IIS伺服器是微軟的伺服器,可允許IIS在公共Intranet或網路上發布相信的Web伺服器。 IIS只能在微軟公司的windows作業系統下使用。
不依賴前面提到的Web服務軟體,使用Node.js 也能搭建Web伺服器。
Node.js是什麼?
簡單來說,Node.js 是一種開源且跨平台的伺服器端JavaScript 執行環境,並且可以讓JavaScript 做後端。
在Windows 上安裝Node.js
要使用Node.js 需要安裝之。
要使用Node.js 需要安裝之。先到nodejs官網Node.js或到中文網站下載| Node.js 中文網下載
LTS代表“長期支援”,建議大多數使用者使用這種版本。我下載的是node-v14.18.1-x64.msi
雙擊下載後的安裝包直接安裝就可以了,可以自訂路徑。安裝時會自動配置環境變數(預設自動將安裝路徑新增path環境變數)。為了照顧新手,以下詳細示範安裝過程。
雙擊下載後的安裝包安裝,如下圖所示

點選Next按鈕,將出現如下介面:

勾選接受協議可選項,點選next 按鈕,將出現如下介面:

Node.js預設安裝目錄為"C:Program Filesnodejs" ,可以修改目錄(我修改了盤符D),然後點選next按鈕,將出現如下介面:

你可以點選樹狀圖示節點來選擇你需要的安裝模式, 在此保持預設不變,點選下一步next按鈕,將出現如下介面:

如果要安裝工具來編譯本機模組,請按一下核取方塊。通常,不需要安裝這些工具,因此不必選取此框,點擊next按鈕,將出現如下介面:

點擊Install(安裝)按鈕開始安裝Node.js,將出現如下介面:

請稍等一會,將出現如下介面:

此時,點選Finish(完成)按鈕退出設定精靈。
安裝完後的目錄如下圖所示:

你將看到目錄中有npm.cmd,它是什麼?
安裝Node.js時會同時自動安裝npm,它是node套件(模組)管理工具,能解決Node.js程式碼部署上的許多問題,常見的使用場景有以下幾種:
允許使用者從NPM伺服器下載別人編寫的第三方包到本地使用。
允許使用者從NPM伺服器下載並安裝別人編寫的命令列程式到本機使用。
允許使用者將自己編寫的套件或命令列程式上傳到NPM伺服器供別人使用。
如果你安裝的是舊版的npm,可以很容易得透過npm 指令來升級,Window 系統使用下列指令即可:
npm install npm -g
使用npm套件管理工具安裝第三方函式庫(npm套件),有兩種安裝方式:全域安裝與局部安裝:
從敲的命令列來看,差異只是有沒有-g而已,如
npm install X # 局部(本地)安裝,則是將模組下載到目前命令列所在目錄。可能會遇到“'X' 不是內部或外部命令,也不是可運行的程式”錯誤。 npm install X -g # 全域安裝,可以直接在命令列裡使用。
檢查是否正確安裝了Node.js和npm
win+r開啟運行,輸入cmd後進入命令列介面。然後輸入node -v和npm -v指令進行node的版本號碼和npm的版本號碼的檢視。參見下圖:

正確顯示了版本號,OK!
使用node.js建立一個簡單的web伺服器
在你專案的目錄(這裡以D:測試資料夾為例)中建立一個叫myServer.js 的文件,並寫入以下程式碼:
var http = require('http ');
http.createServer(function (request, response) {
// 傳送HTTP 頭部// HTTP 狀態值: 200 : OK
// 內容類型: text/plain。並用charset=UTF-8解決輸出中文亂碼response.writeHead(200, {'Content-Type': 'text/plain; charset=UTF-8'});
// 下句是傳送回應資料response.end('Hello World! 這是簡單的網頁伺服器測試。n');
}).listen(8888);
// 終端印出以下資訊console.log('Server running at http://127.0.0.1:8888/');說明:其中var http = require("http"); 使用require 指令來載入http 模組,並將實例化的HTTP 賦值給變數http。
編寫了.js的程序,運行的時候就要通過node.js來運行了,在CMD中先切換到編寫程序的目錄下,然後用node XXX.js即可啟動服務,若不先切換路徑,則用node 路徑XXX.js啟動服務。然後在瀏覽器中輸入對應的監聽IP位址加上連接埠號,這裡的連接埠號碼使用比較大一點的就可以,因為是回環測試,所以使用127.0.0.1作為測試IP。
使用node D:測試資料夾myServer.js,請參考下圖:

簡單例子運作成功了,這其實是用node.js搭建了一個伺服器,然後來監聽埠的存取事件,最後做出對應的回應,需要指出的是,當我們關閉CMD或按CTRL+C鍵之後服務就關閉了。
現在,開啟瀏覽器造訪http://127.0.0.1:8888/,你會看如下的網頁:

成功了!
網頁與伺服器之間的資料互動範例現在透過一個簡單的範例,示範
網頁與伺服器之間的資料
互動的實作。這個範例有兩個部分:伺服器程式碼和網頁程式碼伺服器程式
碼如下:
//require表示引包,引包就是引用自己的一個特殊功能var http = require("http");
var url = require("url");
var server = http.createServer(function(req,res){
//得到查詢部分,由於寫了true,那麼就是一個物件var queryObj = url.parse(req.url,true).query;
var name = queryObj.name;
var age = queryObj.age;
var sex = queryObj.sex;
res.writeHead(200,{"Content-Type":"text/html;charset=UTF-8"});
res.end("伺服器收到了表單請求" + name + age + sex);
});
//運行伺服器,監聽3000埠(埠號可以任改)
server.listen(3000,"127.0.0.1");
// 終端機列印如下資訊console.log('Server running at http://127.0.0.1:3000/')儲存檔案名稱為server2.js ,專案的目錄(這裡以D:測試資料夾為例)中
使用node D:測試資料夾Server2.js運行:

網頁程式碼如下:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>與服務端互動網頁</title>
</head>
<body>
<form action="http://127.0.0.1:3000/" method="GET">
姓名:
<input type="text" name="name" /> <br />
年齡:
<input type="text" name="age" /> <br />
<input type="radio" name="sex" value="男"/> 男<input type="radio" name="sex" value="女"/> 女<br />
<input type="submit">
</form>
</body>
</html>儲存檔案名稱與服務端互動範例.html ,用瀏覽器執行:

特別說明,範例比較簡單,特別是後端對數據的處理進行了簡化,在實際應用系統中後端一般使用資料庫保存數據,這樣做主要是讓新手有一個直觀易懂的感性了解,讓初學者有個整體概觀,便於快速入門,有了這些,深入學習就有了基礎。
推薦:《node.js影片教學》
以上就是圖文詳解node.js如何建立web伺服器的詳細內容,更多請關注php中文網其它相關文章!