我希望有人可以通过Handlebars视图(使用引导标记(帮助在Express中显示闪存消息。
在应用程序中.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('/');
};
当我创建一个新商店并被重定向到控制台主页时.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的类似问题,但似乎无法正确理解。
任何帮助非常感谢。
好的,这就是我根据这个 https://stackoverflow.com/a/28221732/1699434 答案 https://gist.github.com/brianmacarthur/a4e3e0093d368aa8e423 的工作方式。
在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.com/package/handlebars-helpers 中的contains
助手:
{{#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}}
. 这给了我带有引导样式的闪存消息。
不幸的是,我无法同时发送多个闪存(相同或不同类型的(,但我认为无论如何 https://gist.github.com/brianmacarthur/a4e3e0093d368aa8e423 都会将其作为中间件方法的限制进行讨论。 随着我了解更多,也许我会解决这个问题,但无论如何我目前没有多条闪存消息的用例:)