Nodejs express 4中的 views 变量问题

Nodejs express 4中的 views 变量问题

app.set(‘views’, __dirname + ‘/views’);

在controllers内 res.render(‘index’, {}); 中的 index.html 必须在 __dirname + ‘/views’ 这样很不灵活。 如我的header.html footer.html 是多个，不同模块不一样，怎么办???

express 有部分变量定太死不易扩展出来。

5 回复

Node.js Express 4 中的 views 变量问题

在使用 Express 4 构建 Web 应用时，经常会遇到需要管理多个视图文件的情况。例如，不同的模块可能需要使用不同的头部（header）和尾部（footer）模板。默认情况下，Express 会将所有视图文件放在一个固定的目录中，这可能会导致一些灵活性上的问题。

如何解决这个问题？

为了解决这个问题，你可以通过配置 Express 的 view engine 和 views 属性来更加灵活地处理视图文件的位置和命名。此外，你还可以通过设置局部变量来动态加载不同的头部和尾部模板。

以下是一个示例，展示如何实现这一目标：

  1. 配置视图引擎和视图目录

    首先，你需要设置 Express 的 view engine 和 views 属性，以指定视图文件的根目录。例如：

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

// 设置视图目录
app.set('views', __dirname + '/views');

// 设置视图引擎
app.set('view engine', 'ejs');  // 假设使用 EJS 作为模板引擎

  2. 使用局部变量

    在渲染视图时，你可以通过 res.locals 或者传递给 render 方法的对象来设置局部变量，这样可以在不同的模块中使用不同的头部和尾部模板。

    app.get('/module1', (req, res) => {
  res.render('index', {
    header: 'header-module1',
    footer: 'footer-module1'
  });
});

app.get('/module2', (req, res) => {
  res.render('index', {
    header: 'header-module2',
    footer: 'footer-module2'
  });
});

  3. 创建多个视图文件

    在 views 目录下创建多个头部和尾部模板文件，例如：

    /views
  /header-module1.ejs
  /footer-module1.ejs
  /header-module2.ejs
  /footer-module2.ejs
  /index.ejs

  4. 在视图文件中使用局部变量

    在 index.ejs 文件中，可以使用这些局部变量来动态加载不同的头部和尾部模板：

    <!-- index.ejs -->
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <%- include(`../${header}`) %>
  <h1>Welcome to <%= title %></h1>
  <%- include(`../${footer}`) %>
</body>
</html>

通过这种方式，你可以更灵活地管理不同的头部和尾部模板，并且可以根据不同的模块动态加载它们。这样不仅提高了代码的可维护性，还增加了应用的灵活性。


express4 github.com 上有examples->mvc 有处理方案，这个我知道的地方，这方案可能不是很好，但可以解决你的问题。

还有一个方法就是采用绝对路径，header.html 是当前页面的相对路径就行了。

这些都是约定~虽然死点但也没啥吧~

res.render(‘index’, {}); —> res.render(‘submodule1/index’, {});
res.render(‘submodule2/index’, {});

这样够不够？

在Express 4中，app.set('views', ...) 设置了视图模板文件的根目录。如果你希望更灵活地处理多个视图文件（如 header.html, footer.html），可以考虑使用局部视图（partial views）或直接在主视图中包含这些文件。

示例代码

1. 使用局部视图（Partials）

你可以使用 express-partials 或其他类似中间件来处理局部视图。

首先安装 express-partials：

npm install express-partials

然后在你的应用中配置它：

const express = require('express');
const partials = require('express-partials');

const app = express();
app.use(partials());

app.set('views', __dirname + '/views'); // 设置视图根目录
app.set('view engine', 'ejs'); // 使用 EJS 作为视图引擎

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

app.listen(3000);

在 views 目录下创建以下文件：

  • index.ejs
  • header.ejs
  • footer.ejs

index.ejs

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <% include header %>
    <h1>Welcome to My App</h1>
    <% include footer %>
</body>
</html>

header.ejs

<header>
    <h2>Header</h2>
</header>

footer.ejs

<footer>
    <p>Footer</p>
</footer>

这样，你可以在一个主视图中包含多个局部视图，从而避免硬编码路径。

解释

通过使用 express-partials 或类似的中间件，你可以将 header.html 和 footer.html 等文件视为局部视图，并在主视图中包含它们。这使得代码更具可维护性和灵活性。

回到顶部