Блог

У меня есть приложение с несколькими маршрутами, и я хочу отправлять flash-сообщения разных типов с учетом взаимодействия с пользователем: либо сообщение об успехе, либо сообщение о сбое, либо, в некоторых случаях, никакого сообщения. Прямо сейчас сообщения не отображаются, и я не могу понять, как заставить это работать. Я использую Node, Express и Pug.

У меня есть server.js файл, routes.js файл, файл message.pug и файл layout.pug. Вот мои файлы:

server.js

 // init project
const express = require('express');
const app = express();
const bodyparser = require("body-parser");
const flash = require('connect-flash');
const passport = require("passport");
const session = require("express-session");

// http://expressjs.com/en/starter/static-files.html
app.use(express.static("public"));
app.set('view engine', 'pug');

// bodyparser middleware
app.use(bodyparser.urlencoded({ extended: false }));
app.use(bodyparser.json());

// express-session middleware
app.use(session({
  secret: process.env.SECRET,
  resave: true,
  saveUninitialized: true
}));

// express-messages middleware
app.use(flash());
app.use((req, res, next) => {
  res.locals.messages = require('express-messages')(req, res);
  next();
});

app.use(express.json());

// import passport-config file
require("./passport-config")(passport);

// passport middleware
app.use(passport.initialize());
app.use(passport.session());

const routes = require('./routes.js');
routes(app);

// listen for requests :)
const listener = app.listen(process.env.PORT, () => {
  console.log('Your app is listening on port '   listener.address().port);
});
  

routes.js

 app.get('/', (req, res) => {
  req.flash("success", "your flash messages are working");
  res.redirect("/admin");
});


app.get("/admin", (req, res) => {
    res.render(process.cwd()   '/views/pug/admin');
  });
  

message.pug

 .messages
  each type in Object.keys(messages)
    each message in messages[type]
      div(class="alert alert-"   type) #{ message }
      // expected output
      // div(class="alert alert-success") your flash messages are working
  

layout.pug

 div.col-10.ml-sm-auto.px-4
  != messages('message', locals)
  

Поскольку я отправлял только два типа сообщений — success или error — я избавился от своего файла messages.pug и использовал следующий код, который работает.

server.js

 // init project
const express = require('express');
const app = express();
const bodyparser = require("body-parser");
const flash = require('connect-flash');
const passport = require("passport");
const session = require("express-session");


// http://expressjs.com/en/starter/static-files.html
app.use(express.static("public"));
app.set('view engine', 'pug');

// bodyparser middleware
app.use(bodyparser.urlencoded({ extended: false }));
app.use(bodyparser.json());

// express-session middleware
app.use(session({
  secret: process.env.SECRET,
  resave: true,
  saveUninitialized: true
}));

// express-messages middleware THIS IS WHAT I CHANGED
app.use(flash());
app.use((req, res, next) => {
  res.locals.errors = req.flash("error");
  res.locals.successes = req.flash("success");
  next();
});

app.use(express.json());

// import passport-config file
require("./passport-config")(passport);

// passport middleware
app.use(passport.initialize());
app.use(passport.session());

const routes = require('./routes.js');
routes(app);

// listen for requests :)
const listener = app.listen(process.env.PORT, () => {
  console.log('Your app is listening on port '   listener.address().port);
});
  

routes.js (то же, что и раньше)

 app.get('/', (req, res) => {
  req.flash("success", "your flash messages are working");
  res.redirect("/admin");
});


app.get("/admin", (req, res) => {
    res.render(process.cwd()   '/views/pug/admin');
  });
  

Затем в макете я использую следующее:

 div.col-10.ml-sm-auto.px-4
    if successes
      for success in successes
        div.alert.alert-success #{ success }
    if errors
      for error, i in errors
        div.alert.alert-danger #{ error }
  

Это работает для отображения сообщения при перенаправлении.

Примечание: Если вы хотите отобразить сообщение напрямую (через res.render()), вы должны передать его методу render напрямую следующим образом:

 app.get('/admin', (req, res) => {
  req.flash("success", "flash message for a render method");
  res.render("/admin", { successes: req.flash("success") });
});