如何将数据传递给 ejs 部分 - Javascript (1)

📌 相关文章

📜 如何将数据传递给 ejs 部分 - Javascript (1)

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

如何将数据传递给 ejs 部分 - Javascript

在使用 EJS（Embedded JavaScript）的过程中，我们需要将数据传递给 EJS，以便在模板中渲染数据。

以下是如何将数据传递给 EJS 部分的示例。

安装 EJS

首先，我们需要在我们的项目中安装 EJS。可以通过使用以下命令来安装：

npm install ejs

创建模板

接下来，我们需要创建一个 EJS 模板，其中包含要呈现的数据的占位符。

这是一个简单的 EJS 模板示例。

<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= heading %></h1>
    <p><%= paragraph %></p>
</body>
</html>

在上面的示例中，我们使用 <% %> 符号定义了占位符。模板中定义的占位符将在传递给模板的数据中进行替换。

在上面的示例中，我们有 title，heading 和 paragraph 占位符。我们将在下面的步骤中将这些占位符替换为实际数据。

传递数据

在将数据传递给模板之前，我们需要将模板读入内存。可以使用以下代码读取上一步中创建的 EJS 模板：

const fs = require('fs');
const ejs = require('ejs');

const template = fs.readFileSync('template.ejs', 'utf-8');

一旦我们将模板读入内存，我们就可以将数据传递给模板。下面是一个示例：

const data = {
    title: 'My Website',
    heading: 'Welcome to My Website',
    paragraph: 'This is a paragraph about my website.'
};

const html = ejs.render(template, data);

在上面的示例中，我们定义了一个包含应该传递到模板中的数据对象。我们使用 ejs.render 方法将数据传递给模板并返回渲染后的 HTML。

完整代码

最终代码将如下所示：

const fs = require('fs');
const ejs = require('ejs');

const template = fs.readFileSync('template.ejs', 'utf-8');

const data = {
    title: 'My Website',
    heading: 'Welcome to My Website',
    paragraph: 'This is a paragraph about my website.'
};

const html = ejs.render(template, data);
console.log(html);

将上述代码保存为 app.js，将模板保存为 template.ejs 并运行：

node app.js

您将在终端上看到渲染后的 HTML。

总结

通过上述步骤，我们可以轻松地将数据传递给 EJS 模板并在应用程序中呈现数据。 EJS 是管理和渲染模板的优秀工具。