ExpressJS 用于在 GET 请求上呈现内容答案

【问题标题】：ExpressJS for rendering content on a GET requestExpressJS 用于在 GET 请求上呈现内容
【发布时间】：2019-02-09 23:05:32
【问题描述】：

我有一个如下的html页面

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Report</title>
<link rel="stylesheet" href="assets/app.css"/></head><body>

//Content//

<div id="report"></div><script src="assets/app.js"></script></body></html>

此 html 页面位于以下具有结构的文件夹中

report
   --assets
      --app.js
      --app.css
   --myfile.html

现在我的应用程序正在尝试呈现此 html。下面位于routes.js中，结构如下

app.use('/Users/report/assets', express.static('/Users/report/assets'));
app.get('/api/testresults/:id', (req, res) => {
    const id = req.params.id;
    res.sendFile('/Users/report/myfile.html');
  });

我的应用结构如下

MyApp 
app 
 —routes
    —index.js
    —routes.js
node_modules
package.json
server.js

我应该在这里添加什么。我不想更改 html，因为我相信一旦我使用 express.static() 它应该能够找到文件我不断收到错误 app.js not found 404

注意：如果我将 html 的 href 更改为

/Users/report/assets/app.js

同样适用于 css，它可以工作，但我不想要。

【问题讨论】：

您没有显示report 和report/assets 目录相对于您的应用程序文件结构的位置。
我相信你需要express.static的相对路径
你去哪儿了？多人试图提供帮助，但您没有回应。
@All。谢谢您的帮助。当我给出绝对路径而不是相对路径时，该解决方案有效。我面临的问题是由于插件在尝试创建报告时未将“/”附加到资产。现在开始工作

标签： javascript html node.js express

【解决方案1】：

如果您希望 assets/app.css 等资源独立于它们所来自的页面的 URL，以便它们可以存在于文件系统中的任何位置，那么请停止使用相对 URL。使用绝对 URL 在您的网页中引用它们，例如：

/assets/app.css
/assets/app.js

然后，您可以非常轻松地配置express.static() 路由来处理所有页面。

app.use(express.static("put directory here that contains the assets folder"));

我从你的问题推断是这样的：

app.use(express.static('/Users/report'));

当 Express 收到对 /assets/app.css 的请求时，它将检查 express.static() 路由处理程序。如果您在express.static() 中指定了assets 文件夹的父目录，那么该路由处理程序将在该目录中查找/assets/app.css，这就是您想要的。

因此，在上面的示例中，它将获取/assets/app.css 的请求并将其与express.static('/Users/report') 中指定的路径结合起来并查看：

/Users/report/assets/app.css

这就是你想要的。

当您在 HTML 文件中的资源上使用的路径不是以 http:// 或 / 开头时，浏览器会认为它与页面的 URL 相关，因此浏览器会采用网页并将其预先添加到您的 HTML 中指定的 URL。这确实使静态资源复杂化，因此通常不是您想要的。相反，您希望通过确保它们以/ 开头来使它们成为绝对路径。然后，它们很容易设置路由，因为无论包含它们的页面的路径是什么，路由都是相同的。

【讨论】：

【解决方案2】：

您仍在尝试使用/Users/report/assets 引用路径在html 中<script src="assets/app.js"></script> 的位置

尝试更改以下代码，

app.use('/Users/report/assets', express.static('/Users/report/assets'));

到

app.use('assets', express.static('/Users/report/assets'));

【讨论】：

【解决方案3】：

因为你有：

app.use('/Users/report/assets', express.static('/Users/report/assets'));

您应该使用 app.js 作为路径，而不是 assets/app.js 与 app.css 的任一方式

【讨论】：