提供通过不带框架的Node.js中的link标记链接到HTML文件的CSS样式表 [英] Serving CSS stylesheets that are linked to HTML files via the link tag in Node.js w/o a framework

问题描述

我一直在通过试错的方式自学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">

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

推荐答案

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

像您创建的NodeJS服务器一样，默认情况下不提供文件。它只为您编写的文件提供服务。因此，您的NodeJS服务器被编程为只做一件事，那就是无论从它请求什么URL，都要交付index.html。

因此，以下是发生的情况：

1. 用户输入您的站点的一些URL
2. 浏览器向您的服务器发送该页面的请求
3. 您的Web服务器提供index.html
4. 浏览器分析index.html并查找样式表链接
5. 浏览器向您的服务器发送样式表链接请求
6. 您的服务器发送index.html
7. 浏览器意识到"这不是样式表"，您得不到任何样式

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

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

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

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

这篇关于提供通过不带框架的Node.js中的link标记链接到HTML文件的CSS样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！