外部 css 文件破坏了玉视图

Question

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

我使用所有路由和视图构建我的应用程序逻辑，并且一切正常，直到我想将更多样式扩展到我使用 Jade 构建它们的视图，就像使用 Express 一样，我所做的唯一更改是我包含引导到我的 layout.jade

link(rel="stylesheet", href="bootstrap.min.css")

我的应用因 500 错误而中断。 注意位于公共文件夹中的 bootstrap.min.css，我还注意到在控制台中我在错误之前得到了正确的响应。

这是我得到的错误：

错误：无法在视图目录中查找视图“错误” “C:\Users\myuser\Desktop\mySpace\myApp\views”在 Function.app.render (C:\Users\myuser\Desktop\mySpace\myApp\node_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;
}

Answer 1

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

这里需要解决三个问题：

• 假设 bootstrap.min.css 位于“公共”根目录中，并且打算在站点范围内使用，它应该与绝对路径“/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 的默认错误处理程序。