如何在节点应用程序中使用物化吐司答案

【问题标题】：how to use materialize toast in node app如何在节点应用程序中使用物化吐司
【发布时间】：2018-08-13 22:33:46
【问题描述】：

我有一个 node/express 应用程序。在前端，我正在使用物化 css，我想在我的用户注销时使用它的 toast 功能。

以下是我的注销路线的代码：

// logout user
router.get('/logout', (req, res) => {
    req.logout();
    req.flash('success_msg', 'You are logged out');
    res.redirect('/');
});

我想在我的用户注销时使用类似以下内容：

 M.toast({html: 'I am a toast!'})

我有一个名为 _msg.handlebars 的部分，我在其中定义了由 server.js 中的全局变量捕获的错误和成功消息的部分：

{{#if success_msg}}
<div class="alert alert-success">{{success_msg}}</div>
{{/if}} {{#if error_msg}}
<div class="alert alert-danger">{{error_msg}}</div>
{{/if}} {{#if error}}
<div class="alert alert-danger">{{error}}</div>
{{/if}}

server.js 文件中的全局变量：

// Global variables
app.use(function (req, res, next) {
    res.locals.success_msg = req.flash('success_msg');
    res.locals.error_msg = req.flash('error_msg');
    res.locals.error = req.flash('error');
    res.locals.user = req.user || null;
    next();
});

因此，我想使用具体化 css toast，而不是显示文本或警报。

请指教！

【问题讨论】：

标签： node.js express materialize express-handlebars

【解决方案1】：

我修改了我的 _msg.handlebars 如下：

{{#if success_msg}}

<body onload="M.toast({html: '{{success_msg}}'})">

</body>
{{/if}} {{#if error_msg}}

<body onload="M.toast({html: '{{error_msg}}'})">

</body>
{{/if}} {{#if error}}

<body onload="M.toast({html: '{{error}}'})">

</body>
{{/if}}

到目前为止工作完美，但如果有更好的建议，请提出建议。

【讨论】：

非常感谢。您也可以通过示例#toast-container { top: 10% !important; right: 50% !important; } 更改将代码添加到css文件的位置