Question

我想知道我是否了解connect-flash / bootstrap / sessions的工作原理。我确实看到Flash消息按预期出现。我的问题是与“成功”和“危险”相关的颜色。当消息按预期显示时，我看不到相关的颜色，

下面是package.json的位

{
  "dependencies": {
    "body-parser": "^1.18.3",
    "bootstrap": "^4.1.3",
    "connect-flash": "^0.1.1",
    "cookie-parser": "^1.4.3",
    "express": "^4.16.4",
    "express-messages": "^1.0.1",
    "express-session": "^1.15.6",
    "express-validator": "^5.3.0",
    "mongoose": "^5.3.15",
    "pug": "^2.0.3"
  },
  "devDependencies": {
    "nodemon": "^1.18.7"
  }
}

在我的app.js中，

const express = require('express');
const path = require('path');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const expressValidator = require('express-validator');
const flash = require('connect-flash');
const session = require('express-session');

// express session middleware

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

// express messages middleware

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

app.use(flash());

// my routes

let quotes = require('./routes/quotes');
let subscribers = require('./routes/subscribers');
app.use('/quotes', quotes);
app.use('/subscribers', subscribers);

// In my subscribers route,
router.post('/subscribe', function (req, res) 
{
// logic to save to my database here

req.flash('success', 'Subscription confirmed.');
res.redirect('back');
});

在我的services.pug文件中，

link(rel='stylesheet', href='/css/style.css')
    link(rel='stylesheet' href='/node_modules/bootstrap/dist/css/bootstrap.css')
// other code in here
.container
                h1 Subscribe to our newsletter
                //- include subscribe.pug
                form(method='POST', action= '/subscribe')
                    input(name = 'email',type='email', placeholder='Enter email')
                    button.button1(type='submit') Subscribe
                    != messages('message',locals)

// at the bottom

script(src='/node_modules/jquery/dist/jquery.js')
    script(src='/node_modules/bootstrap/dist/js/bootstrap.js')

在我的message.pug中，

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

就像我上面提到的，消息按预期出现。但是我没有看到绿色代表成功，红色代表危险，正如我在教程中看到的那样。我只看到消息与页面的背景色混合在一起。我想知道我在想什么。

更新

在检查chrome上的控制台时，我发现了附件错误消息。我也包括了项目的目录结构。该应用程序未找到bootstrap.css和jquery.js。

这是我在app.js中设置公用文件夹的地方，

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

node_modules文件夹也可用。

谢谢

Answer 1

您还需要在公共文件夹旁边提供bootstrap和jquery dist 文件夹：

// set public folder
app.use(express.static(path.join(__dirname, 'public')));
// serve bootstrap and jquery
app.use(express.static(path.join(__dirname, 'node_modules', 'bootstrap', 'dist')));
app.use(express.static(path.join(__dirname, 'node_modules', 'jquery', 'dist')));

并使用它们（确保样式在head标签中）：

link(rel='stylesheet' href='/css/bootstrap.css')
link(rel='stylesheet' href='/css/style.css')

和：

script(src='jquery.js')
script(src='/js/bootstrap.js')

当然，在生产中，您应该使用缩略版本（即bootstrap.min.js）或仅使用 CDN （或两者都使用：当CDN不可用时，请使用本地版本）

引导程序和帕格警报

1 个答案: