如何在Node.js应用程序中提供CSS服务

Question

如何在Node.js应用程序中提供CSS服务

3

我一直在研究node.js，但似乎无法正确地提供CSS。以前，我将它嵌入到HTML的头部标签中，但现在我正在尝试学习如何将其作为单独的文件提供。

到目前为止，这就是我所做的。在加载服务器下的HTML之前，我尝试仅将其写入：

//This is all my main module

var http = require('http');
var router = require('./router.js');

var server = http.createServer(function (request, response) {

response.writeHead(200,{"Content-type" : "text/css"});
var fileContents = fs.readFileSync('./views/styles.css', {encoding: "utf8"}, function(err, data) {
 if (!err) {
   response.write(data);
} else {
  console.log(err);
}
});

  router.home(request, response);
  router.user(request, response);

});

server.listen(3000);

我在路由模块中调用的home函数如下所示。它也完美地发挥作用：

function home(request, response) {
  //if url == "/" && GET

if (request.url === "/"){
if(request.method.toLowerCase() === "get") {
  response.writeHead(200, commonHeaders);
  renderer.view("header", {}, response);
  renderer.view("search", {}, response);
  renderer.view("footer", {}, response);
  response.end();

} else {
    //if url == "/" && POST
//redirect to /:username

  request.on("data", function(postBody) {
    var query = querystring.parse(postBody.toString());
    response.writeHead(303, {"Location":"/" + query.username});
    response.end();
  });
  }
 }
}

我所有的HTML都可以完美加载。但是，如果我在Chrome中使用开发工具，它会显示我已经创建了一个带有styles.css文件的单独文件夹，但是它是空的。为什么它会创建我的文件，但我的CSS没有被写入其中呢？

我做错了什么吗？我的HTML头部也链接了样式表。如何在node.js应用程序中提供CSS服务？我不知道为什么这行不通。

- Robert Stefanic

1

你为什么要通过node进程来提供CSS，而不是直接使用nginx（例如）处理呢？由于它是静态资源，因此没有必要让node进程负担它。 - 1sloc

1

@m-a-r-c-e-l-I-n-o的下面的回答对于你正在做的事情是正确的。然而，我强烈建议您引入一个Web应用程序框架，例如Express（在Node市场上最受欢迎），而不是尝试通过本地模块处理http请求/响应周期。静态文件服务可能最好通过NGINX或类似工具处理，但即使您无法访问NGINX或由于某种原因想要去'纯'节点，使用Express也会节省大量时间和头痛。 - Paul

1

@Paul 的观点很有道理，如果你采取了 Robert 提出的方法，但仍然无法按预期工作，那么你可能仍需要访问服务器以确保文件使用正确的 MIME 类型进行服务，否则你将再次在 Chrome 开发工具中看到一个空的 styles.css 文件。 - m-a-r-c-e-l-i-n-o

我主要只是想学习它的工作原理。目前看起来似乎不是一个好主意，而且到目前为止也让我头疼不已。这不是为了一个项目或其他什么东西 - 我只是想学习如何提供CSS。不过我计划使用Express并学习如何通过它处理请求和响应。 - Robert Stefanic

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- m-a-r-c-e-l-i-n-o · Accepted Answer

我所有的HTML都可以很好地加载。如果我在Chrome中使用开发工具，它会显示我已经创建了一个带有styles.css文件的单独文件夹，但是它是空的。为什么它会创建我的文件，但我的CSS没有被写入其中呢？

很可能是因为fs.readFileSync是同步的，但错误地提供了回调函数。请尝试使用以下代码：

response.writeHead(200, {'Content-type' : 'text/css'});
var fileContents = fs.readFileSync('./views/styles.css', {encoding: 'utf8'});
response.write(fileContents);
response.end();

我这样做错了吗？我在HTML头部链接了一个样式表。如何在node.js应用程序中提供CSS呢？

“错”是一个强烈的词，但是是的，手动提供静态文件不是最好的方法，这样很可能无法扩展。你应该配置Web服务器来提供所有静态文件，并且只处理Node.js中的动态内容。我不会涉及具体细节，但是在Stack Overflow上提出另一个问题，指定您正在运行的服务器以及如何使用Node.js正确配置它。或者，您可以查找一些有关如何使用NGINX服务器运行Node.js的教程 - 这应该可以让您走上更可持续的道路。

希望这可以帮助你！