Question

对node.js不熟悉，如果这个问题的答案太明显，我很抱歉

我使用所有路线和视图构建我的应用程序逻辑并且它工作得很好，直到我想将更多样式扩展到我的视图，我使用Jade来构建它们使用Express，我做的唯一更改是我包括bootstrap到我的layout.jade

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

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

这是我得到的错误：

错误：无法查找视图＆＃34;错误＆＃34;在views目录中＆＃34; C：\ Users \ myuser \ Desktop \ mySpace \ myApp \ views＆＃34;在Function.app.render （C：\ Users \用户为myuser \桌面\ MySpace的\对myApp \ node_modules \表达\ 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位于根“public”目录中并且意图在站点范围内使用，它应该与绝对路径“/bootstrap.min.css”链接，如下所示：
```
link(rel="stylesheet", href="/bootstrap.min.css")
```
注意前导斜杠。没有斜杠，像“bootstrap.min.css”这样的路径被解释为当前位置的兄弟，这意味着它包含在像“/ users / 500 / example”这样的页面上会导致浏览器在“ /users/500/bootstrap.min.css”。
您的“404处理程序”实际上应该发送响应，而不是抛出错误。
您应该：
- 创建错误模板，
- 使用res.send
- 或完全删除错误处理程序并回退到Express的默认错误处理程序。

外部css文件打破玉视图

1 个答案: