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

时间:2019-04-19 20:55:47

标签: javascript html node.js express html-rendering

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

  1. 我预见到的问题之一是如何根据需要显示给用户的内容来管理数据。例如。我的数据库中有一个交易表,我需要显示所有这些交易的HTML表。我使用的传统方式是利用模板引擎,在其中可以放置遍历记录的for循环。
  2. 调用特定路由时,我正在发送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">
和指向样式表的其他链接。

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

Cannot GET /stylesheets/shared/constants.css

这似乎不是正确的逻辑。什么事情应该改变?

2 个答案:

答案 0 :(得分:2)

简单的例子:

假设您的文件夹结构是

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时,最好使用absolute路径而不是relative路径。

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

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

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

答案 1 :(得分:0)

简单的例子对我有用:

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">

用这种方法,我用的引擎和你一样。