关于快递留言。我无法获得制作的模板

Question

我希望收到像警报这样的响应，如此处记录：https://github.com/visionmedia/express-messages

默认情况下，我会这样https://i.imgur.com/Lz1F3tt.png

如果我使用模板，我将一无所获https://i.imgur.com/txSknWZ.png

这是我的文件夹结构 https://i.imgur.com/s0qpsnW.png

在我的app.js中

    const express    = require('express');
    const path       = require('path');
    const mongoose   = require('mongoose');
    const bodyParser = require('body-parser');
    const session    = require('express-session');

    const app = express();

    ...

    app.set('views',path.join(__dirname,'views'));
    app.set('view engine','pug');

    app.use(bodyParser.urlencoded({extended:false}));
    app.use(bodyParser.json());

    // set public folder
    app.use(express.static(path.join(__dirname,'public')));


    ...


    app.use(session({
        secret:'keyboard cat',
        resave:true,
        saveUninitialized:true,
        cookie: { maxAge: 6000 }
    }));


   ...

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

     ....

    app.get('/',(req,res)=>{
        req.flash('success','Cek lah');

        res.render('index',{
            title:'TinDev',
        });
    });

  ....

在我的app.pug中

    .container
      //!= messages()
      != messages('message.pug',locals)

在我的message.pug

    .messages
      each type in Object.keys(messages)
        each message in messages[type]
          div(class="alert alert-" + type) #{ message }

我希望有警报之类的输出，

有什么可以向我解释为什么我没有得到想要的输出吗？

Answer 1

我认为您必须将Flash数据应用于render方法。请尝试以下方法：

app.js

app.get('/', (req, res) => {
  req.flash('success', 'Cek lah');

  res.render('index', {
    title: 'TinDev',
    messages: req.flash('success')
  });
});

Answer 2

saya baru saja mendapat solusi untuk tipikal ini dengan tidak menggunakan templat，tetapi memanfaatkan HTML yang telah di-render secara default hanya perlu ditambahkan CSS

像这样：

#messages > .error,.danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    margin: 10px 0;
    border-radius: 8px;
}
#messages .success{
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    margin: 10px 0;
    border-radius: 8px;
}

#messages > .error li, .success li,.danger li {
    list-style: none;
    padding: 5px 0;
}