本机 node.js:如何包含 css? [关闭]

Posted

技术标签:

【中文标题】本机 node.js:如何包含 css? [关闭]【英文标题】:native node.js: how to include css? [closed] 【发布时间】:2015-05-07 05:40:55 【问题描述】:

其中大部分已经讨论过,但与表达有关。我想知道如何在本机 node.js 中显示带有 .css 和一些图像的简单 html

这是 HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-git.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <img src="imgs/image.jpeg" />
</body>
</html>

这是我目前得到的:

var http = require('http');
var fs = require('fs');

http.createServer(function(req, res)
    if (req.url === '/hi') 
        res.write('hi');
        res.end();
     else if (req.url === '/bye') 
        res.write('bye');
        res.end();
     else     
        fs.readFile('index.html', function(err, file)
            res.write(file);
            res.end();      
        );
    

).listen(3000);

另外,我不完全明白为什么我会收到两个对同一张图片的请求?

/
/css/style.css
/imgs/image.jpeg
/imgs/image.jpeg

【问题讨论】:

这段代码有什么问题? “外部 CSS”是什么意思? 好的,我弄错了那部分,我的意思是作为 HTML 一部分的 css,我当然同时托管了这两个部分。我已经编辑了标题。问题是,页面不加载 css 也不加载图像。 你只配置了你的服务器响应index.htmlhibye,所以当你的浏览器请求css时,服务器会发送html。 您需要该应用程序为网站的所有文件提供静态路由。创建 HTTP 服务器不会单独完成。 【参考方案1】:
<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-git.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <!-- this forks a request for a css file --> 

</head>
<body>
    <img src="imgs/image.jpeg" />
</body>
</html>

并且在您的服务器中,您只提供 /hi/byeindex.html,它会退回到 index.html

else     
    fs.readFile('index.html', function(err, file)
        res.write(file);
        res.end();      
    );

尝试使用 devTools 观察请求及其响应。 或尝试获取 http://localhost:3000/css/style.css 这将返回 index.html

尝试加载 http://localhost:3000/blah/blah 这将返回 index.html。

还有很多要添加的响应类型以及路径是否存在。 【404】

Look at this package 以提供静态文件为例。还有大量的框架(Express、Sails、SocketStream、Koa ...)

【讨论】:

【参考方案2】:

Node.js 基本上是在创建一个服务器,类似于 Apache 或其他为请求提供数据的应用程序。您设置路由来处理/hi/bye,并在请求其他任何内容时使用默认页面进行响应。当浏览器请求您的 CSS 文件时,它会使用该默认页面进行响应。

你需要添加一个路由来传递你的 CSS 文件,就像你有传递其他东西的路由一样。当您使用 Node.js 时,您正在对服务器进行编程。任何提供给客户的东西都需要由您的代码来处理。

【讨论】:

好的,但这并不能完全解释为什么我会收到两个相同图像的请求?另外,您能否提供一个如何返回 CSS 的示例?我会弄清楚其余的。谢谢。 @uglycode:我对图像的猜测​​是,当您的浏览器请求 / 路由时,它会获取您的默认 HTML 文件,该文件链接到图像。当它请求 CSS 文件时,它会再次接收 HTML 文件。 HTML 文件链接到图像,因此它会尝试再次加载图像。您返回 CSS 的方式与在此处返回 HTML 的方式相同。你为 CSS 设置了一个路由,你读取文件并返回它。

以上是关于本机 node.js:如何包含 css? [关闭]的主要内容,如果未能解决你的问题,请参考以下文章

如何在Node.js中获取本机本地IP地址

如何在共享主机中托管 Node.Js 应用程序 [关闭]

如何使用本机反应像 Node.js 一样获取`__dirname`

如何立即关闭Node.js http(s)服务器?

如何使用 Socket.io 和 Node.js 开发大型聊天应用程序 [关闭]

在node.js中创建一个包含表单数据的文件[关闭]