Nodejs 咨询一个关于Express模板加载的问题

Nodejs 咨询一个关于Express模板加载的问题

我现在想基于Express开发一个web应用，能在其上面扩展许多子应用，每个子应用可以设置自己的路由以及模板。

所以我希望在不同子应用内调用Express的 res.render('layout', data); 的时候，能从当前子应用设置的模板目录中查找，而不是从Express设置的views对应的目录中查找。

基于Express的情况下有木有方法实现？

3 回复

当然可以！在Express中，你可以通过配置不同的视图引擎和视图路径来实现每个子应用使用自己独立的模板目录。下面是一个简单的示例代码，展示如何实现这一功能。

假设你有一个主应用（app.js），并且有两个子应用（subApp1.js 和 subApp2.js）。

主应用 (app.js)

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

// 创建主应用实例
const app = express();

// 定义子应用
const subApp1 = require('./subApp1');
const subApp2 = require('./subApp2');

// 将子应用挂载到不同的路径上
app.use('/subApp1', subApp1);
app.use('/subApp2', subApp2);

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

子应用 1 (subApp1.js)

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

const router = express.Router();

// 设置子应用的视图路径
router.set('views', path.join(__dirname, 'views'));
router.engine('html', require('ejs').renderFile);
router.set('view engine', 'html');

// 定义路由
router.get('/', (req, res) => {
    res.render('index', { title: 'Sub App 1' });
});

module.exports = router;

子应用 2 (subApp2.js)

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

const router = express.Router();

// 设置子应用的视图路径
router.set('views', path.join(__dirname, 'views'));
router.engine('html', require('ejs').renderFile);
router.set('view engine', 'html');

// 定义路由
router.get('/', (req, res) => {
    res.render('index', { title: 'Sub App 2' });
});

module.exports = router;

视图目录结构

/project-root
│
├── app.js
├── subApp1.js
├── subApp2.js
│
└── subApps
    ├── subApp1
    │   └── views
    │       └── index.html
    │
    └── subApp2
        └── views
            └── index.html

解释

  1. 主应用 (app.js)：创建了一个主应用实例，并将两个子应用挂载到不同的路径上。
  2. 子应用 (subApp1.js 和 subApp2.js)：每个子应用都设置了自己独立的视图路径，并且定义了各自的路由。
  3. 视图目录：每个子应用都有自己的 views 目录，存放各自的模板文件。

这样，当你访问 /subApp1 或 /subApp2 时，Express 会分别在各自子应用的 views 目录中查找模板文件。

希望这对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时告诉我。


app = express();
subapp = express();
subapp.set('views', process.cwd() + '/subapp/views');
app.use('/subapp', subapp);

只知道可行，没有实际测试过

你可以通过为每个子应用设置独立的 views 目录来实现这一需求。Express 提供了灵活的方式来设置模板路径，你可以在每个子应用初始化时动态设置模板路径。

以下是一个简单的示例，展示了如何为每个子应用设置不同的 views 目录：

示例代码

  1. 主应用文件（如 app.js）
const express = require('express');
const path = require('path');

const app = express();

// 主应用的默认视图目录
app.set('views', path.join(__dirname, 'views'));

// 子应用实例化
const subApp1 = express();
const subApp2 = express();

// 设置子应用的视图目录
subApp1.set('views', path.join(__dirname, 'subapps/subapp1/views'));
subApp2.set('views', path.join(__dirname, 'subapps/subapp2/views'));

// 子应用的路由配置
subApp1.get('/', (req, res) => {
    res.render('index', { title: 'SubApp1' });
});

subApp2.get('/', (req, res) => {
    res.render('index', { title: 'SubApp2' });
});

// 将子应用挂载到主应用的不同路径
app.use('/subapp1', subApp1);
app.use('/subapp2', subApp2);

app.listen(3000, () => {
    console.log('App is running on port 3000');
});
  1. 子应用文件结构
project-root/
├── views/
│   └── main-layout.ejs
├── subapps/
│   ├── subapp1/
│   │   └── views/
│   │       └── index.ejs
│   └── subapp2/
│       └── views/
│           └── index.ejs
└── app.js

解释

  • 在主应用中，我们定义了一个基本的 views 目录。
  • 每个子应用在创建时都设置了独立的 views 目录。
  • 当在子应用内部调用 res.render('index', data) 时，Express 会根据子应用的 views 目录查找模板文件。
  • 这样每个子应用都可以拥有自己独立的视图目录，而不会相互干扰。

这样你就可以在不同的子应用中使用独立的模板目录，每个子应用可以根据需要渲染自己的模板文件。

回到顶部