提供通过 Node.js 中的链接标签链接到 HTML 文件的 CSS 样式表（不带框架）

Posted 2023-03-24

【中文标题】提供通过 Node.js 中的链接标签链接到 HTML 文件的 CSS 样式表（不带框架）

【英文标题】：Serving CSS stylesheets that are linked to HTML files via the link tag in Node.js w/o a framework

【发布时间】：2020-06-13 04:19:40

【问题描述】：

我一直在通过反复试验自学 Node.js。我使用 Node.js HTTP 类构建了一个简单的服务器。我发现我可以异步读取文件并使用异步fs.readFile(..., cbk) 回调方法提供数据。我目前不明白的是如何响应请求所需的所有其他资源。

// "./index.js"

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

http.createServer(function (req, res)
    fs.readFile('index.html', function(err, data)
        res.writeHead(200, 'Content-Type': 'text/html');
        res.write(data);
        res.end();
  );
).listen(8080);

为了保持单一焦点，我将仅以 Style-sheets 为例。下面是一个超级常见的链接标记，它演示了我通常如何告诉服务器页面需要特定的 CSS 文件。它在事物的前端工作得很好。但是，如何处理来自服务器端（或后端）的链接标签的请求？

<link rel="stylesheet" type="text/css" href="/foo/bar/raboof.css">

注意：这只是一个测试项目，但它不使用任何框架，甚至任何模块（除了对于 dev-mod eslint）。我宁愿在没有 3rd 方软件/工具/框架等的情况下执行此操作...

【参考方案1】：

您的 nodejs 服务器未编程为在浏览器请求时发送任何样式表。

nodejs 服务器，就像您创建的一样，默认情况下不提供任何文件。它仅提供您对其进行编程以提供服务的文件。因此，您的 nodejs 服务器被编程为只做一件事和一件事，那就是发送index.html，无论从它请求什么 URL。

所以，这就是发生的事情：

用户为您的网站输入了一些 URL 浏览器向您的服务器发送对该页面的请求 您的网络服务器提供index.html 浏览器解析index.html 并找到样式表链接 浏览器向您的服务器发送样式表链接请求 您的服务器发送它index.html 浏览器意识到“这不是样式表”，而您没有样式

因此，为了让您的 HTML 服务器正常工作，您必须添加代码来查看请求的 URL，如果它是样式表 URL，它需要为该样式表发送正确的文件，而不仅仅是盲目地发送 @987654325 @无论请求什么。

没有人说您需要为此使用 Express 库，但这就是它的作用。它使配置在发出不同类型的请求时发送的内容变得非常容易。而且，对于 CSS 文件等静态资源的请求，它甚至可以配置为直接从文件系统自动发送。

如果您不想为此使用 Express，则不必这样做，但是当请求不同的 URL 时，您必须编写自己的代码来提供正确的数据。

如果您想为此编写自己的代码，则必须创建某种if/else 或switch 语句或查找req.url 的表查找，然后发送与请求的URL 匹配的适当内容.然后，当浏览器请求您的样式表时，您实际上可以向它发送适当的样式表，而不是index.html。 javascript 文件、图像、页面图标、ajax 请求或页面引用的服务器上的任何资源也是如此。

【讨论】：

天哪！这个答案太好了。谢谢老兄，这超出了我的预期。

【参考方案2】：

因为您的服务器端代码被编写为处理 all.http 请求并提供相同的 html 内容，而不管路径如何。

尝试在处理程序中添加一些 if-else 逻辑，并根据请求路径传递适当的文件。

类似：

if(req.path === "" || req.path === "index.html")
     fs.read htnl file here
else if (req.path==="my.css")
     fs.read css file

学习使用浏览器开发工具 (F12)，它可以准确显示浏览器发出的请求、发送的内容、返回的内容 - 等等。

【讨论】：

仅供参考，req.path 在使用 OP 显示的普通 HTTP 服务器时不是有效属性。您必须直接使用req.url 或对其进行解析以删除查询字符串等内容。

谢谢。我是凭记忆打字的。我试图引诱他自己去发现这些东西。如果将完整的解决方案交给他，他将永远学不会。很明显，他是个初学者。

但是，显然，您的回答更详细。来自我的 +1。