Как отправить флеш-сообщения в Express 4.0?

Ответ 1

Этот вопрос должен ответить на ваш вопрос:

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

в файле настроек приложения:

app.use(flash());

Положите это сразу после настройки сеанса и анализатора файлов cookie. Это действительно все, что вам нужно для использования вспышки.

Вы используете:

req.flash('signupMessage', anyValue);

перед тем, как перенаправлять/записывать права?

Здесь интересный маленький лакомый кусочек, который я сейчас использую для личного сайта (в моем основном файле приложения):

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. undefined, а пустые строки считаются значениями "ложных" в javascript.

EDIT: Моя настройка cookie/session/flash выполняется следующим образом:

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

Возможно, вам поможет ваш код настройки приложения. Также обратите внимание, что использование функции app.configure больше не требуется в Express 4.

Окончательное редактирование: https://gist.github.com/raddeus/11061808

Это рабочий пример. Перейдите в localhost: 3000 после запуска этого приложения, и вы увидите ['it worked'] на вашем экране.

Ответ 2

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

Я тоже был изначально запутан флеш-сообщениями в Express 4. Путаница для меня возникла частично из различия между концепцией флэш-обмена сообщениями, временным сообщением, доступным шаблону, и различными реализациями флэш-сообщений, которые включают express-flash, другие модули и настраиваемое промежуточное программное обеспечение.

Чтобы развернуть отличный ответ от Thad Blankenship выше, я создал Gist для новичка, который включает в себя два подхода к флэш-сообщениям - модуль express-flash и настраиваемое промежуточное программное обеспечение - отображаемое в jade, ejs или handlebars.

В файле readme содержатся сведения об методах getter - req.flash(type) - и setter - req.flash(type, message), выставленных express-flash и о том, как они отличаются от использования объектов res.locals и req.session express-session в пользовательском промежуточном программном обеспечении.

Ответ 3

Чтобы показать флеш-сообщение, вы должны установить флеш-модуль в свой проект с помощью cmd.

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());

Теперь создайте флеш-сообщение

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

Чтобы показать флэш-сообщение в файле вида, используйте код

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

Ответ 4

После двухдневного исследования и желания отказаться от LOT я наконец-то узнал, как использовать connect-flash (вам не нужен cookie-парсер), несколько основных вещей используют (возвращайте 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>

Login.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 %>

Signup.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

Ответ 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>
<% } %>