NodeJS表达CSS和JS未加载 [英] nodejs express css and js not loaded
问题描述
我在nodejs上使用express.我加载的html文件没有java脚本和css文件.
I use express on nodejs. The html-file I load doesn't get java-scripts and css-files.
index.html:
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中的表达部分:
This is my express-part in 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文件.
The only console.log is "/" once. The css and js file isn't even requested.
我使用了静态中间件，但是它也不起作用:
I used the static middleware but it doesn't work either:
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-数据放到了公共文件夹中.每次尝试连接时，我都会下载index.html文件.有没有人有使用Express的简单网络服务器的有效示例?我是否必须使用文件读取器...我认为还有另一种使用Express-Middleware的方法.
Therefore I put my js and css - data to the public - folder. Everytime I try to connect I download the index.html file. Does anyone have a working example for a simple webserver using express? Do I have to use the file-reader ... I think there's another way using express-middleware.
我只需要一个支持css和js的快速Web服务器的简单示例……我找不到任何基本的东西.
I just need a simple example of an express web-server that is supporting css and js ... I can't find anything that's just that basic.
推荐答案
app.get('/')将仅响应根请求，而不会响应其他请求.您的CSS和其他资产位于/css/bootstrap.min.css，您的路由无法处理.
app.get('/') will only respond to requests at the root, not anything beyond that. Your css and other assets are at /css/bootstrap.min.css which your route doesn't handle.
但是，为了明确起见，请使用 static 中间件为您完成所有这些工作. http://expressjs.com/api.html#middleware
But for express, use the static middleware to do all that for you. http://expressjs.com/api.html#middleware
本文还介绍了设置 http://blog.modulus.io/nodejs-and-express-static-content
更新:示例应用
Express能够生成支持静态功能的示例应用程序，并可选地支持CSS预处理器.阅读他们的指南: http://expressjs.com/guide.html ，但是基本步骤是安装express全球
Express is capable of generating a sample app that supports static, with optional support for CSS pre-processors. Read their guide: http://expressjs.com/guide.html but the basic steps are to install express globally
npm install -g express
然后使用命令行生成应用程序的框架
Then use the command line to generate the skeleton of your app
express --css stylus myapp
以上内容提供了对手写笔的支持.如果愿意，可以指定更少的内容.或在支持基本CSS文件的情况下生成它
The above provides support for Stylus. You can specify less if you prefer. Or to generate it with support for basic css files
express myapp
然后将CD放入myapp或您提供的任何名称中，您会看到它的完成方式.
Then cd into myapp, or whatever name you provided, and you can see how it's done.
这篇关于NodeJS表达CSS和JS未加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
