ExpressJS用于在GET请求上呈现内容 [英] ExpressJS for rendering content on a GET request
问题描述
我有一个如下的html页面
I have an html page as below
<!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页面位于结构下方的文件夹中
This html page lies on below folder with structure
report
--assets
--app.js
--app.css
--myfile.html
现在我有我的应用程序正在尝试呈现此html.下面位于routes.js中，其结构如下
Now i have my application which is trying to render this html. Below is located in routes.js and the structure is as follows
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
What should i add here. I do not want to change the html as i believe it should be able to find the files once i use express.static() I keep on getting the error app.js not found 404
注意:如果我将html的href更改为
NOTE : If I change href of my html to
/Users/report/assets/app.js
与CSS相同，它可以工作，但我不希望这样.
and same for css, it works but i do not want that.
推荐答案
如果您希望诸如 assets/app.css 之类的资源独立于它们来自的页面的URL，则它们可以位于文件系统中的任何位置，然后停止使用相对URL.使用绝对URL在您的网页中引用它们，例如:
If you want your resources such as assets/app.css to be independent of the URL of the page they come from so they can live anywhere in your file system, then stop using relative URLs. Use absolute URLs to refer to them in your web page such as:
/assets/app.css
/assets/app.js
然后，您可以非常轻松地配置 express.static()路由以处理所有页面.
Then, you can very easy configure an express.static() route to handle them for all pages.
app.use(express.static("put directory here that contains the assets folder"));
从您的问题中我推断出是这样的:
Which, I'm inferring from your question would be this:
app.use(express.static('/Users/report'));
当Express收到对/assets/app.css 的请求时，它将检查 express.static()路由处理程序.如果您在 express.static()中为 assets 文件夹指定了父目录，则该路由处理程序将在该目录中查找/assets/app.css 就是您想要的.
When Express gets a request for /assets/app.css, it will check the express.static() route handler. If you've specified the parent directory for your assets folder in the express.static(), then that route handler will look IN THAT DIRECTORY for /assets/app.css which is what you want.
因此，在上面的示例中，它将接受对/assets/app.css 的请求，并将其与 express.static('/Users/report')并查看:
So, in the example above, it would take the request for /assets/app.css and combine it with the path specified in express.static('/Users/report') and look in:
/Users/report/assets/app.css
那将是您想要的.
当您在HTML文件中的资源上使用的路径不是以 http://或/开头时，浏览器会认为该路径是相对于页面的URL，以便浏览器采用网页的路径并将其放在您HTML中指定的URL的前面.这确实使静态资源变得复杂，因此通常不是您想要的.相反，您想通过确保它们以/开头来使其成为绝对路径.然后，它们很容易为其设置路由，因为无论包含它们的页面的路径是什么，路由都将是相同的.
When the path you use on the resource in your HTML file does not start with http:// or with /, then the browser considers it to be relative to the URL of the page so the browser takes the path of the web page and preprends it to the URL specified in your HTML. That really complicates static resources so that is usually not what you want. Instead, you want to make them absolute paths by making sure they start with a /. Then, they are easy to set up a route for because the route will be the same no matter what the path of the page that contains them is.
这篇关于ExpressJS用于在GET请求上呈现内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
