Html 使用 node.js 提供带有 CSS 和 JS 的基本网页包括
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17478566/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using node.js to serve up basic web page with CSS and JS includes
提问by karancan
I am coming from a (traditional) server side scripting (PHP) background and am trying to experiment with Node to see what the fuss is all about.
我来自（传统）服务器端脚本 (PHP) 背景，并且正在尝试使用 Node 进行实验，以了解大惊小怪的全部内容。
Objective:serve up a simple web document with some style sheets and scripts on it.
目标：提供一个简单的 Web 文档，上面有一些样式表和脚本。
My node.js script:
我的 node.js 脚本：
var http = require('http');
var fs = require('fs');
fs.readFile('index.html', function (err, html) {
if (err) {
throw err;
}
http.createServer(function(request, response) {
response.writeHeader(200, {"Content-Type": "text/html"});
response.write(html);
response.end();
}).listen(1337, '127.0.0.1');
});
index.html:
索引.html：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Node.js test</title>
<link rel="stylesheet" media="screen" type="text/css" href="css/plugin.css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/xGrid.css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/jquery-ui/jquery-ui-1.10.1.custom.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="js/slate.js"></script>
<script src="js/slate.portlet.js"></script>
<script src="js/slate.message.js"></script>
<script src="js/plugin.js"></script>
</head>
<body>
<h1 class="styled-h1">Test</h1>
</body>
</html>
The problem I am facing:
我面临的问题：
The two script includes coming from the Google CDN are loaded on to the document fine. However, every other style sheet or script being called from my local file system get interpreted as text/htmland so don't have the intended effect. Here is a screenshot from Google Chrome console:
这两个脚本包括来自 Google CDN 的加载到文档中。但是，从我的本地文件系统调用的所有其他样式表或脚本都被解释为text/html，因此没有预期的效果。这是 Google Chrome 控制台的屏幕截图：
I want to understand why this is happening.
我想了解为什么会发生这种情况。
PS: I know I can use a framework like Express to make things easier but I want to get a hold of the fundamentals first.
PS：我知道我可以使用像 Express 这样的框架来简化事情，但我想先掌握基础知识。
回答by gustavohenke
Simple: you're setting the Content-Typeheader to text/html, always. Also, it will alwaysserve your index.html file. Look:
很简单：您始终将Content-Type标题设置为text/html。此外，它将始终为您的 index.html 文件提供服务。看：
fs.readFile('index.html', function (err, html) {
if (err) {
throw err;
}
http.createServer(function(request, response) {
response.writeHeader(200, {"Content-Type": "text/html"}); // <-- HERE!
response.write(html); // <-- HERE!
response.end();
}).listen(1337, '127.0.0.1');
});
You should parse the URL, look up what file you want to require, read its contents and write them to the response if it exists, otherwise serve an 404 error. Also, you'll need to set the correct headers.
你应该解析 URL，查找你想要的文件，读取它的内容并将它们写入响应（如果存在），否则提供 404 错误。此外，您需要设置正确的标题。
So, do you still want to do it at your own?
At least, try something like send, which is a basic static file server.
所以，你还想自己做吗？
至少，尝试像send这样的东西，它是一个基本的静态文件服务器。
回答by Psyche Genie
Rather than pointing contentType to text/html, You can do some thing like this using path module
而不是将 contentType 指向 text/html，你可以使用 path 模块做一些这样的事情
var filePath = req.url;
if (filePath == '/')
filePath = '/index.html';
filePath = __dirname+filePath;
var extname = path.extname(filePath);
var contentType = 'text/html';
switch (extname) {
case '.js':
contentType = 'text/javascript';
break;
case '.css':
contentType = 'text/css';
break;
}
fs.exists(filePath, function(exists) {
if (exists) {
fs.readFile(filePath, function(error, content) {
if (error) {
res.writeHead(500);
res.end();
}
else {
res.writeHead(200, { 'Content-Type': contentType });
res.end(content, 'utf-8');
}
});
}
回答by PP.
You are creating a web server that does one thing and one thing only irrespective of what path or parameters are sent: it serves your HTML file index.htmlwith MIME type text/html.
您正在创建一个 Web 服务器，它只做一件事，只做一件事，而不管发送什么路径或参数：它为您的 HTML 文件index.html提供 MIME 类型text/html。
The requests for CSS files are relative path requests, i.e. when the web browser sees the instruction to load css/plugin.cssit calls your web server with a new path; but your web server ignores the path and just returns index.htmlagain with MIME type text/html. Your web browser throws errors about the wrong MIME type but what it didn't tell you was that you just loaded index.htmlagain.
对 CSS 文件的请求是相对路径请求，即当 web 浏览器看到加载css/plugin.css它的指令时，就会用一个新路径调用你的 web 服务器；但您的 Web 服务器忽略该路径并index.html再次返回MIME 类型text/html。您的 Web 浏览器会抛出有关错误 MIME 类型的错误，但它没有告诉您的是您刚刚index.html再次加载。
To confirm for yourself click on the following link: http://127.0.0.1:1337/css/plugin.css
要自己确认，请单击以下链接：http://127.0.0.1:1337/css/plugin.css
回答by guy777
Your server is responding to all request with a unique response... When the browser request for CSS and Scripts, your server do the only thing he knows !!!
您的服务器正在以唯一的响应响应所有请求...当浏览器请求 CSS 和脚本时，您的服务器做他唯一知道的事情！！！
