为什么node.js找不到我的HTML页面

我有一个testing目录C:\ node_samples \ hello_express设置:

在这里输入图像描述

我在testing目录中有一个package.json文件:

{ "name": "hello_express", "version": "0.0.0", "description": "A simple web site", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Pieter Geerkens", "license": "MIT", "private": true, "dependencies": { "express": "4.13.4", "formidable": "1.x" } } 

我有node.jsexpress强大的正确安装在../node_modules子目录(至less,从安装报告成功),从testing目录运行此命令:

 npm install 

我有一个app.js文件位于testing目录中:

 var express = require('express'); var app = express(); var formidable = require('formidable'); app.use('/forms', express.static(__dirname + '/public')); app.post('/SubmitHelloPost', function (request, response) { if (request.method.toLowerCase() == 'post') { // parse form data var form = new formidable.IncomingForm(); form.parse(request, function (err, fields) { response.writeHead(200, { 'Content-Type': 'text/html' }); response.write('Hello ' + fields.userName + '!<br />'); response.end('Have a POST great day!'); console.log('Handled POST request from ' + fields.userName); }); } }); app.get('/SubmitHello', function (request, response) { response.writeHead(200, { 'Content-Type': 'text/html' }); response.write('Hello ' + request.query.userName + '!<br />'); response.end('Have a great day!'); console.log('Handled GET request from ' + request.query.userName); }); var port = 8081; app.listen(port); console.log('Listening on port: ' + port); 

我打开命令提示符并运行节点应用程序 ,如下所示:

在这里输入图像描述

但是,当我尝试通过导航到以下任一项来运行testing时:

 http://localhost:8081/HelloForm.html http://localhost:8081/HelloPost.html 

我得到一个错误404。

这个html文件是( HelloForm.html ):

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta charset="utf-8" /> </head> <body> <form method="get" action="/SubmitHello"> Enter Name: <input type="text" name="userName" autofocus /> <input type="submit" value="Submit" /> </form> </body> </html> 

和(HelloPost.html *):

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta charset="utf-8" /> </head> <body> <form method="post" action="/SubmitHelloPost"> Enter Name: <input type="text" name="userName" autofocus /> <input type="submit" value="Submit" /> </form> </body> </html> 

我不知道什么是错的。 我第一次设置完成后,所有的工作都会暂时停止,然后停止工作

我认为你的问题是由以下行引起的:

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

这告诉Express,当它接收到以/forms开始的请求时,它应该将这些映射到/public文件夹中的静态文件。 从你的目录结构来看,我想这是你要做的:

 app.use('/', express.static(__dirname)); 

(把静态文件移动到一个单独的目录也是一个好主意,现在,浏览到http://localhost:8081/app.js会返回原始的服务器端代码,你可能不想可以从你的客户端代码读取。)

你应该为这些文件创build一个目录(我将在这个例子中使用'public')。 然后将要提供的文件移动到该文件,然后更改

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

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

第一个参数是客户机访问文件所在的服务器目录,您希望成为根目录(即“/”),第二个参数是存储文件的位置。 通常,您不希望将公共内容(如HTML)与私有内容(如服务器逻辑)混合,因此您将其放在单独的文件夹中,并仅用于提供该内容。

看起来至less有两个问题。

问题#1

您已将静态资产目录挂载到/formspath,这意味着要在http://localhost:8081/forms/SomeFileNamefind要检索的任何静态资产。 您试图直接在http://localhost:8081/HelloForm.htmlfind它们,这将无法正常工作。 如果你想完全摆脱path的/forms一部分,那么你可以完全从你的静态资产声明中删除path参数:

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

问题#2

无论如何,您在公共目录内都没有这些文件。 他们只是坐在你的根目录。 相反,您希望它们位于名为public的文件夹中,以便您的静态资产声明可以find它们。 这就是为什么它有这样的public这个词,就像这样:

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

相反,在名为public的根目录中创build一个文件夹,并将这两个文件(HelloForm.html和HelloPost.html)移动到那里。

以下是关于静态文件服务的快速文档 ,它将向您展示它如何更详细地工作。

不过,我猜测,即使这将显示这两个文件,这可能不是你最终想要做的。 我的猜测是你想使用你定义的2个路线来显示这2个页面。 我的build议是阅读使用像EJS视图引擎呈现dynamic视图,并阅读RESTful路由,以确定如何命名您的路线。