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

Question

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

谢谢！

Answer 1

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

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

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

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

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

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

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

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

Answer 2

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

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

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

Answer 3

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

如果您使用两个参数

req.flash(type, message);

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

req.flash(type);

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

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

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

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

Answer 4

如果您使用 visionmedia 的 express-messages 帮助模块，它会变得非常简单。Github 链接

正如模块文档中所说：

使用 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');

Answer 5

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

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

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

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

这是我的一些代码。

服务器.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>
    <% } %>
<% } %>