在 Node.js 中渲染 HTML 文件

当前位置：主页 > 学无止境 > WEB前端 >

Vue React JavaScript Angular CSS HTML

在 Node.js 中渲染 HTML 文件

作者：迹忆客最近更新：2023/03/05 浏览次数：

在本文中，我们将创建一个简单的 Node.js 服务器并探索可用于呈现 HTML 页面的不同方法。

Node.js 是一个开源的 JavaScript 运行时，它允许我们在服务器上使用 JavaScript。

使用 Node.js，我们可以执行以下操作。

要构建成熟的 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 文件已成功呈现。

内部呈现 HTML 文件

虽然这种方法很精确，但它并不是在 Node.js 中提供 HTML 文件的最佳方式，因为在构建真正的应用程序时，我们通常有非常大的 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 的 readFile 方法

在此示例中，我们探索了使用简单的 HTML 页面创建简单的 Node.js 服务器。或者，我们可以在 Node.js 中使用 stream 模块提供的可读流，而不是传统的 fs 模块。

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}`);
});