nodejs表示未加载css和js

时间:2014-03-07 15:16:43

标签: node.js express

我在nodejs上使用express。我加载的html文件没有java-scripts和css-files。

的index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
     <h1>Hello, world!</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">        </script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>

这是我在nodejs中的明确部分:

app.get('/', function(req, res){

    console.log(req.path);

    fs.readFile('mongo_client/index.html',function (err, data){
        if(!err)
        {
            res.writeHead(200, {'Content-Type': 'text/html','Content-Length':data.length});
            res.write(data);
            res.end();
        }
        else
        {
            res.writeHead(400, {'Content-Type': 'text/html'});
            res.end("index.html not found");
        }
    });
});

唯一的console.log是“/”一次。甚至没有请求css和js文件。

编辑:

我使用的是静态中间件,但它也不起作用:

app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res){

    fs.readFile('mongo_client/index.html',function (err, data){
        if(!err)
        {
            res.send(data);;
        }
        else
        {
            res.send("index.html not found");
        }
    });
});

因此我把我的js和css - 数据放到了public文件夹中。 每次我尝试连接时,我都会下载index.html文件。 有没有人有一个使用快递的简单网络服务器的工作示例?我是否必须使用文件阅读器......我认为还有另一种使用快速中间件的方法。

我只需要一个支持css和js的快速网络服务器的简单示例......我找不到任何基本的东西。

1 个答案:

答案 0 :(得分:3)

app.get('/')只会响应root用户的请求,而不是其他任何内容。您的css和其他资产位于/css/bootstrap.min.css,您的路由无法处理。

但是对于express,请使用static中间件为您完成所有这些。 http://expressjs.com/api.html#middleware

本文还介绍了设置http://blog.modulus.io/nodejs-and-express-static-content

更新:示例应用

Express能够生成支持静态的示例应用程序,并可选择支持CSS预处理器。阅读他们的指南:http://expressjs.com/guide.html但基本步骤是全局安装快递

npm install -g express

然后使用命令行生成应用的骨架

express --css stylus myapp

以上为Stylus提供支持。如果您愿意,可以指定更少。或者通过支持基本css文件生成它

express myapp

然后cd进myapp,或者你提供的任何名字,你就可以看到它是如何完成的。