javascript 使用 express.js 提供 html 文件以及脚本、css 和图像

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31504798/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 13:54:54  来源:igfitidea点击:

Using express.js to serve html file along with scripts, css, and images

javascriptnode.jsexpress

提问by Roscode

I'm trying to build my first webapp, I started with the frontend and using jquery and jquery mobile as well as many plugins I have a significant frontend already, and all of it stems from a single html file (since jquery mobile uses page divs within the same file) but there is also a main js file for the app, a css file and many css and js files included from plugins and the like. I'm now trying to add in database and other backend functionality using node.js and express.js, but I've run into a wall, when I use res.sendFile() to serve up the html the scripts and css don't load, and when I try to serve the directory everything is in it shows the directory as links which I certainly don't want in the public view (though when I do this and click the html file link it works fine.

我正在尝试构建我的第一个 web 应用程序,我从前端开始并使用 jquery 和 jquery mobile 以及许多插件我已经有一个重要的前端,所有这些都源于单个 html 文件(因为 jquery mobile 使用页面 div在同一个文件中),但还有一个用于应用程序的主 js 文件、一个 css 文件以及许多 css 和 js 文件,这些文件包含在插件等中。我现在正在尝试使用 node.js 和 express.js 添加数据库和其他后端功能,但是当我使用 res.sendFile() 来提供 html 脚本和 css 时,我遇到了障碍t 加载,当我尝试为目录提供服务时,它会将目录显示为我当然不希望在公共视图中显示的链接(尽管当我这样做并单击 html 文件链接时,它工作正常。

What I want to know is how do I use express to a) serve up an externally designed and maintained frontend and b) allow that frontend to send requests back to the server (so I can use forms and get data and stuff)?

我想知道的是我如何使用 express 来 a) 提供一个外部设计和维护的前端和 b) 允许该前端将请求发送回服务器(这样我就可以使用表单并获取数据和东西)?

回答by Eric Douglas

You should do the following things:

你应该做以下事情:

  1. Serve your static files
  2. Create an API server that will listen for the requests coming from your frontend app
  1. 提供您的静态文件
  2. 创建一个 API 服务器来侦听来自前端应用程序的请求

1. Serve your static files

1. 提供静态文件

To serve static files with Express, read thislink.

要使用 Express 提供静态文件,请阅读链接。

You'll basically add it to your express app:

您基本上会将其添加到您的 Express 应用程序中:

app.use( express.static( __dirname + '/client' ));

Where '/client'will be the name of the folder with your frontend app files.

'/client'包含前端应用程序文件的文件夹的名称将在哪里。

2. Create an API server

2.创建API服务器

You can see how to create an API server here.

您可以在此处查看如何创建 API 服务器。

For the entry point of your application, you should send/render a file.

对于应用程序的入口点,您应该发送/呈现一个文件。

This could be accomplished with the following code:

这可以通过以下代码完成:

app
  .get( '/', function( req, res ) {
    res.sendFile( path.join( __dirname, 'client', 'index.html' ));
  });

This will send a static file every time that a user request a file at the root path of your application.

每次用户在应用程序的根路径中请求文件时,这都会发送一个静态文件。

You can use the asterisk *(wildcard) instead of /too. That symbol meaning that for whatever route requested, you will respond with the same file/action.

您可以使用星号*(通配符)代替/太。该符号意味着对于请求的任何路由,您将使用相同的文件/操作进行响应。

More about the responses here.

更多关于这里的反应。

Sum up

总结

Those are the things that you should seek to build your app.

这些是您在构建应用程序时应该寻求的东西。

You can see a simple app with those things implemented here.

你可以看到一个简单的应用程序在这里实现了这些东西。