本机 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.html
hi
和bye
,所以当你的浏览器请求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
、/bye
和 index.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 一样获取`__dirname`