我想知道我是否理解了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}
就像我上面提到的那样,消息按预期显示 . 但是我没有看到与成功相关的绿色和危险的红色,正如我在随后的教程中看到的那样 . 我只是看到与页面背景颜色混合的消息 . 我想知道我错过了什么 .
UPDATE
在chrome上检查控制台时,我发现了附加的错误消息 . 我也包含了项目的目录结构 . 应用程序找不到bootstrap.css和jquery.js .
这是我在app.js中设置我的公共文件夹的地方,
// set public folder
app.use(express.static(path.join(__dirname, 'public')));
node_modules文件夹也可用 .
谢谢
1 回答
您还需要在公共文件夹旁边提供
bootstrap
和jquery
dist文件夹:并使用它们(确保样式在
head
标签中):和:
当然在制作中你应该使用缩小版本(即:
bootstrap.min.js
)或简单地使用 CDN (或两者:当CDN不可用时可以使用本地版本)