在 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