html - Node JS 服务 html 文件与 css

标签 html css node.js http

我正在练习纯 Node js,我遇到了一件关于 http 协议(protocol)的事情。 经过一个小时左右的搜索和测试我的代码后,我终于为我的 html 页面提供了 css。这是我的代码:

const server = http.createServer((req, res)=>{
if(req.url === "/"){
    fs.readFile("index.html", "UTF-8", function(err, data){
        res.writeHead(200, {"Content-Type": "text/html"});
        res.end(data);
    });
}else if(req.url === "/styles.css")){
    var cssPath = path.join(__dirname, 'public', req.url);
    var fileStream = fs.createReadStream(cssPath, "UTF-8");
    res.writeHead(200, {"Content-Type": "text/css"});
    fileStream.pipe(res);
};
});

但我不明白为什么会这样。好吧,我只在浏览器中输入了“/”,而没有输入“/styles.css”。以及为什么我在 URL 栏中看不到“/styles.css”。 我敢肯定这是因为 http 协议(protocol)的设计方式,但你能帮忙解释一下这个协议(protocol)吗? 提前谢谢你。

最佳答案

如果您在地址栏中输入了 /styles.css,那么您将看到 CSS 文件的源代码。例如:this link .

您键入 /,然后浏览器要求服务器 /,服务器以 HTML 文档作为响应。

然后浏览器呈现 HTML 文档。我假设 HTML 文档包含如下内容:

<link rel=stylesheet href=/styles.css>

因此浏览器向服务器请求 /styles.css 并且服务器以 CSS 文件作为响应。然后浏览器将该 CSS 应用于 HTML 文档。

它不会在地址栏中显示 /styles.css,因为您正在查看 /。 CSS 文件只是完全呈现 / 表示的 HTML 文档所需的不同资源。

关于html - Node JS 服务 html 文件与 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54963910/

相关文章:

Node.js 和 npm 选择 "package"或 "module"哪个单词?

node.js - 将 Twilio 服务部署到 Heroku 时出错

html - 我可以重置 CSS 属性而不是覆盖它吗?

html - HTML 和 CSS 中的背景水印未根据前景内容正确对齐

html - 将导航栏居中

php - 背景未在移动 View 上调整

html - 鼠标悬停在 li 外时隐藏子菜单

php - 脚本源文件与 php 不解析

css 伪类最后一个子问题

javascript - 如何在 Leaflet.js 中使用 Angular JS