首页 文章

在bootstrap和哈巴狗的警报

提问于
浏览
-1

我想知道我是否理解了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 回答

  • 0

    您还需要在公共文件夹旁边提供 bootstrapjquery 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不可用时可以使用本地版本)

相关问题