如何使用Node.js搭建伺服器並實作HTML5頁面-前端問答-PHP中文網

首頁

web前端

前端問答

如何使用Node.js搭建伺服器並實作HTML5頁面

PHPz

Apr 17, 2023 pm 03:01 PM

隨著行動互聯網的蓬勃發展，越來越多的 web 開發者開始從 PC 網站轉向行動裝置 web 應用程式開發。而在這個牛鼻子的時代，Node.js 成了前端開發者必備的技能之一。相信很多初學者都想學如何用 Node.js 建立伺服器，實作一個簡單的 web 應用。那麼今天就讓我們來一起學習如何使用 Node.js 建立伺服器，實作一個基本的 HTML5 頁面。

一、什麼是 Node.js

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境，它可以運行在瀏覽器之外的伺服器環境中。 Node.js 的出現，讓前端開發者可以直接使用 JavaScript 進行後端開發，不再需要學習其他的後端語言和框架，這給了前端開發更多的可能性。

Node.js 的特色：

非同步I/O：Node.js 採用事件驅動、非同步I/O 的程式設計模型，可以有效率地處理大量並發連接，同時節省系統資源。
單線程：Node.js 只有一個線程，但透過事件輪詢和非同步 I/O，可以處理多個連接，而不會阻塞其他任務。
適用於即時應用：Node.js 適用於即時應用，如聊天室、線上遊戲、協同程式設計等，它可以讓訊息在客戶端和服務端之間即時傳遞，提高即時互動體驗，同時支援持續連接。

二、環境建置

安裝Node.js

#在官網https://nodejs.org/en/ 上下載適合自己電腦的Node.js 安裝包，並依照指示安裝。

建立專案

開啟控制台，新建資料夾並進入：

mkdir nodejs-server
cd nodejs-server

登入後複製

然後在該目錄下建立一個伺服器文件，命名為server .js：

touch server.js

登入後複製

寫程式碼

開啟server.js 文件，輸入以下程式碼：

var http = require('http');  //引入http模块
var fs = require('fs');  //引入fs模块

var server = http.createServer(function(req, res){
  console.log("Request received from "+ req.url);  //打印请求的路径

  res.writeHead(200, {'Content-Type': 'text/html'});   //设置响应头部，200表示一切正常

  var html = fs.readFileSync(__dirname + '/index.html', 'utf-8');  //读取html文件，__dirname表示当前文件所在的目录路径
  res.end(html);   //将读取的内容返回
});
server.listen(3000);   //监听3000端口
console.log("Server running at http://localhost:3000/");

登入後複製

解釋程式碼：

首先引入了Node.js 的http 和fs 模組。
透過 http.createServer() 方法建立一個伺服器物件。
在伺服器物件的回呼函數中，在控制台列印了請求的路徑。
設定了回應頭部，並讀取了 index.html 文件，將其內容傳回。
在最後一行，監聽了3000埠。
建立 HTML 文件

在 nodejs-server 資料夾下建立一個 index.html 文件，用於傳回給客戶端的 HTML 頁面。

輸入以下程式碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Node.js Server</title>
  </head>
  <body>
    <h1>Node.js Server</h1>
    <p>Welcome to my Node.js Server!</p>
  </body>
</html>

登入後複製

三、執行專案

在控制台執行以下指令：