使用Connect-flash和Jade显示警告信息

Question

我正在使用node.js、express和Passport构建一个具有登录认证的网站。对于注册页面，我希望在用户名已被占用时发送一条消息。目前以下代码可以正常工作，但我想添加一个“警报”类型的消息，带有略微红色的背景和突出显示的文本。

signup.jade的代码如下：

          div(class="col-lg-12")
                form(class="form" method="post" action="/SignupForm")
                    -if(message)
                        div#note #{message}                      
                    label(class="col-lg-12") username
                    input(type="text" name="username")
                    br
                    label(class="col-lg-12") password
                    input(type="password" name="password")
                    br
                    label(class="col-lg-12") email
                    input(type="email" name="email")
                    br
                    input(type="submit" value="Signup")

我的路由代码如下（它在module.exports中）：

app.get('/SignupForm', function(req,res){                                       
    res.render('SignUp', {message: req.flash('signupMessage')});
});

app.post('/SignupForm', passport.authenticate('localSignup', {
    successRedirect: '/',
    failureRedirect: '/SignupForm',
    failureFlash: true
}));

最后，关于 Passport.js 文件，这是代码：

passport.use('localSignup', new localStrategy({
    usernameField: 'username',
    passwordField: 'password',
    passReqToCallback: true
},
    function (req, username, password, done) {
        process.nextTick(function () {
            User.findOne({'username' : username}, function (err, user) {
                if (err)
                    return done(err);
                else if (user){
                    return done(null, false, req.flash('signupMessage', 'User already taken'));
                } else {
                    var newUser = new User({username: username, password: password);
                    newUser.save(function (err) {
                        if (err) throw err;
                        return done (null, newUser);
                    });
                }
            });
        });
    })
);

顺便说一下，我已经尝试使用 Bootstrap 警告消息，像这样：

.alert.alert-danger !{ message }

但是这会立即在注册页面内显示一个突出显示的区域，尽管消息还没有被发送。

- asantiagot

Answer 1

根据您的说法，上述代码运行良好，除了即使尚未发送消息也会显示消息。 要解决此问题，您可以修改您的html / jade文件如下：

if message
    .alert.alert-danger #{message}

这段代码将只在消息由服务器发送时显示。如果消息未发送，则 message 的值不存在，代码也不会执行。

希望对你有所帮助。如果没有，请编辑问题并提供更多细节。

- suraj

---

你好，谢谢你的回复。不幸的是，你提供的代码仍然会在页面内显示一个高亮区域，即使还没有发送消息。我设法用一种不太优雅的方式解决了这个问题，通过将字符串“用户已被占用”放置在jade文件中的if条件中，这样，如果没有发送消息，则不会显示任何高亮区域。感谢你的回答。 - asantiagot

Answer 2

代码不是最好的，但它能工作。

Jade文件：

-if(message == 'User already taken')
      .alert.alert-danger #{message}

如果没有发送任何消息，页面内部不会有任何突出显示的区域。只有当Jade文件接收到字符串“用户已被占用”时，才会显示该消息。

- asantiagot