本机 node.js：如何包含 css？ [关闭]答案

【问题标题】：native node.js: how to include css? [closed]本机 node.js：如何包含 css？ [关闭]
【发布时间】：2015-05-07 05:40:55
【问题描述】：

其中大部分已经讨论过，但与表达有关。我想知道如何在本机 node.js 中显示带有 .css 和一些图像的简单 HTML？

这是 HTML：

<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-git.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <img src="imgs/image.jpeg" />
</body>
</html>

这是我目前得到的：

var http = require('http');
var fs = require('fs');

http.createServer(function(req, res){
    if (req.url === '/hi') {
        res.write('hi');
        res.end();
    } else if (req.url === '/bye') {
        res.write('bye');
        res.end();
    } else {    
        fs.readFile('index.html', function(err, file){
            res.write(file);
            res.end();      
        });
    }

}).listen(3000);

另外，我不完全明白为什么我会收到两个对同一张图片的请求？

/
/css/style.css
/imgs/image.jpeg
/imgs/image.jpeg

【问题讨论】：

这段代码有什么问题？ “外部 CSS”是什么意思？
好的，我弄错了那部分，我的意思是作为 HTML 一部分的 css，我当然同时托管了这两个部分。我已经编辑了标题。问题是，页面不加载 css 也不加载图像。
你只配置了你的服务器响应index.htmlhi和bye，所以当你的浏览器请求css时，服务器会发送html。
您需要该应用程序为网站的所有文件提供静态路由。创建 HTTP 服务器不会单独完成。

标签： javascript node.js

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-git.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <!-- this forks a request for a css file --> 

</head>
<body>
    <img src="imgs/image.jpeg" />
</body>
</html>

并且在您的服务器中，您只提供 /hi、/bye 和 index.html，它会退回到 index.html

else {    
    fs.readFile('index.html', function(err, file){
        res.write(file);
        res.end();      
    });
}

尝试使用 devTools 观察请求及其响应。或尝试获取 http://localhost:3000/css/style.css 这将返回 index.html

尝试加载 http://localhost:3000/blah/blah 这将返回 index.html。

还有很多要添加的响应类型以及路径是否存在。【404】

Look at this package 以提供静态文件为例。还有大量的框架（Express、Sails、SocketStream、Koa ...）

【讨论】：

【解决方案2】：

Node.js 基本上是在创建一个服务器，类似于 Apache 或其他为请求提供数据的应用程序。您设置路由来处理/hi、/bye，并在请求其他任何内容时使用默认页面进行响应。当浏览器请求您的 CSS 文件时，它会使用该默认页面进行响应。

你需要添加一个路由来传递你的 CSS 文件，就像你有传递其他东西的路由一样。当您使用 Node.js 时，您正在对服务器进行编程。任何提供给客户的东西都需要由您的代码来处理。

【讨论】：

好的，但这并不能完全解释为什么我会收到两个相同图像的请求？另外，您能否提供一个如何返回 CSS 的示例？我会弄清楚其余的。谢谢。
@uglycode：我对图像的猜测是，当您的浏览器请求 / 路由时，它会获取您的默认 HTML 文件，该文件链接到图像。当它请求 CSS 文件时，它会再次接收 HTML 文件。 HTML 文件链接到图像，因此它会尝试再次加载图像。您返回 CSS 的方式与在此处返回 HTML 的方式相同。你为 CSS 设置了一个路由，你读取文件并返回它。