如何将 node.js 变量传递/访问到 html 文件/模板？

以下方法介绍了如何将 node.js 变量传递/访问到 HTML 文件/模板。我们将构建一个基本的 Node.js 应用程序，让您在 HTML 页面上显示动态内容，即您的姓名和年龄。为了将姓名和年龄值添加到我们的 HTML 模板中，我们将使用 pug 包。

Pug是一个模板引擎，可用于将动态数据注入 HTML 页面。它的函数是将提供的数据转换为 HTML 内容，并将其作为静态页面提供服务。 Pug 的语法类似于传统 HTML，但更简洁，并且优先考虑缩进和间距以控制逻辑流。

创建 NodeJS 应用程序并安装模块：

• 第 1 步：我们可以使用以下命令使用 Node Package Manager 创建一个新项目。

  npm init

• 第 2 步：安装所需的项目依赖项，即express和pug模块 使用以下命令。

  npm install express pug --save

默认情况下，所有 HTML 模板都存储在项目的views文件夹中。我们将使用相同的结构创建模板文件index.pug 。

项目目录：我们的项目目录将如下所示。

项目结构

index.js

const express = require('express');
  
// Initialize App
const app = express();
  
// Assign route
app.use('/', (req, res, next) => {
  res.render('index.pug', { name: 'John Doe', age: 21 });
});
  
// Start server
app.listen(5000, () => {
  console.log('App listening on port 5000');
});

说明：上面的代码分为3个部分：

1. 导入 express 并初始化其实例
2. 创建一个为 HTML 模板提供服务并将数据传递给它的路由（用户的姓名和年龄）。
3. 启动服务器。

指数.pug

doctype html
html(lang="en")
  head
    title= 'Node.js Template'
  body
    h1 My name is #{name}
    p I am #{age} years old

说明：在幕后，上面的 pub 代码连同提供的数据被翻译成 HTML 页面，然后通过 Node.js 应用程序提供。

运行应用程序的步骤：

使用以下命令运行index.js文件。

node index.js

输出：现在打开浏览器并转到http://localhost:5000/ ，您将看到以下输出：

index.pug 模板的可视化表示