如何访问html表单中的输入表单结果

Question

我正试图将我的项目导入nodejs应用程序，在那里我将能够在本地主机上运行网站。这是有效的，因为当我运行index.js并输入url时http://localhost:8080/'，它将我重定向到我的网站主页。

问题是，我的网站上有一个表单，我正试图访问该表单所在的Feedback.html页面。我想做的是在提交后，返回表单数据，并将数据打印到终端(console.log(((。如果你看看我的代码，我相信这是正确的。但是，我不确定我需要把Project4目录放在哪里。我应该把它放在我的视图文件夹中吗？

我很困惑为什么我需要一个视图文件夹。此外，我的表单提交代码没有响应。

const path = require('path');
const fs = require('fs');
const bodyParser = require('body-parser');
const { render } = require('pug');
const app = express();
//middleware and routing
app.set('view engine', 'pug');
app.use(bodyParser.urlencoded({ extended: true }));
//Viewing website
app.use('/Project4', express.static('Project4'));
app.get('/', function(req, res){
res.redirect('/Project4/index.htm');
});
//------------------------------
//***FORM SUBMISSION PART***
app.get('/Project4/Feedback.html', function(req, res){
res.render('Project4/Feedback.html');
});
app.post('/submit-form', function(req, res){
console.log(req.body);
res.end();
});
//------------------------------
const PORT = process.env.PORT || 8080;
app.listen(PORT, function(error){
if(error){
console.log('Issue with server on port ' + PORT);
}
else{
console.log('Server running on port ' + PORT);
}
}); ```
[![This is what my app folder looks like. Where do I place the Project4 folder so that I can access its form via post method?][1]][1]

[1]: https://i.stack.imgur.com/CzC8p.png

Answer 1

在您的表单中(请同时包含表单(，您想要访问的东西的名称非常重要。使用一个名为body-parser的npm包(先执行npm i body-parser，然后执行const bodyParser = require("body-parser")。这基本上只提取传入请求流的整个主体部分，并在req.body上公开它。现在您已经设置了主体解析器，只需要输入的名称(例如反馈(，然后执行

console.log(req.body.feedback)

在app.post路由中。你应该做好准备！不过，我应该提到的是，表单应该有POST的方法，路由是正确的，按钮是SUBMIT按钮。这是我本该做的。

表单(HTML(

<form  action="/" method="post">
<input type="text" name="feedback" placeholder="Your Feedback">
<button type="submit">Submit feedback</button>
</form>

App.js

const express = require('express');
const bodyParser = require("body-parser");
const app = express();
//Those were the modules
app.use(bodyParser.urlencoded({ extended: true }));
//use body parser with the urlencoded extended
app.get("/", function(req, res){
res.sendFile(__dirname + "/index.html");
});
//sends the index.html when going to home route (/)
app.post("/", function(req, res){
var feedback = req.body.feedback;
console.log(feedback);
res.redirect("/")
});
// when posted, we make a variable requesting the body, and then the name of the input, which is the name part of the input.
app.listen(3000, function(req, res){
console.log("Server started on port 3000");
}); //self-explanatory.

最后一件事。需要视图文件夹，因为您使用的是视图引擎。以EJS为例；如果我使用res.render(index, {feedbackstuff: feedback})，那么索引文件将需要是一个.ejs文件，并且位于视图文件夹中。