html - 如何使用 express 发送带有 css 的 html 文件作为对连接客户端的响应

Question

所以我已经尝试解决这个问题一段时间了，但我发现的答案只是令人困惑、含糊不清且没有解释，或者不起作用 -(至少对我而言)。

首先是我的元素结构。

..表示一个文件夹
- 表示一个文件
而四个 |表示父文件夹中的子目录或文件

..public
|||| ..html&css
|||| |||| ..main
|||| |||| |||| - main.html
|||| |||| |||| - main.css
|||| ..javascript
|||| |||| -server.js

希望上面的元素结构是可以理解的，Stack Overflows 格式很难处理。

这是我的代码 - server.js

let express = require('express');
let app = express();

app.use(express.static('../html&css'));

let server = app.listen(8080, function () {
    app.get(function (req, res) {
        res.sendFile();
    });
});

let port = server.address().port;
console.log(`Express app listening at ${port}`);

我见过几种在有人连接到服务器时发送文件的方法，并且设法让 html 发送但从来没有同时发送 html 和 CSS。通过研究，我已经看到了几种方法可以做到这一点，但解释它们的方式令人困惑，我没有找到答案来详细解释如何完成我的问题以及你做什么以及为什么要按照他们所说的来完成它.

我刚刚了解了很多关于路由、静态、app.get this 和 app.get that、res.sendFile 和其他一些胡言乱语的信息，但没有一个真正有意义。大多数答案都没有完整的元素结构也无济于事。如果他们确实了解哪些路线在做什么会容易得多。

This链接似乎是我遇到的最佳答案，但由于缺乏元素结构，我无法将它实现到我自己的元素中，因此无法理解它是如何工作的。

如果有人甚至可以解释它是如何与他们的答案中实现的元素结构一起工作的，我将不胜感激，否则，如果他们有另一种方式通过使用 fs 模块来做到这一点并表达或其他东西。

我希望我的问题是可以理解清楚的。感谢您的宝贵时间。

Answer 1

我将解释它是如何工作的。但是你写的代码是正确的。甚至我都运行了代码。

let express = require('express');
let app = express();

app.use(express.static('../html&css'));

let server = app.listen(8080, function () {
    app.get(function (req, res) {
        res.sendFile();
    });
});

let port = server.address().port;
console.log(`Express app listening at ${port}`);

现在，什么express.static做？它公开特定文件夹并生成自动路由。
如果你想访问 main.css它将托管在 localhost:8080/main/main.css 上在main.html要使用该 CSS，您只需添加一个链接。

<link rel="stylesheet" href="main.css">或 <link rel="stylesheet" href="/main/main.css">

但是，你不能 HTTP GET 让我们说 localhost:8080/main这是行不通的。

因此，您需要通过键入 node javascript/server.js 来运行服务器它会运行得很好。但是作为 server.js是后台代码不要放在public里面文件夹。也许创建一个名为 src 的文件夹并把它放在那里。