node.js - 提供 CSS 样式表，通过 Node.js 中的链接标签链接到 HTML 文件，无需框架

Question

I have been teaching myself Node.js by way of trial & error. I built a simple server using the Node.js HTTP class. I figured out that I can read a file asynchronously and serve the data using the asynchronous fs.readFile(..., cbk) callback method. What I don't understand at this point is how respond with all the other resources that the requests needs.

// "./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);

For the sake of maintaining a single focus, I will use only Style-sheets as an example. Below is a super common link tag that demonstrates how I typically tell the server that the pages needs a specific CSS file. It works fine on the front-end side of things. But, how to I handle a request from a link tag on the the server's side of things (or on the backend)?

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

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

Answer 1

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

Nodejs 服务器，就像您创建的那样，默认情况下不提供任何文件。它只提供您编程提供的文件。因此，您的 Nodejs 服务器被编程为只做一件事，而且只做一件事，那就是无论请求什么 URL，都会传递 index.html 。

所以，发生的事情是这样的:

1. 用户输入您网站的网址
2. 浏览器向您的服务器发送对该页面的请求
3. 您的网络服务器提供 index.html
4. 浏览器解析 index.html 并查找样式表链接
5. 浏览器向您的服务器发送样式表链接请求
6. 您的服务器发送它index.html
7. 浏览器意识到“这不是样式表”，并且您没有得到任何样式

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

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

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

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