不使用模板引擎时如何在 Express.js 视图中包含 CSS 文件？

Question

我正在尝试创建一个 Express 应用程序。我的限制是我不能使用任何模板引擎来渲染 HTML。有（至少）两个问题：

我预见到的一个问题是，我将如何根据需要向用户展示的内容来管理数据。例如。我的数据库中有一笔交易 table，我需要显示所有这些交易的 HTML table。我使用的传统方法是利用模板引擎，我可以在其中放置一个遍历记录的 for 循环。
我在调用特定路由时发送了一个 HTML 文件，但它无法从另一个文件夹中获取 CSS 文件。

对于问题2，我试过：

 app.get('/transactions', (req, res) =>
    res.sendFile(path.join(__dirname+'/public/assets/html/transactions.html')))

然后在 transactions.html 中，我有

<link rel="stylesheet" href="../stylesheets/shared/constants.css">

和其他 link 样式表。

页面显示时，未应用任何样式。当我在浏览器中检查源代码并单击 link 以获得 constants.css 时，它显示消息：

Cannot GET /stylesheets/shared/constants.css

这似乎不是正确的逻辑。应该更改哪些内容？

Answer 1

简单示例：

假设您的文件夹结构：

app.js
|   +-- public
|   |   +-- stylesheets
|   |   |   +-- shared
|   |   |   |   +-- constants.css
...

您可以简单地将 public 文件夹作为静态服务器，例如：

app.use(express.static(__dirname + "/public"))

// In your html
<link rel="stylesheet" href="/stylesheets/shared/constants.css">

对于 express，最好使用 absolute 路径而不是 relative 路径。

或者为您的静态文件设置虚拟路径，例如：

app.use('/static', express.static(__dirname + "/public"))

// In your html
<link rel="stylesheet" href="/static/stylesheets/shared/constants.css">

Answer 2

简单的例子对我有用：

app.use(express.static(__dirname + "/publlic"))
app.get('/', (req, res) => {
app.engine('html', cons.swig);
app.set('view engine', 'html');
res.render('index');
})

// In your html
<link rel="stylesheet" href="/static/stylesheets/shared/constants.css">

用这个方法，我和你一样用引擎

不使用模板引擎时如何在 Express.js 视图中包含 CSS 文件？

How to include CSS files in Express.js views when not using a template engine?

html

javascript

html-rendering

node.js

express