Javascript 外部css文件破坏了jade视图

Javascript 外部css文件破坏了jade视图,javascript,node.js,express,pug,Javascript,Node.js,Express,Pug,我是node.js新手,如果这个问题的答案太明显,我很抱歉 我用所有的路线和视图来构建我的应用程序逻辑,它工作得很好,直到我想将更多的样式扩展到我的视图,我使用Jade来构建它们,就像我使用Express一样,我所做的唯一更改是我将引导程序包括到我的布局中。Jade link(rel="stylesheet", href="bootstrap.min.css") 我的应用程序出错500次。 注意位于公用文件夹中的bootstrap.min.css,我还注意到在控制台中,我在错误发生之前得到了正

我是node.js新手,如果这个问题的答案太明显,我很抱歉

我用所有的路线和视图来构建我的应用程序逻辑,它工作得很好,直到我想将更多的样式扩展到我的视图,我使用Jade来构建它们,就像我使用Express一样,我所做的唯一更改是我将引导程序包括到我的布局中。Jade

link(rel="stylesheet", href="bootstrap.min.css")
我的应用程序出错500次。 注意位于公用文件夹中的bootstrap.min.css,我还注意到在控制台中,我在错误发生之前得到了正确的响应

以下是我得到的错误:

错误:无法在视图目录中查找视图“错误” Function.app.render上的“C:\Users\myuser\Desktop\mySpace\myApp\views” (C:\Users\myuser\Desktop\mySpace\myApp\node\u modules\express\lib\application.js:493:17)

app.js

  /*
* @ db the string to connect the database as its used in mongoose_connection to store sessions.
*
*/
module.exports = function(items, db){
    var express = require('express');
    // Include the module to enable session using connect-mongo
    var mongoStore = require('connect-mongo')(express);
    // Include the module auth that using passpord module to authnticate user.
    var passport = require('./auth');
    // Include stylus module.
    var stylus = require('stylus');
    var path = require('path');
    var favicon = require('static-favicon');
    var logger = require('morgan');
    var cookieParser = require('cookie-parser');
    var bodyParser = require('body-parser');
    var routes = require('./routes')(items);
    var app = express();

    // Compile function for stylus.
     function compile(str, path) {
        return stylus(str).set('filename', path);
     }

    // view engine setup
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'jade');


    app.use(favicon());
    app.use(logger('dev'));


    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded());
    app.use(cookieParser());


    //Middleware to store sessions 
    app.use(express.session({
        secret : 'keyboard cat',
        store : new mongoStore({
           mongoose_connection : db 
        })
    }));


    // Initialize Passport!  Also use passport.session() middleware, to support
    // persistent login sessions (recommended).
    // using passport as application midleware.
    app.use(passport.initialize());
    // telling session to use session in express.
    app.use(passport.session());



    //stylus middleware
    app.use(stylus.middleware(
        {
            src: __dirname + '/public',
            compile: compile
        }
    ));
    app.use(express.static(path.join(__dirname, 'public')));
    /*
    *Middleware to modifiy the header.
    */
    app.use(function(req,res,next){             
        res.set ('X-Powered-By' , 'Myapp');
        next();
    });
    app.use(app.router);

    app.put('/app/setItem/:id', routes.setItem);
    app.get('/app/findAllItem', routes.findAllitem);
    app.get('/app/findById/:id',routes.findById);
    app.get('/app/getJitems',routes.getJitems);

    /*
    *The routes of the login process 3 routes
    *@ the login form
    *@ the login post information and checking 
    *@ the success redirect route
    */

    // login form route
    app.get('/login', routes.login);
    //  check user route
   app.post('/login', passport.authenticate('local', {
        failureRedirect: '/login',
        successRedirect: '/user'
    }));
    //success login route
    app.get('/user', routes.user);

    /// catch 404 and forwarding to error handler
    app.use(function(req, res, next) {
        var err = new Error('Not Found');
        err.status = 404;
        next(err);
    });

    /// error handlers

    // development error handler
    // will print stacktrace
    if (app.get('env') === 'development') {
        app.use(function(err, req, res, next) {
            res.render('error', {
                message: err.message,
                error: err
            });
        });
    }

    // production error handler
    // no stacktraces leaked to user
    app.use(function(err, req, res, next) {
        res.render('error', {
            message: err.message,
            error: {}
        });
    });
    return app;
}

这是因为它找不到“bootstrap.min.css”,您的404处理程序会抛出一个错误,而不是生成一个响应,并且您没有用于呈现错误响应的模板

这里有三个问题需要解决:

  • 假设bootstrap.min.css位于根“public”目录中,并且打算在站点范围内使用,则它应该与绝对路径“/bootstrap.min.css”链接,如下所示:

    link(rel="stylesheet", href="/bootstrap.min.css")
    
    注意前面的斜杠。如果没有斜杠,像“bootstrap.min.css”这样的路径将被解释为当前位置的同级,这意味着它包含在“/users/500/example”这样的页面上会导致浏览器在“/users/500/bootstrap.min.css”中查找它

  • 您的“404处理程序”实际上应该发送响应,而不是抛出错误

  • 你应该:

    • 创建一个错误模板
    • 将错误处理程序中的res.render调用替换为res.send
    • 或者完全删除错误处理程序并返回到Express的默认错误处理程序

你可以发布你的node.js文件(比如app.js)吗?尝试添加
href=“/stylesheets/bootstrap.min.css”并将引导文件放入
stylesheets`文件夹。最好给出您的代码。
secret:“键盘猫”
-不要在生产代码中使用默认值。我已将代码更改为
链接(rel=“stylesheet”,href=“/bootstrap.min.css”)
,但仍然会收到相同的错误。我真的开始觉得我错过了我的视图,但是,它们在不包含任何css或js文件的情况下工作得很好。