【问题标题】:How to send flash messages in Express 4.0?如何在 Express 4.0 中发送 Flash 消息?
【发布时间】:2014-06-03 08:29:57
【问题描述】:

所以我的 Web 应用程序需要身份验证,并且我有一个注册页面,如果此人尝试使用数据库中已有的电子邮件进行注册,我想向他们显示一条错误消息。我正在尝试在 html 端使用此代码:

 <% if (message.length > 0) { %>
   <div class="alert alert-danger"><%= message %></div>
 <% } %>

在我的路线中这样做:

router.get('/signup', function(req, res) {
  res.render('/signup', { message: req.flash('signupMessage') });
});

我尝试使用以下内容设置配置:

app.configure(function() {
 app.use(express.session({ secret : 'keyboard cat' })); 
});

但这给了我一个 TypeError:

 12:11:38 web.1  | app.configure(function() {
 12:11:38 web.1  |     ^
 12:11:38 web.1  | TypeError: Object function (req, res, next) {

我真的很困惑,因为我知道我需要会话才能让 Flash 正常工作,但会话似乎对我不起作用。我也尝试过使用 req.session.messages 只使用会话而不使用 flash,但由于我没有会话工作,这显然不起作用。

有什么见解吗? 我正在使用 Express 4.0.0 谢谢

【问题讨论】:

    标签: javascript node.js express session


    【解决方案1】:

    这个要点应该回答你的问题:

    https://gist.github.com/raddeus/11061808

    在您的应用程序设置文件中:

    app.use(flash());
    

    在设置会话和 cookie 解析器后立即添加。这就是您使用 flash 所需的全部内容。

    您正在使用:

    req.flash('signupMessage', anyValue);
    

    在重定向到 /signup 之前对吗?

    这是我目前用于个人网站的一个有趣的小花絮(在我的主应用程序文件中):

    app.use(function(req, res, next){
        res.locals.success_messages = req.flash('success_messages');
        res.locals.error_messages = req.flash('error_messages');
        next();
    });
    

    现在每个视图都可以访问您闪现的任何错误或成功消息。很适合我。

    最后一件事(这很挑剔,但您可能会获得一些知识)。如果你改变:

    <% if (message.length > 0) { %>
    

    到:

    <% if (message) { %>
    

    如果消息未定义,它将以相同的方式工作,但不会失败。 undefined 和空字符串在 javascript 中都被认为是“假”值。

    编辑:我的 cookie/session/flash 设置如下:

    app.use(cookieParser('secretString'));
    app.use(session({cookie: { maxAge: 60000 }}));
    app.use(flash());
    

    也许查看您的应用程序设置代码会有所帮助。另请注意,在 Express 4 中不再需要使用 app.configure。

    最终编辑:https://gist.github.com/raddeus/11061808

    这是一个有效的例子。运行该应用程序后转到 localhost:3000,您应该会在屏幕上看到 ['it worked']

    【讨论】:

    • 但是我的会话和 cookie 解析器设置给了我错误,是的,我正在使用该调用重定向到 /signup
    • 所以我只是添加了这些行而不是我的配置,我现在回到错误错误:大多数中间件(如 cookieParser)不再与 Express 捆绑,必须单独安装。请参阅github.com/senchalabs/connect#middleware
    • @BHendricks 然后将var cookieParser = require('cookie-parser'); 添加到文件顶部。并运行npm install --save cookie-parser
    • 我已经做到了,但仍然得到同样的错误:/
    • @BHendricks 我添加了一个完整的工作要点。确保在运行之前使用 npm 安装依赖项。请注意,它不会通过 http 响应,但应将 flash 消息记录到您的控制台。
    【解决方案2】:

    https://gist.github.com/brianmacarthur/a4e3e0093d368aa8e423

    我最初也对 Express 4 中的 Flash 消息感到困惑。对我来说,这种困惑部分源于 Flash 消息的概念(模板可用的临时消息)与 Flash 消息的各种实现之间的区别,后者包括express-flash、其他模块和自定义中间件。

    只是为了扩展上述 Thad Blankenship 的出色响应,我为初学者创建了一个 Gist,其中包括两种 Flash 消息的方法——express-flash 模块和自定义中间件——以玉、ejs 或把手呈现。

    自述文件包含有关express-flash 公开的getter--req.flash(type)--和setter--req.flash(type, message)--方法的详细信息,以及它们与利用res.localsreq.session 公开的对象有何不同express-session 在自定义中间件中。

    【讨论】:

    • 祝福你的心。
    【解决方案3】:

    要显示 flash 消息,您必须使用 cmd 在项目中安装 flash 模块。

    npm install express-session --save
    
    npm install cookie-parser --save
    
    npm install connect-flash --save
    

    现在您必须在 app.js 文件中添加一些代码才能访问这些模块。让我们添加这些代码。

    var session = require('express-session');
    
    var cookieParser = require('cookie-parser');
    
    var flash = require('connect-flash');
    
    var app = express();
    
    app.use(cookieParser('secret'));
    
    app.use(session({cookie: { maxAge: 60000 }}));
    
    app.use(flash());
    

    现在生成flash消息

    req.flash('success', 'Registration successfully');
    res.locals.message = req.flash();
    

    要在视图文件中显示 Flash 消息,请使用代码

    <% if(locals.message){ %>
        <div class="alert alert-success" role="alert">
            <strong>Well done!</strong> <%=message.success%>
        </div>
    <% } %>
    

    【讨论】:

    • 我想知道我们如何确保前端知道它是success 消息还是error
    【解决方案4】:

    在研究了两天并想放弃很多之后,我终于找到了如何使用 connect-flash(你不需要 cookie-parser)一些主要的东西使用(返回 res.redirect)而不是 res .render 它不喜欢为回调渲染我不知道为什么。看看我的代码以获得视觉效果。

    app.js

    var express                 = require("express"),
        bodyParser              = require("body-parser"),
        mongoose                = require("mongoose"),
        passport                = require("passport"),
        LocalStratagy           = require("passport-local"),
        User                    = require("./user"),
        passportLocalMongoose   = require("passport-local-mongoose"),
        flash                   = require('connect-flash'),
        app                     = express();
        //using express-session
    app.use(require("express-session")({
        secret:"The milk would do that",
        resave: false,
        saveUninitialized: false
    }));
    app.use(flash());
    
    app.use(function(req, res, next){
        res.locals.message = req.flash();
        next();
    });
    
    
    //connectiong to a specific database
        mongoose.connect("mongodb://localhost/LoginApp");
    
    
        //so body-parser works
    app.use(bodyParser.urlencoded({extended: true}));
    
    //making it so express uses the public dir
    app.use(express.static("public"));
    
    //setting the view engine to ejs
    app.set("view engine", "ejs");
    
    
    // so passport works
    app.use(passport.initialize());
    app.use(passport.session());
    
    //authenticated data from the login form
    passport.use(new LocalStratagy(User.authenticate()));
    
    //reading the data and encoding it
    passport.serializeUser(User.serializeUser());
    
    //reading the data and unencoding it
    passport.deserializeUser(User.deserializeUser());
    
    
    //ROUTES
    app.get("/", function(req, res){
        res.render("index");
    });
    
    
    // AUTH ROUTES
    
    //show login
    app.get("/login", function(req, res){
        req.flash("error", "")
        res.render("Login");
    });
    
    //handle login form data
    app.post("/login", passport.authenticate("local",{
        failureRedirect: "/login",
        failureFlash: true,
    }) ,function(req, res){
        req.flash("success", "Logged in");
        return res.redirect("/");
    });
    
    //Show signup form
    app.get("/signup", function(req, res){
        res.render("Signup");
    });
    
    //handle signup form data
    app.post("/signup", function(req, res){
        User.register(new User({username: req.body.username}), req.body.password, function(err, user){
            if(err){
                req.flash("error", err.message);
                return res.redirect("/signup");
            }
            passport.authenticate("local")(req, res, function(){
                req.flash("success", "successfuly Signed up");
                return res.redirect("/");
            });
        });
    });
    
    
    
    app.listen(3000, function(){
        console.log("server started");
    });
    

    Header.ejs

      <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <meta name="description" content="Fully responsive project with a backend">
            <link rel="stylesheet" href="main.css">
            <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
            <!-- animated css -->
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
    
            <!-- Bootstrap CSS -->
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
            <title>wire frame chal</title>
        </head>
        <body>
    
            <h1><%= message.error %></h1>
            <h1><%= message.success %></h1>
    

    登录.ejs

       <% include ../partials/header %>
    <form method="POST" action="/login">
        <input type="text" name="username" placeholder="username">
        <input type="password" name="password" placeholder="password">
        <button>Submit</button>
    </form>
    
    
    <% include ../partials/footer %>
    

    注册.ejs

      <% include ../partials/header %>
    
    <form method="POST" action="/signup">
        <input type="text" name="username" placeholder="username">
        <input type="password" name="password" placeholder="password">
        <button>Submit</button>
    </form>
    
    
    <% include ../partials/footer %>
    

    【讨论】:

      【解决方案5】:

      这可能是一个老帖子,但我刚刚意识到express-flash-2。 Express 4 的问题似乎更少,似乎解决了我所有的问题。

      npm link

      【讨论】:

        【解决方案6】:

        在我的情况下,如果我将消息显示部分放在另一个 EJS 文件中并将其导入我的布局中,我会得到成功和错误,因为寻呼机刚刚加载,所以最初都没有任何文本显示

        _message.ejs

        <% if(success_msg) { %>
            <div class="alert alert-success">
                <%= success_msg %>
            </div>
        <% } %>
        
        <% if(error_msg) { %>
            <div class="alert alert-danger">
                <%= error_msg %>
            </div>
        <% } %>
        

        【讨论】:

          【解决方案7】:

          易于使用但未维护的“express-flash-messages”包对我有用。在此处查看代码:https://github.com/s2t2/express-app-prep-2021/pull/1/files

          应用配置:

          var session = require('express-session')
          var flash = require('express-flash-messages')
          
          var SESSION_SECRET = process.env.SESSION_SECRET || "super secret"
          
          app.use(session({
            cookie: { maxAge: 60000},
            secret: SESSION_SECRET,
            name: 'stocks-app-session',
            resave: true,
            saveUninitialized: true
          }));
          app.use(flash()) 
          

          路线:

          req.flash("danger", "OOPS, Please check your inputs and try again.")
          

          这里使用 Bootstrap 样式:

              <!--
                  FLASH MESSAGES
                  https://github.com/visionmedia/express-messages#rendering-messages
              -->
              <div class="flash-container">
                 <% const messages = getMessages() %>
          
                 <% if (messages) { %>
                      <% Object.entries(messages).forEach((obj) => { %>
                          <% var category = obj[0] %>
                          <% var message = obj[1] %>
                          <!--
                              BOOTSTRAP ALERTS
                              https://getbootstrap.com/docs/5.0/components/alerts/#dismissing
                          -->
                          <div class="alert alert-<%= category %> alert-dismissible fade show" role="alert" style="margin-bottom:0;">
                              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                              <%= message %>
                          </div>
                      <% }) %>
                 <% } %>
              </div>
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 2014-03-11
            • 2011-08-18
            • 2016-06-12
            • 1970-01-01
            • 2020-09-07
            • 1970-01-01
            • 2020-07-18
            相关资源
            最近更新 更多