📌  相关文章
📜  如何将 node.js 变量传递访问到 html 文件模板？(1)

📅  最后修改于: 2023-12-03 15:38:44.173000             🧑  作者: Mango

在 Node.js 和 HTML 文件模板之间传递变量的方法

在开发 Web 应用程序时，有时需要将 Node.js 的变量传递给 HTML 文件模板，以便在浏览器中呈现。虽然这可能看起来有些复杂，但实际上只需遵循以下步骤即可。

第一步：安装必要的组件

在 Node.js 中，有许多流行的模板引擎可以用于在 HTML 文件中呈现数据。其中一些最常用的包括 EJS、Handlebars 和 Pug（以前称为 Jade）。因此，首先要安装所选的模板引擎。例如，如果您想使用 EJS 模板引擎，则可以使用以下命令安装它：

npm install ejs
第二步：创建 HTML 文件模板

接下来，您需要创建一个 HTML 文件模板，该模板包含要呈现数据的地方。例如，如果您想在页面上呈现标题和正文，则可以按照以下方式创建模板：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
</head>
<body>
  <h1><%= title %></h1>
  <p><%= content %></p>
</body>
</html>

在这个模板中，用 <%= %> 语法表示可被动态替换的占位符。例如，模板中的 <%= title %> 将被替换为 Node.js 中设置的 title 变量的值。同样，<%= content %> 将被替换为 content 变量的值。

第三步：在 Node.js 中设置变量并呈现模板

现在，我们需要在 Node.js 中设置变量，并用这些变量来呈现我们的 HTML 模板。假设我们想要使用 Express 框架来完成此操作，我们可以按照以下方式设置变量并呈现模板：

const express = require('express')
const app = express()

app.set('view engine', 'ejs')  // 设置模板引擎为 EJS

app.get('/', (req, res) => {
  const title = 'Hello World'
  const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
  res.render('index', { title, content })  // 呈现 index.ejs 模板，并传递变量
})

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000')
})

在这里，我们设置了 Express 的视图引擎为 EJS。接下来，我们创建了一个路由处理程序，该处理程序在 / 路径上处理 GET 请求。在路由处理程序中，我们设置了 title 和 content 变量，然后将它们传递给 res.render() 函数，该函数呈现 index.ejs 模板，并将变量传递给模板。因此，<%= title %> 将被替换为 Hello World，而 <%= content %> 将被替换为 Lorem ipsum dolor sit amet, consectetur adipiscing elit.。

结论

通过这个简单的例子，我们已经了解了如何将 Node.js 中的变量传递给 HTML 文件模板。尽管在这里使用了 Express 框架和 EJS 模板引擎，但这种方法同样适用于其他框架和模板引擎，只需相应地更改代码即可。