在 Node.js 中渲染 HTML 檔案
- 在 Node.js 中內部渲染 HTML 檔案
-
使用
readFile()方法在 Node.js 中渲染 HTML 檔案 -
使用
fs.createReadStream()方法在 Node.js 中渲染 HTML 檔案 - まとめ
在本文中，我們將建立一個簡單的 Node.js 伺服器並探索可用於呈現 HTML 頁面的不同方法。
在 Node.js 中內部渲染 HTML 檔案
Node.js 是一個開源的 JavaScript 執行時，它允許我們在伺服器上使用 JavaScript。
使用 Node.js，我們可以執行以下操作。
- 在伺服器上建立、讀取、開啟、關閉和刪除檔案。
- 新增、修改和刪除資料庫中的資料。
- 建立動態呈現內容的 Web 應用程式、視訊流應用程式、聊天應用程式。
要構建成熟的 Web 應用程式，我們必須在客戶端建立伺服器靜態檔案（包括 JavaScript、CSS、影象和 HTML 檔案）。
你必須在系統中預先安裝 Node.js。我們將使用常用的 http.createServer() 函式建立一個簡單的 HTTP 伺服器例項。
此函式接受一個選項引數和一個回撥函式，該函式將請求和響應物件作為引數。我們將使用響應物件傳送包含標題和一些內容的響應。
在這種情況下，當向伺服器發出請求時，我們將向使用者返回一個簡單的 HTML 標記。
最後，我們還將使用 server.listen() 方法讓伺服器在埠 8080 上偵聽傳入請求。如果另一個程序使用此埠號，你可以更改埠號。
const http = require('http');
const port = 8080;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');
res.end('<h1>Hello, User!</h1> <h3> Welcome Home</h3>\n');
});
server.listen(port, () => {
console.log(`Server is running on port number::${port}`);
});
如果我們啟動伺服器並訪問 http://localhost:8080/，下面的響應表明 HTML 檔案已成功呈現。
雖然這種方法很精確，但它並不是在 Node.js 中提供 HTML 檔案的最佳方式，因為在構建真正的應用程式時，我們通常有非常大的 HTML 檔案，最好將它們儲存在外部檔案中。
使用 readFile() 方法在 Node.js 中渲染 HTML 檔案
我們可以首先在根目錄中建立一個包含 HTML 檔案的檔案（參見下面的程式碼）。
<!DOCTYPE html>
<html lang="en">
<head>
<title>simple page</title>
</head>
<body>
<h1>Hello, User!</h1>
<h3> Welcome Home !</h3>
</body>
</html>
我們將其命名為 index.html 並寫出 HTML 檔案。以下是建立 index.html 檔案後檔案結構的外觀。
我們將使用 fs 模組將此檔案讀入主檔案 index.js 並將其呈現給使用者。由於 fs 是一個內建方法，我們需要使用 require() 函式將它包含在主檔案中。
fs 模組提供 fs.ReadFile() 方法，我們可以通過簡單地傳入路徑、編碼和一個回撥函式來讀取檔案，該函式將與檔案一起呼叫並將錯誤（如果有）處理為引數。
我們仍將使用 http.createServer() 函式來建立請求和響應物件。我們將 HTML 檔案附加到響應物件，如下所示。
let http = require('http');
let fs = require('fs');
let port = 8080;
const server = http.createServer((request, response) => {
response.writeHead(200, {
'Content-Type': 'text/html'
});
fs.readFile('./index.html', null, function (error, data) {
if (error) {
response.writeHead(404);
respone.write('Whoops! File not found!');
} else {
response.write(data);
}
response.end();
});
});
server.listen(port, () => {
console.log(`Server is listening on port number: ${port}`);
});
如果我們啟動伺服器並訪問 http://localhost:8080/，下面的響應表明 HTML 檔案已成功呈現。
在此示例中，我們探索了使用簡單的 HTML 頁面建立簡單的 Node.js 伺服器。或者，我們可以在 Node.js 中使用 stream 模組提供的可讀流，而不是傳統的 fs 模組。
使用 fs.createReadStream() 方法在 Node.js 中渲染 HTML 檔案
Node.js 流既節省記憶體又節省時間。
與傳統的讀取檔案的方式不同，在處理之前必須讀取整個檔案，Node.js 流允許我們逐段讀取內容，而無需將其儲存在記憶體中。
fs 模組為我們提供了 fs.createReadStream() 函式，該函式接受路徑引數，該引數儲存我們在根目錄中的 HTML 檔案的路徑。
第二個引數是一個可選引數，它包含一個字串物件。這個函式允許我們開啟一個可讀的流，然後我們可以使用 pipe() 方法將其從源管道傳輸到目標。
以下是我們如何實現這一點。
const http = require('http');
const fs = require('fs');
const port = 8080;
const server = http.createServer((req, res) => {
if(req.url === '/') {
const htmlFile = 'index.html';
res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');
fs.createReadStream(htmlFile).pipe(res);
}
});
server.listen(port, () => {
console.log(`The serer is running at port number::${port}`);
});
如果我們啟動伺服器並訪問 http://localhost:8080/，下面的響應表明 HTML 檔案已成功呈現。
まとめ
總之，如果你正在尋找開發 Web 應用程式，在某些時候，你可能需要學習 Node.js 框架。Express.js 是最常用的框架之一。
Express.js 是一個極簡框架，為開發 Web 和移動應用程式提供了強大的功能。Express.js 為使用 express.static() 中介軟體函式提供靜態檔案提供了最佳解決方案。
此函式接受 root 和 options 引數，其中 root 指定我們可以提供靜態檔案（如 HTML 和 CSS）的根目錄。
Express 還允許你使用諸如 pug、jade 和 ejs 之類的模板引擎，從而使設計 HTML 頁面變得更加容易。
Isaac Tony is a professional software developer and technical writer fascinated by Tech and productivity. He helps large technical organizations communicate their message clearly through writing.
LinkedIn