提问者:小点点

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


我正在尝试创建一个Express应用程序。我的限制是我不能使用任何模板引擎来呈现HTML。存在(至少)两个问题:

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

对于问题2。我试过:

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

null

然后在transactions.html中

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

null

当页面显示时,它不应用任何样式。当我在浏览器中检查源代码,并单击constants.css的链接时,它显示消息:

Cannot GET /stylesheets/shared/constants.css

null

这似乎不是正确的逻辑。哪些事情要改?


共1个答案

匿名用户

简单示例:

假设您的文件夹结构:

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

您可以简单地将公用文件夹作为静态服务器,如:

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

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

对于express,最好使用绝对路径,而不是相对路径。

或者为静态文件设置虚拟路径,如:

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

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