如何使 .ejs 文件可以访问 .js 变量？(1)

📌 相关文章

📜 如何使 .ejs 文件可以访问 .js 变量？(1)

📅 最后修改于: 2023-12-03 14:51:49.167000 🧑 作者: Mango

如何使 .ejs 文件可以访问 .js 变量？

当我们使用 Node.js 和 Express 框架来开发 Web 应用时，通常我们会使用 EJS （Embedded JavaScript）作为模板引擎来渲染页面。

在有些情况下，我们需要在 .ejs 文件中访问 .js 中定义的变量。本文将介绍如何实现这一点。

在 .ejs 文件中使用全局变量

在 Node.js 中，可以使用 global 对象来定义全局变量。这些全局变量可以在所有模块中访问。

例如，在 app.js 中定义一个全局变量 title：

global.title = 'My App';

然后，在 index.ejs 中可以使用这个变量：

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1>Welcome to <%= title %></h1>
</body>
</html>

在这个例子中，<%= title %> 会被渲染为 My App。

在 .ejs 文件中使用本地变量

如果希望在 .ejs 文件中使用本地变量，可以将这些变量传递给 res.render 方法：

app.get('/', (req, res) => {
    res.render('index', { title: 'My App' });
});

在这个例子中，{ title: 'My App' } 是一个对象，它的属性 title 可以在 index.ejs 中使用。

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1>Welcome to <%= title %></h1>
</body>
</html>

在 .ejs 文件中使用动态数据

有时候，我们需要在 .ejs 文件中使用一些动态的数据，比如从数据库中读取的数据。可以使用 <% ... %> 语法来执行 JavaScript 代码。

例如，假设我们从数据库中获取了一个商品列表：

const products = [
    { name: 'Apple', price: 1.99 },
    { name: 'Orange', price: 2.49 },
    { name: 'Banana', price: 1.29 },
];

然后，在 index.ejs 中可以使用循环来遍历商品列表：

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1>Welcome to <%= title %></h1>

    <ul>
        <% products.forEach(function(product) { %>
            <li><%= product.name %> - $<%= product.price.toFixed(2) %></li>
        <% }); %>
    </ul>
</body>
</html>

在这个例子中，<% ... %> 中的代码会被执行，并且可以在其中使用 JavaScript 代码和变量。

总结

在 .ejs 文件中访问 .js 变量通常有三种方式：

使用全局变量。
在 res.render 方法中传递本地变量。
使用 <% ... %> 语法来执行 JavaScript 代码。

以上是本文对如何使 .ejs 文件可以访问 .js 变量的介绍，希望对您有所帮助。