Javascript 外部css文件破坏了jade视图
我是node.js新手,如果这个问题的答案太明显,我很抱歉 我用所有的路线和视图来构建我的应用程序逻辑,它工作得很好,直到我想将更多的样式扩展到我的视图,我使用Jade来构建它们,就像我使用Express一样,我所做的唯一更改是我将引导程序包括到我的布局中。JadeJavascript 外部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,我还注意到在控制台中,我在错误发生之前得到了正
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”链接,如下所示:
注意前面的斜杠。如果没有斜杠,像“bootstrap.min.css”这样的路径将被解释为当前位置的同级,这意味着它包含在“/users/500/example”这样的页面上会导致浏览器在“/users/500/bootstrap.min.css”中查找它link(rel="stylesheet", href="/bootstrap.min.css")
- 您的“404处理程序”实际上应该发送响应,而不是抛出错误
- 你应该:
- 创建一个错误模板
- 将错误处理程序中的res.render调用替换为res.send
- 或者完全删除错误处理程序并返回到Express的默认错误处理程序
href=“/stylesheets/bootstrap.min.css”并将引导文件放入stylesheets`文件夹。最好给出您的代码。secret:“键盘猫”
-不要在生产代码中使用默认值。我已将代码更改为链接(rel=“stylesheet”,href=“/bootstrap.min.css”)
,但仍然会收到相同的错误。我真的开始觉得我错过了我的视图,但是,它们在不包含任何css或js文件的情况下工作得很好。