ExpressJS多布局下从数据库加载对应导航菜单的实现疑问

我之前也碰到过类似的场景，在Express里给前后端两套布局配置不同的数据库菜单，其实不用纠结特殊事件，利用Express的路由机制和中间件就能完美实现，给你几个实用的方案：

方案1：全局布局判断中间件（最省心） #

写一个全局中间件，根据请求的路径判断当前属于前端还是后台，自动从数据库查询对应菜单并挂载到模板全局变量，这样所有模板都能直接使用菜单数据，不用每个路由重复写查询逻辑。

代码示例： #

const express = require('express');
const app = express();
// 假设你的菜单模型是MenuModel，从数据库查询菜单
const MenuModel = require('./models/Menu');

// 全局菜单加载中间件
app.use(async (req, res, next) => {
  try {
    let menuItems = [];
    // 根据请求路径前缀区分前后端
    if (req.path.startsWith('/admin')) {
      // 查询后台菜单：dashboard、manage、ticket
      menuItems = await MenuModel.find({ category: 'admin' });
    } else {
      // 查询前端菜单：home、about、contact
      menuItems = await MenuModel.find({ category: 'frontend' });
    }
    // 把菜单挂载到res.locals，模板中直接用menuItems变量
    res.locals.menuItems = menuItems;
    next();
  } catch (err) {
    console.error('加载菜单失败:', err);
    next(err);
  }
});

// 前端路由 - 使用frontend布局
app.get('/', (req, res) => {
  res.render('home', { layout: 'frontend' });
});
app.get('/about', (req, res) => {
  res.render('about', { layout: 'frontend' });
});

// 后台路由 - 使用admin布局
app.get('/admin/dashboard', (req, res) => {
  res.render('dashboard', { layout: 'admin' });
});
app.get('/admin/manage', (req, res) => {
  res.render('manage', { layout: 'admin' });
});

模板中使用菜单（以Handlebars为例） #

比如前端布局文件frontend.hbs：

<nav class="frontend-nav">
  {{#each menuItems}}
    <a href="{{this.url}}" class="nav-item">{{this.name}}</a>
  {{/each}}
</nav>

后台布局admin.hbs同理，直接用menuItems渲染即可。

方案2：路由分组+专属中间件（更清晰） #

如果你的前后端路由逻辑比较复杂，推荐把前后端路由分开成独立的路由组，每个路由组挂载专属的菜单查询中间件，这样逻辑更清晰，也方便后续扩展。

代码示例： #

const express = require('express');
const app = express();
const MenuModel = require('./models/Menu');

// 前端路由组
const frontendRouter = express.Router();
// 前端专属菜单中间件
frontendRouter.use(async (req, res, next) => {
  res.locals.menuItems = await MenuModel.find({ category: 'frontend' });
  next();
});
// 前端路由
frontendRouter.get('/', (req, res) => res.render('home', { layout: 'frontend' }));
frontendRouter.get('/about', (req, res) => res.render('about', { layout: 'frontend' }));
// 挂载到根路径
app.use('/', frontendRouter);

// 后台路由组
const adminRouter = express.Router();
// 后台专属菜单中间件
adminRouter.use(async (req, res, next) => {
  res.locals.menuItems = await MenuModel.find({ category: 'admin' });
  next();
});
// 后台路由
adminRouter.get('/dashboard', (req, res) => res.render('dashboard', { layout: 'admin' }));
adminRouter.get('/manage', (req, res) => res.render('manage', { layout: 'admin' }));
// 挂载到/admin路径
app.use('/admin', adminRouter);

方案3：渲染时手动传入菜单（灵活度高） #

如果某些特殊路由需要自定义菜单，也可以在路由处理函数中单独查询菜单，然后渲染模板时手动传入，适合个性化场景。

代码示例： #

app.get('/admin/ticket', async (req, res) => {
  const adminMenu = await MenuModel.find({ category: 'admin' });
  // 渲染模板时传入菜单和指定布局
  res.render('ticket', { 
    layout: 'admin',
    menuItems: adminMenu
  });
});

总结 #

这几种方案里，我最推荐方案1或方案2，因为能避免重复代码，逻辑也清晰。核心思路就是：根据请求的路由/路径区分布局类型，然后从数据库拉取对应菜单，传递给模板渲染。Express的中间件机制就是干这个的，完全不需要额外的事件监听~

内容的提问来源于stack exchange，提问作者Gopal Singh Thakur