如何将 req.flash() 与 EJS 一起使用？

Posted 2023-02-22

【中文标题】如何将 req.flash() 与 EJS 一起使用？

【英文标题】：How do I use req.flash() with EJS?

【发布时间】：2012-06-27 00:38:00

【问题描述】：

我希望能够使用 Express 和 EJS 向客户端发送消息。我已经翻遍了，但仍然找不到示例或教程。有人能告诉我最简单的闪现消息的方法吗？

谢谢！

【问题讨论】：

喜欢这个链接兄弟，通俗易懂npmjs.com/package/req-flash

【参考方案1】：

我知道这是一个老问题，但我最近在尝试自己理解 Flash 消息和模板时遇到了这个问题，所以我希望这对我遇到的其他人有所帮助。考虑到 Express 4、express-flash 模块和一个 ejs 模板的情况，这里有 2 条路由和一个模板可以帮助您入门。

首先生成您要显示的 Flash 消息。这里app.all() 方法映射到/express-flash。请求baseurl/express-flash 在重定向到baseurl/ 之前使用req.flash(type, message) setter 方法创建消息。

app.all('/express-flash', req, res ) 
  req.flash('success', 'This is a flash message using the express-flash module.');
  res.redirect(301, '/');

下一步将消息映射到目标路由baseurl/的res.render()方法中的模板。这里req.flash(type) getter 方法返回匹配类型success 的消息，这些消息映射到模板变量expressFlash。

app.get('/', req, res ) 
  res.render('index', expressFlash: req.flash('success') );

最后，在index.ejs中显示expressFlash的值，如果存在的话。

<p> Express-Flash Demo </p>    
<% if ( expressFlash.length > 0 )  %>
  <p>Message: <%= expressFlash %> </p>
<%  %>

然后启动服务器并访问baseurl/express-flash。它应该使用 flash 消息触发重定向到 baseurl/。现在刷新baseurl/，看到消息消失了。

【讨论】：

如需更完整的解释，I created a Gist including an informative readme about flash messaging in Express 4。它包括两种 flash 消息传递方法，一种单独使用 express-session 模块，另一种使用 express-flash 模块。它还包括 ejs、车把和玉中的模板。

感谢@Poison Oak 下班后我才意识到我错过了<%= 中的=！这就是为什么我的消息总是空的！

【参考方案2】：

<% if ( message )  %>
    <div class="flash"><%= message %></div>
<%  %>

这是你想要的吗？您可以使用一些客户端 JS 让它淡出。 jQuery 示例：

var message = $( '.message' );
if ( message.length ) 
    setTimeout( function() 
        message.fadeOut( 'slow' );
    , 5000 );

【参考方案3】：

req.flash()有两种使用方式。

如果你使用两个参数

req.flash(type, message);

其中type 是一种消息，message 是实际消息（两个字符串），然后它将message 添加到type 类型的队列中。将其与一个参数一起使用

req.flash(type);

返回type 类型的所有消息的数组并清空队列。此外，此方法附加到会话，因此它适用于每个会话。换句话说，每个用户都有自己的一组闪存队列。所以在你看来，你可以这样做：

var messages = req.flash('info');

然后将messages 变量发送到模板并在那里使用它（注意messages 是一个数组，您可以对其进行迭代）。请记住，使用req.flash('info', 'test'); 将为当前用户（与req 对象关联）附加info 类型的test 消息only。

请记住，这种机制非常薄弱。例如，如果用户双击链接（两个请求发送到服务器），那么他将看不到消息，因为第一次调用将清空队列（当然除非请求生成消息）。

【讨论】：

这仍然没有告诉我如何在模板 (EJS) 中显示它。我已经知道req.flash() 的工作原理了。

所以你不知道如何使用模板引擎？那你为什么要问req.flash()？这与flash 无关。你知道如何在 EJS 中传递和使用变量吗？

我从没这么说过。我的意思是，如何在我的视图中显示它？是的，多年来一直在使用 Express + EJS。只是永远不必使用闪存消息。它确实与flash有关，我想知道我如何在我的视图中显示flash消息。

这与显示正常的字符串数组有什么不同？？

我不知道，为什么不告诉我，因为我不知道哪些变量会传递给视图。如果我知道这一点，我就不会发布这个问题了。

【参考方案4】：

如果你使用 visionmedia 的 express-messages helper 模块，它会变得非常简单。 Github link

正如模块文档中所说：

使用 npm 安装模块

npm install express-messages

然后在 app.config 中为消息分配一个动态帮助器：

app.dynamicHelpers( messages: require('express-messages') );

在你的 EJS 文件中，在你想要你的消息的地方插入以下内容

<%- messages() %>

EJS 将其呈现为：

<div id="messages">
  <ul class="info">
    <li>Email queued</li>
    <li>Email sent</li>
  </ul>
  <ul class="error">
    <li>Email delivery failed</li>
  </ul>
</div>

（当然，您可以在模块代码中更改它呈现的内容）

然后，要实际显示一条消息，请调用：

req.flash('info', 'Your message goes here');

【讨论】：

很抱歉对旧帖子发表评论，但 express-messages 现在仅适用于 Express 2.x。

【参考方案5】：

我也在为此苦苦挣扎；让我的 Flash 消息出现在我的 .ejs 中。 但是，我终于让它工作了，这就是我所理解的。

一旦调用了 getter req.flash('_msgName_');，它就会被清除！

当你app.use(session()); cookie 必须等于cookie: maxAge: 720 时，本质上是一个很大的数字。

我使用 console.log() 来测试 getter，它显示在我的控制台中，但不在我的 .ejs 中。我把 console.log() 拿出来，它工作了。

这是我的一些代码。

Server.js ~

app.get('/', function(req, res) 
    // This is where we will retrieve the users from the database and include them in the view page we will be rendering.
    User.find(,function(err, allUsers)
        if(err)
            console.log("Oh no we got an error\n ERROR :: "+err);
         else 
            // console.log(allUsers);
            res.render('index',users : allUsers, msg : req.flash('vError'));
        
    );
);

// Add User Request 
app.post('/users', function(req, res) 
    console.log("REQUESTED DATA:\t", req.body);
    var user = new User(
        
            name: req.body.name, 
            age: req.body.age
        
    );
    // Saves user to DB.
    user.save(function(err) 
        if(err) 
            console.log('OOPS, Something went Wrong... \n ERROR :: '+err+'\n');
            for(var key in err.errors)
                // console.log(err.errors[key].message);
                req.flash('vError', err.errors[key].message);
            
            // **HERE I WAS ACCIDENTALLY CLEARING IT!!!** \\
            // console.log(req.flash('vError')); 
            // res.render('index',users : [], msg : req.flash('vError'));
            res.redirect('/');
         else  
          console.log('\tSuccessfully added a new User to the DB!');
          res.redirect('/');
        
    )
);

index.ejs ~

<% if(msg.length > 0)  %> 
    <% for (var error in msg)  %>
        <h3><%= msg[error] %></h3>
    <%  %>
<%  %>