javascript - 我如何在 nodejs 应用程序中将 css 样式表与其相关的 HTML 文件链接起来？

Question

我目前正在尝试用 nodejs 理解 javascript。为了获得介绍，我阅读了一个“流式传输”我的 HTML 页面的 js 页面示例，但未使用与 css 链接的样式。

这是js文件:

应用程序.js

var http = require('http');

var port = 8080;
//import a module for using the function
var dt = require('./module.js');
//import an html file.
var fs=require('fs');

http.createServer(function (req, res) {
        fs.readFile('test.html',function(err,data) {

        res.writeHead(200, {'Content-Type': 'text/html'});
        res.write(data);
        res.end();
    });
        }).listen(port);
console.log("Serveur tourne sur http://localhost:"+port);

在 HTML 文件中，我链接了 CSS，就像我在 header 中带有以下标记的 HTML 文件中通常所做的那样

标签:
link rel="stylesheet"type="text/css"href="style.css"

a) 有人可以向我解释为什么它不起作用吗？b)在 js 文件中使用 HTML 时，普通 HTML 的用法和这种用法有什么区别？

提前致谢

Answer 1

每当您在 html 中链接文件时，无论是 stylesheet 还是 script 文件，浏览器都会向服务器发送一个 http 请求对于那个文件。

在你的情况下，如果你检查你的控制台，你可能会得到该样式文件的 404 响应代码，因为你没有从服务器端针对该请求发送任何文件。

您必须在服务器端代码中处理它。

你的服务器代码应该是这样的

if(req.url === '/home' || req.url === '/'){
    res.writeHead(200, {'Content-type' : 'text/html'});
    fs.createReadStream('test.html', 'utf8' ).pipe(res)
  }
  else if(req.url === '/style.css' ){
    res.writeHead(200, {'Content-type' : 'text/css'});
    fs.createReadStream('style.css', 'utf8' ).pipe(res)
  }

这里发生的事情是，我正在检查相关请求并发送适当的数据。现在，当浏览器请求 /style.css 时，服务器将识别此请求并将文件发送到浏览器

如果您是初学者，我建议您使用 express .它是一个 nodejs 网络框架，让您的生活变得轻松。