使用node.js提供CSS和JS的基本网页包括

我来自（传统）服务器端脚本（PHP）背景，并试图尝试使用Node来看看大惊小怪。使用node.js提供CSS和JS的基本网页包括

目的：提供了一个简单的网页文件，其上有一些样式表和脚本。

我的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>

我现在面临的问题：

两个脚本包括从谷歌未来CDN被加载到文档上。但是，从本地文件系统调用的每个其他样式表或脚本都被解释为text/html，因此没有预期的效果。下面是从谷歌浏览器控制台的截图：

enter image description here

我想明白为什么会这样。 PS：我知道我可以使用像Express这样的框架来让事情变得更容易，但我想首先得到基本原理。

来源

2013-07-04 karancan

我写了一个叫Cachemere模块，它可以让你做到这一点。它也会自动缓存所有资源。链接：https://github.com/topcloud/cachemere – Jon

简单：你的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'); 
});

你应该解析URL，查询你想要求什么文件，阅读其内容，如果它存在，并写入到响应，否则服务的404错误。此外，您需要设置正确的标题。

那么，你是否还想自己做呢？
至少，请尝试类似send这是一个基本的静态文件服务器。

来源

2013-07-04 22:13:09 gustavohenke

您的服务器正在响应所有具有唯一响应的请求......当浏览器请求CSS和脚本时，您的服务器执行他唯一知道的事情！

来源

2013-07-04 22:07:00 guy777

您正在创建只做一两件事，一件事只有无论什么路径或参数发送 web服务器：它提供HTML文件index.html MIME类型text/html。

对CSS文件的请求是相对路径请求，即当Web浏览器看到加载指令css/plugin.css时，它会用新路径调用Web服务器;但是您的Web服务器将忽略路径，并且只需返回index.html且MIME类型text/html即可。您的网络浏览器会抛出有关错误MIME类型的错误，但它没有告诉您的是，您只是再次加载index.html。

要确认自己点击以下链接：http://127.0.0.1:1337/css/plugin.css

来源

2013-07-04 22:07:11

这是为什么downvoted？要么这是不正确的，downvoter应该澄清，或者这是正确的，它应该是upvoted。 – mickey

这是这里唯一有用的评论。感谢您澄清！ – Kafeaulait

不是指向的contentType为text/html相反，你可以做一些这样的事使用路径模块

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');     
      } 
     }); 
    }

来源

2014-06-17 09:48:51

使用node.js提供CSS和JS的基本网页包括

回答

相关问题