Nodejs中espress如何设置多层级views目录

Nodejs中espress如何设置多层级views目录

项目包含前后台两部分页面，想用文件夹来区分，目测只能访问到views文件夹下的，不能访问views/admin文件夹下的页面，有没有解决办法？

5 回复

当然可以。以下是如何在Express应用中设置多层级views目录的详细步骤和示例代码。

如何在Express中设置多层级views目录

在Express应用中，默认情况下，views目录通常位于项目的根目录下。如果你希望将后台和前台页面分开管理，可以通过设置多个views目录来实现这一需求。

示例代码

假设你的项目结构如下：

myapp/
├── app.js
├── package.json
└── views/
    ├── admin/
    │   └── index.ejs
    └── index.ejs

你需要在app.js中设置多个views目录，并指定相应的渲染引擎。这里我们使用EJS作为模板引擎。

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

// 设置多层级views目录
app.set('views', [
    path.join(__dirname, 'views'),      // 前台views目录
    path.join(__dirname, 'views/admin') // 后台views目录
]);

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

// 定义路由
app.get('/', (req, res) => {
    res.render('index'); // 渲染前台的index.ejs
});

app.get('/admin', (req, res) => {
    res.render('admin/index'); // 渲染后台的index.ejs
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

解释

  1. 设置views目录：通过app.set('views', [...])方法，你可以指定一个数组来包含多个views目录。
  2. 定义路由：根据不同的路由请求，渲染不同目录下的视图文件。例如，/路由会渲染views/index.ejs，而/admin路由会渲染views/admin/index.ejs。
  3. 启动服务器：最后，启动Express应用并监听指定端口。

这样，你就可以轻松地管理和访问不同层级的views目录了。希望这能帮助你更好地组织和管理Express应用中的视图文件。


可以 比如说 VIEW/aaa/bbb,jade res.render(‘aaa/bbb’,{config:config})

你是根据什么得出你的目测结论？为何不试下？是可以访问到的

嗯，确实可以，可能我之前写法不对吧

要在Express中设置一个多层级的视图目录（例如 views 和 views/admin），你需要自定义视图引擎的查找路径。你可以通过使用 app.set('views', path) 方法来指定视图文件的根目录，并且可以通过 app.engine(ext, callback) 来指定模板引擎。

下面是一个具体的示例代码，展示如何设置多层级的视图目录：

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

const app = express();

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

// 设置视图目录
app.set('views', [
    path.join(__dirname, 'views'),          // 前台视图目录
    path.join(__dirname, 'views', 'admin')  // 后台视图目录
]);

// 设置默认的模板引擎
app.engine('html', require('ejs').renderFile);

// 定义路由
app.get('/', (req, res) => {
    res.render('index'); // 渲染前台的index.html
});

app.get('/admin', (req, res) => {
    res.render('admin/index'); // 渲染后台的index.html
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

  1. 设置视图引擎：

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

    这行代码将 EJS 设定为默认的模板引擎。

  2. 设置视图目录：

    app.set('views', [
    path.join(__dirname, 'views'),
    path.join(__dirname, 'views', 'admin')
]);

    使用 app.set('views', [...]) 可以设置多个视图目录。这里我们指定了两个目录：一个是前台的 views 目录，另一个是后台的 views/admin 目录。

  3. 定义路由：

    • 渲染前台视图：
      app.get('/', (req, res) => {
    res.render('index'); // 渲染前台的index.html
});
    • 渲染后台视图：
      app.get('/admin', (req, res) => {
    res.render('admin/index'); // 渲染后台的index.html
});

  4. 启动服务器：

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

通过这种方式，你可以轻松地设置多层级的视图目录，并根据不同的请求路径渲染不同的视图文件。

回到顶部