Question

我正在练习纯节点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协议的设计方式引起的，但是您可以帮助您对此协议进行一些解释。预先谢谢你。

Answer 1

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

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

然后，浏览器呈现HTML文档。我认为HTML文档包含以下内容：

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

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

由于您正在查看/styles.css，因此地址栏中没有显示/。 CSS文件只是完全呈现/所表示的HTML文档所需的另一资源。

节点JS使用CSS提供HTML文件

1 个答案: