【问题标题】:Jade html not updated after a redirect in Express.js在 Express.js 中重定向后 Jade html 未更新
【发布时间】:2015-12-18 14:31:26
【问题描述】:

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

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

在下面的代码中,我记录了会话数据并将 Flash 消息设置为变量。如果 Flash 消息的数组为空(即在页面加载时),则设置一个数组,其中包含这样的消息。如果 flash message(s) 数组包含 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());

我对@9​​87654334@ 比较陌生,所以我觉得可能有一些我忽略或不理解的小东西,但我已尝试尽可能详细,所以我希望有人可以帮助我在这里!

【问题讨论】:

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


    【解决方案1】:

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

    我解决了这个问题,只需删除我的 AJAX 请求,然后返回到我的 HTML 并更改我的表单属性(我通过 AJAX 发送其数据的表单)以包含 method="POST"action="/add"。这是对我的router.post('/add') 进行服务器端调用的正确方法。

    我发现有人遇到了同样的问题herethis question 最初引导我研究 AJAX/客户端与服务器端的问题。我在@herbyme 对this post 的评论中发现了后一个问题。

    【讨论】:

    • 哇,这似乎是一个对任何人都没有用的特定错误。但我只是做了几乎完全相同的事情!这为我节省了很多时间。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-08-16
    • 2015-08-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多