[英]Using express.js to serve html file along with scripts, css, and images
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. 我正在尝试构建我的第一个webapp,我开始使用前端并使用jquery和jquery mobile以及许多插件我已经有一个重要的前端,并且所有这些都来自单个html文件(因为jquery mobile使用页面div在同一个文件中)但是还有一个app的主要js文件,一个css文件和插件等包含的许多css和js文件。 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.
我现在正尝试使用node.js和express.js添加数据库和其他后端功能,但是当我使用res.sendFile()来提供html脚本和css don'时,我遇到了一堵墙。加载,当我尝试服务目录时,一切都在其中显示目录作为链接,我当然不希望在公共视图中(虽然当我这样做并单击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)允许前端将请求发送回服务器(所以我可以使用表单并获取数据和东西)?
You should do the following things: 你应该做以下事情:
To serve static files with Express, read this link. 要使用Express提供静态文件,请阅读此链接。
You'll basically add it to your express app: 你基本上将它添加到你的快递应用程序:
app.use( express.static( __dirname + '/client' ));
Where '/client'
will be the name of the folder with your frontend app files. 其中
'/client'
将是您的前端应用文件的文件夹名称。
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 . 更多关于这里的回应。
Those are the things that you should seek to build your app. 这些是您应该寻求构建应用程序的东西。
You can see a simple app with those things implemented here . 您可以在这里看到一个简单的应用程序。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.