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

所以我一直在试图弄明白这一点，现在我发现的答案只是困惑，含糊不清，没有解释，或者，不起作用（至少对我来说）

首先是我的项目结构

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

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

希望上面的项目结构可以理解，堆栈溢出格式很难处理

这是我的代码-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

和一些其他的胡言乱语，但这些都没有真正意义。大多数答案都没有完整的项目结构，这也无济于事。如果他们确实了解了哪些路线在做什么，那就容易多了

链接似乎是我遇到的最好的答案，但由于缺乏项目结构，我无法将其实施到我自己的项目中，从而理解它是如何工作的

如果有人能在他们的回答中解释这是如何与实施的项目结构一起工作的，我将不胜感激，否则，如果他们通过使用

fs

模块和express或其他方式来实现这一点，我将不胜感激

我希望我的问题可以理解清楚。

---

谢谢您的时间。

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

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，只需添加一个链接

或

但是，您无法获得HTTP，比如说

localhost:8080/main

，这将不起作用

---

因此，您需要通过键入

node javascript/server.js

来运行服务器，它将正常运行。但是由于

server.js

是后端代码，所以不要将其放在

public

文件夹中。也许可以创建一个名为

src

的文件夹，并将其放在那里。

让我们看一些东西

首先，文件夹结构：

根据您的设置，您的

server.js

文件已嵌入到

public

文件夹中，尽管只降低了一级

如果您想到一个MVC框架，请参阅，您希望将服务器放在应用程序的根目录下（而不是放在

JavaScript

文件夹的

public

中，您可以在那里为任何客户端JavaScript提供服务

第二，关于中间件：

当您调用

express.static

中间件时，您需要使用

path

模块创建到公用文件夹的绝对路径，而不是相对路径，这对于部署尤其重要

app.use(express.static(path.join(__dirname, 'public')));

现在，您可以访问公用文件夹中的所有文件，如下所示：

http://localhost:8080/main/*
http://localhost:8080/javascript/*

当然，

*

指的是任何文件

第三，关于应用程序。听：

对

app.listen

的回调将返回一个

server

对象。与其在此处的路由上设置

listener

，您应该在

app.listen

调用之外建立该对象

例如，您可能希望设置一个基本的

get

路由，以便在

/

上为main.html页面提供服务。这由您决定。

express.static

中间件已将此页面作为

/main/main.html

提供服务

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, 'public', 'main.html'));
});

let server = app.listen(8080);

---

代码确实不错，但文件结构是错误的。这都是关于正确路由文件。 关于同一主题，另一个很好的答案发布在这里：

您可以手动路由css、js文件等，如下所示：

app.get('/style.css', function(req, res) {
  res.sendFile(__dirname + "/" + "style.css");
});

或者将客户端需要的内容（html/js/css…）放在公用文件夹中（不要将server.js放在该公用文件夹中，它必须保留在项目的根文件夹中），然后调用express.static自动重新路由：

const express = require("express");
const app = express();
app.use(express.static("public"));

请注意，只要在Html代码中使用正确的相对路径引用文件，您仍然可以在公用文件夹中创建文件夹来组织文件

<link href="./css/style.css" rel="stylesheet">

express.static（…）不能发送css是什么意思你可以托管任何文件。html将托管在

localhost:8080/main/main.html

上，css将托管在

localhost:8080/main/main.css

上。这个问题帮助很大，使用MVC框架的教程似乎包含了大量信息。尽管并非所有内容都有意义，但我会尽我所能地遵循它，谢谢你。我我已经按照你的指示使用了路径模块来创建一个绝对路径，这很有意义，也可以理解我为什么要使用它。但有一件事是，我的整个问题的主要方面是如何让css与html一起发送，并在用户连接时呈现，它似乎不会仅仅因为样式表的存在而自动发送ing linked.In app.get函数为html和css同时执行res.sendFile也不起作用。从我从您的答案中获得的信息来看，这似乎与路由有关。html发送很好，但我仍然不知道如何使用它发送css。我会为请求的链接执行两个app.get还是其他操作？两个app.get似乎也不起作用。CSS由

express.static

中间件提供服务。这允许您使用i向其添加