为什么 NodeJS 不加载链接到 html 文件的 CSS 样式表? [英] Why isn't NodeJS loading CSS style sheets linked to html files?

问题描述

社区.我在这里有点不知所措.我对 NodeJS 比较陌生，运行时环境的运行方式出乎我的意料.事实证明，对于许多尝试学习 node 的其他人来说，这也是一个问题，NodeJS 的学习曲线比 LAMP 堆栈上的 PHP 更陡峭.为了切入正题，NodeJS 上有几个 Hello World! 和其他一些资料.大部分都毫无价值，看起来像这样.

community. I am at a bit of a loss here. I am relatively new to NodeJS, and the runtime environment is acting in a way I didn't expect. It turns out this has been a problem for a lot of other people who have tried to learn node as well, NodeJS's learning curve is steeper than for say, PHP on a LAMP stack. To get to the point, there are several Hello World!'s on NodeJS floating around, and some other material. Most of it is pretty worthless and looks like this.

//NODEJS EXAMPLE

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);
    return res.end();
  });
}).listen(8080);

教程都以一些代码结束，或者与上面的代码非常相似的东西，这就是我的问题所在.代码是一个简单的服务器，它加载 HTML 文档，但不会加载任何通过下面的标签链接到它们的 CSS 样式表:

The tutorials all end with a bit of code, or something very similar, as the code above, and this is where my problem lies. The code is a simplistic server, it loads HTML documents, but it will not load any CSS style sheets linked to them via the tag bellow:

<link rel="stylesheet" type="text/css" href="http://localhost/... (or wherever it's located)">

我知道在 StackOverFlow.com 和许多其他站点上有几个线程/博客/问答解决了这个问题——它们似乎都使用快速路由模块作为链接外部样式表和好好工作.

I am aware that there are several threads/blogs/Q&A's that address this issue on StackOverFlow.com and many other sites -- they all seem to use the express routing module as a way to get there external stylesheets linked and working properly.

• 这可能是最好的例子问答的其中一个解决了这个话题

要求快速路由模块工作，但我发现我需要为一个我不打算使用的Javascript库使用一个模块是蹩脚的，它仍然没有澄清问题，它只是扫了下地毯.有谁知道阻止包含样式表的问题是什么，以及如何编写模块来修复它?

Requiring the express routing module works, but I find it lame that I need to use a module for a Javascript library that I don't intend to use, and it still doesn't clarify the problem, it just sweeps it under the rug. Does anyone know what the issue is that is keeping the stylesheets from being included, and how to write a module to fix it?

旁注:现在我正在阅读一本关于 NodeJS 的书，它教我如何路由请求以及如何响应.我猜这是路由和路径名的问题，即使它不像编写单个模块那么简单，但澄清导致 CSS 链接标签未加载的原因会很好.谢谢！

Side note: right now I am reading a book on NodeJS that is teaching me how to route requests and how to respond. I am guessing that this is an issue with routing, and pathnames, even if it isn't as simple as writing a single module, clarification on what causes the CSS link tags not load would be nice. Thank you!

推荐答案

您的 nodejs 服务器没有被编程为在浏览器请求时发送任何样式表.

Your nodejs server is not programmed to send any style sheets when the browser requests them.

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

A nodejs server, like you've created, serves NO files by default. It only serves files that you program it to serve. So, your nodejs server is programmed to do one thing and one thing only and that's to deliver index.html no matter what URL is requested from it.

所以，这是发生了什么:

So, here's what happens:

1. 用户为您的网站输入一些网址
2. 浏览器向您的服务器发送对该页面的请求
3. 您的网络服务器提供 index.html
4. 浏览器解析 index.html 并找到样式表链接
5. 浏览器向您的服务器发送样式表链接请求
6. 你的服务器发送它index.html
7. 浏览器意识到那不是样式表"而您没有任何样式

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

So, for your HTML server to work properly, you have to add code to look at the requested URL and, if it's a style sheet URL, it needs to send the proper file for that stylesheet, not just blindly send index.html no matter what was requested.

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

Nobody says you need to use the Express library for this, but this is what it does. It makes it very easy to configure what gets sent when different types of requests are made. And, for requests of static resources like CSS files, it can even just be configured to automatically send them direct from the file system.

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

If you don't want to use Express for this, you don't have to, but then you will have to write your own code to serve the right data when different URLs are requested.

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

If you want to write your own code for this, you will have to create some sort of if/else or switch statement or table lookup that looks at req.url and then send the appropriate content that matches the requested URL. Then, when the browser requests your style sheet, you can actually send it the appropriate style sheet, not index.html. The same would be true for Javascript files, images, page icon, ajax requests or any resource on your server that your page references.

这篇关于为什么 NodeJS 不加载链接到 html 文件的 CSS 样式表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！