NodeJS Express 应用程序 - 通过 Handlebars 显示 flash 消息

Question

我希望有人可以帮助通过 Handlebars 视图（使用 bootstrap 标记）在 Express 中显示 flash 消息。

在 app.js 中，我有以下模块和中间件来尝试让闪光灯工作

//require modules
const express = require('express');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const expressValidator = require('express-validator');
const hbs = require('express-handlebars');
const session = require('express-session');
const flash = require('connect-flash');
const routes = require('./routes/index');
const app = express();

// view engine setup
app.engine('hbs', hbs({extname: 'hbs', defaultLayout: 'layout',layoutsDir: __dirname + '/views/layouts/'}));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

app.use(express.static(path.join(__dirname, 'public')));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(expressValidator());

app.use(cookieParser());

app.use(session({
secret: process.env.SECRET,
key: process.env.KEY,
resave: false,
saveUninitialized: false,
store: new MongoStore({ mongooseConnection: mongoose.connection })
}));

app.use(flash());

app.use((req, res, next) => {
res.locals.h = helpers;
res.locals.flashes = req.flash();
res.locals.user = req.user || null;
res.locals.currentPath = req.path;
next();
});

app.use('/', routes);

module.exports = app;

还有一条路线 router.post('/store/add', storeController.createStore);

具有控制器功能

exports.createStore = async (req, res) => {
  const store = new Store(req.body);
  await store.save();
  req.flash('error', 'leave a review');
  console.log('my-messages',req.flash());
  res.redirect('/');    
};

当我创建一个新商店并被重定向到主页时，console.log 显示正确的值 my-messages { error: [ 'leave a review' ] } 但我无法将其显示在视图中

我的主页 ('/') 视图是

<h1>{{title}}</h1>
  <p>Hi! Welcome to {{title}} </p>
  <p>This page was built by {{created}}</p>

 {{#if message}}
<div class="alert alert-danger">{{message}}</div>
{{/if}}

{{#if errors}}
    {{#each errors}}
        <div class="error">
            {{msg}}
        </div>
    {{/each}}
{{/if}}

但什么也没有出现。我已经阅读了很多关于 SO 的类似问题，但似乎无法正确理解。

非常感谢任何帮助。

Answer 1

好的，这就是我基于 https://gist.github.com/brianmacarthur/a4e3e0093d368aa8e423 from this 答案的工作方式。

在 app.js 中的 app.use(flash()) 之后我添加了：

app.use(function(req, res, next){
// if there's a flash message in the session request, make it available 
in the response, then delete it
  res.locals.sessionFlash = req.session.sessionFlash;
  delete req.session.sessionFlash;
  next();
});

在我的路由文件 (index.js) 中，我在要点中添加了示例：

router.all('/session-flash', function( req, res ) {
  req.session.sessionFlash = {
    type: 'info',
    message: 'This is a flash message using custom middleware and express-session.'
  }
  res.redirect(301, '/');
});

然后我创建了一个把手部分 message.hbs（它使用了来自 npmjs 的 contains 助手。com/package/handlebars-helpers:

{{#if sessionFlash.message}}
  <div id="flash-messages" class="container">
      {{#contains sessionFlash.type "info"}}
      <div class="alert alert-info">
            {{{sessionFlash.message}}}
      </div>
      {{/contains}}
      {{#contains sessionFlash.type "success"}}
      <div class="alert alert-success">
              {{{sessionFlash.message}}}
      </div>
      {{/contains}}
      {{#contains sessionFlash.type "warning"}}
      <div class="alert alert-warning">
            {{{sessionFlash.message}}}
      </div>
       {{/contains}}
      {{#contains sessionFlash.type "error"}}
      <div class="alert alert-danger">
            {{{sessionFlash.message}}}
      </div>
      {{/contains}}
  </div>
{{/if}}

然后我可以将其包含在我的其他车把模板中 {{> message}}。这给了我带有 bootstrap 样式的 flash 消息。

不幸的是，我无法同时发送多个闪光灯（相同类型或不同类型），但我认为这在 https://gist.github.com/brianmacarthur/a4e3e0093d368aa8e423 中作为中间件方法的限制进行了讨论。随着我了解更多，也许我会解决这个问题，但我目前还没有多个 Flash 消息的用例:)

NodeJS Express 应用程序 - 通过 Handlebars 显示 flash 消息

NodeJS Express App - Showing flash messages via Handlebars

node.js

express

handlebars.js

connect-flash

express-handlebars