时间戳

首页 > 解决方案 > Node JS 使用 css 提供 html 文件

html - Node JS 使用 css 提供 html 文件

问题描述

我正在练习纯节点 js，我遇到了一件让 http 协议感到不安的事情。经过一个小时左右的搜索和测试我的代码后，我终于用 css 为我的 html 页面提供了服务。这是我的代码：

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 协议的设计方式，但您能帮忙解释一下这个协议吗？先感谢您。

标签： htmlcssnode.jshttp

解决方案

如果您/styles.css在地址栏中键入，那么您将看到 CSS 文件的源代码。例如：这个链接。

您键入/，然后浏览器请求服务器，/服务器以 HTML 文档响应。

然后浏览器呈现 HTML 文档。我假设 HTML 文档包括以下内容：

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

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

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

推荐阅读