请教，使用express进行Nodejs开发，公共模板里的变量怎么设置？

请教，使用express进行Nodejs开发，公共模板里的变量怎么设置？

举个例子：有个footer.ejs模板，是每个页面的footer。footer.ejs里面有个变量，比如copyright 1998-<%=year%> 请问这个year怎么设置合适，总不是render每个模板的时候都要设置一次year吧？

2 回复

当然可以！在Express中处理公共模板里的变量设置是一个常见的需求，特别是当你希望在多个页面之间共享一些通用信息时。这里，我们将介绍如何通过中间件或视图引擎配置来设置这些变量。

示例代码

首先，我们需要确保你已经在项目中安装了express和ejs。如果还没有安装，可以通过npm安装它们：

npm install express ejs

接下来，我们创建一个简单的Express应用，并设置全局变量以供所有EJS模板使用。

服务器端代码

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

// 设置视图引擎为 EJS
app.set('view engine', 'ejs');

// 设置全局变量
app.use((req, res, next) => {
    res.locals.year = new Date().getFullYear();
    next();
});

// 定义路由
app.get('/', (req, res) => {
    res.render('index', { title: 'Home Page' });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

在这个例子中，我们在中间件中设置了res.locals.year，这使得year变量对所有渲染的EJS模板都可用。

EJS模板

假设我们的footer.ejs文件如下所示：

<footer>
    <p>Copyright 1998-<%= year %></p>
</footer>

然后在index.ejs（或其他任何你想包含footer.ejs的模板）中，你可以这样包含它：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1>Welcome to the Home Page</h1>
    <!-- 包含footer.ejs -->
    <%- include('footer') %>
</body>
</html>

解释

  • 中间件：我们在中间件中设置res.locals.year，这意味着这个变量对于所有后续的请求处理函数都是可用的。
  • 视图引擎：我们使用app.set('view engine', 'ejs')来告诉Express我们使用EJS作为视图引擎。
  • res.locals：这是一个对象，用于存储将被传递给视图的数据。在这个例子中，我们向其添加了一个year属性。

通过这种方式，你不需要在每次调用res.render()时手动传递year变量，从而简化了代码并提高了可维护性。


在使用Express进行Node.js开发时，如果你有一个公共模板（例如footer.ejs），并且希望在多个页面中共享该模板中的某些变量（如year），可以通过中间件或在路由处理程序中设置这些变量。这样可以避免在每次渲染模板时重复设置这些变量。

示例代码

首先确保你已经安装了express和ejs模块：

npm install express ejs

然后在你的应用中设置全局变量或者局部变量：

设置全局变量

你可以在启动服务器时将这些变量挂载到app.locals对象上，这样它们就会自动包含在所有模板中。

const express = require('express');
const app = express();
const port = 3000;

// 将变量挂载到app.locals上
app.locals.year = new Date().getFullYear();

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    res.render('index'); // index.ejs 可以访问 year 变量
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

在这个例子中，year变量会自动包含在所有EJS模板中。

设置局部变量

如果你想在特定路由或请求中动态设置变量，可以在路由处理程序中使用res.locals。

app.get('/about', (req, res) => {
    res.locals.year = new Date().getFullYear(); // 动态设置年份
    res.render('about'); // about.ejs 可以访问 year 变量
});

这样，year变量仅对/about路由生效。

footer.ejs 模板

在footer.ejs模板中，你可以直接使用这个变量：

<footer>
    <p>Copyright 1998-<%= year %></p>
</footer>

通过这种方式，你可以灵活地管理共享变量，而不需要在每次渲染模板时重复设置这些变量。

回到顶部