通过 Node.js w/o 框架中的 link 标记为 link 编辑到 HTML 文件的 CSS 样式表提供服务

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">

注意：这只是一个测试项目，但它不使用任何框架，甚至不使用任何 mod 规则（dev-mod eslint 除外）。我宁愿在没有第 3 方的情况下这样做 software/tools/frameworks 等...

Answer 1

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

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

所以，事情是这样的：

用户为您的网站输入了一些URL
浏览器向您的服务器发送该页面的请求
您的网络服务器提供 index.html
浏览器解析 index.html 并找到样式 sheet links
浏览器向您的服务器发送样式请求 sheet link
您的服务器发送它index.html
浏览器识别 "that's not a style sheet" 而您没有任何样式

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

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

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

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

Answer 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)，它会准确显示浏览器发出的请求、发送的内容、返回的内容 - 以及许多其他内容。

通过 Node.js w/o 框架中的 link 标记为 link 编辑到 HTML 文件的 CSS 样式表提供服务

Serving CSS stylesheets that are linked to HTML files via the link tag in Node.js w/o a framework

mean

node.js

mean-stack

注意：这只是一个测试项目，但它不使用任何框架，甚至不使用任何 mod 规则（dev-mod eslint 除外）。我宁愿在没有第 3 方的情况下这样做 software/tools/frameworks 等...