使用node.js提供基本的网页与CSS和JS包括
我来自一个（传统的）服务器端脚本（PHP）背景，并试图用Node来试验一下，看看大惊小怪。
目标：提供一个简单的网页文件，其上有一些样式表和脚本。
我的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的：
<!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>
我面临的问题是：
包括来自Google CDN的两个脚本都加载到文件中。 但是，从本地文件系统调用的每个其他样式表或脚本都被解释为text/html ，因此没有预期的效果。 以下是Google Chrome控制台的屏幕截图：
我想明白为什么会这样。
PS：我知道我可以使用像Express这样的框架来让事情变得更简单，但是我首先需要掌握基本原理。
很简单：您始终将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'); });
你应该parsingURL，查找你想要的文件，读取它的内容，并把它们写到响应中（如果存在的话），否则会发生404错误。 另外，您需要设置正确的标题。
那么，你还想要自己做吗？
至less，尝试像发送 ，这是一个基本的静态文件服务器。
不要将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'); } }); }
您正在创build一个Web服务器， 不pipe发送什么path或参数，它只执行一件事和一件事：它为MIMEtypes为text/html HTML文件index.html提供服务。
对CSS文件的请求是相对path请求，即当Web浏览器看到加载css/plugin.css的指令时，它会用新path调用Web服务器; 但是你的web服务器忽略了这个path，只是用MIMEtypestext/html再次返回index.html 。 您的Web浏览器会抛出有关错误的MIMEtypes的错误，但是它没有告诉您的是，您只是再次加载了index.html 。
要确认一下，请点击以下链接：http://127.0.0.1:1337/css/plugin.css
您的服务器响应所有的请求与一个唯一的响应…当浏览器请求的CSS和脚本，你的服务器做他唯一的事情！