在Express.js

时间:2015-09-21 19:13:07

标签: ajax node.js express pug connect-flash

我目前在使用Jade的模板引擎和连接闪存在Express.js中显示Flash消息时遇到了一些问题。当用户尝试将新的User对象添加到已存在的数据库时,我只是尝试刷新错误消息。但是,在调用router.post并重定向回索引(下面的代码)后,我的页面上没有显示flash消息。

通过各种console.logs和调试,我发现我发布的数据确实是正确发布的,并且正在设置flash消息。我发现在重定向上,所有正确的数据都传递给Jade模板,但变量没有在文件本身中更新。我现在想知道这是一个与会话相关的问题,还是我完全忽视的Flash / Jade / Express相关内容?

在下面的代码中,我记录会话数据以及将flash消息设置为变量。如果闪存消息的数组为空(即在页面加载时),则会设置一个数组,其中包含一条消息。如果flash消息数组包含flash消息,则测试数组将设置一条消息,表示如此。

index.js

router.get('/', function(req, res, next) {
    console.log(req.session);
    var testArray;
    var errorMessages = req.flash('user-error');
    if (errorMessages.length === 0)
        testArray = ['errorMessages is empty'];
    else
        testArray = ['errorMessages contains a message now'];
    console.log(errorMessages);
    console.log(testArray);
    res.render('index', { 
        message: errorMessages,
        tester: testArray, 
        ...other irrelevant vars being passed...
    });
});

router.post('/add', function(req, res, next) {
    var ajaxData = req.body;
    console.log(ajaxData);

    User.findOne({name: ajaxData.name}, function(err, user) {
        if (err) return console.error(err);
        // if User DNE already in DB
        if (user === null) {
            ...new user created and saved here...
        }
        /*where the important stuff begins*/
        else {
            console.log("flash message set");
            req.flash('user-error', "A user with that name already exists!");
        }
        // redirect to index
        res.redirect('/');
    });
});

在我的Jade模板中,我再次记录errorMessages和testArray以确保所有内容都正确传递给文件(然后是)然后显示变量。

index.jade

-console.log(message);
-console.log(tester);
.error-box Error: #{message}
.error-box Error: #{tester}

最初加载页面,我将得到以下HTML输出:

<div class="error-box">Error: </div>
<div class="error-box">Error: errorMessages is empty</div>

这里没有惊喜。但是,当我提交包含设置错误消息的数据的表单时,我会从router.get('/')index.jade获取包含正确的errorMessagestestArray变量的更新日志。但是我的HTML输出保持不变:

<div class="error-box">Error: </div>
<div class="error-box">Error: errorMessages is empty</div>

显然,传递给Jade的变量正在正确更新,但看起来Jade并没有更新HTML。由于我对connect-flash和Jade的工作方式知之甚少,这会让我相信这是与会话相关的问题,但我app.js中的代码似乎设置正确...

var session = require('express-session');
var flash = require('connect-flash');
app.use(session({
  secret: 'secret',
  cookie: { maxAge: 60000 },
  resave: false,
  saveUninitialized: false
}));
app.use(flash());

我对Express.js相对较新,所以我觉得可能有一些我忽视或不明白的东西,但我试图尽可能详细,所以我希望有人可以帮帮我吧!

1 个答案:

答案 0 :(得分:2)

经过仔细检查后,我发现导致问题的原因是res.redirect('/')没有运行,因为我试图在客户端使用AJAX来调用router.post('/add')

我通过简单地删除我的AJAX请求,然后回到我的HTML并更改我的表单属性(我通过AJAX发送的数据的表单)来包含method="POST"和{{1 }}。这是对我的action="/add"进行SERVER SIDE调用的正确方法。

我发现有人遇到了同样的问题here,而this question最初让我调查了AJAX /客户端与服务器端问题。我在this post的@herbyme的评论中找到了后一个问题。