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

Question

I am trying to import my project into a nodejs app where I will be able to run the website on a localhost. This works, because when I run index.js and enter the url 'http://localhost:8080/', it redirects me to the homepage of my website.

The problem is, I have a form on my website, and I am trying to access the Feedback.html page where the form resides. What I am trying to do is upon submission, the form data is returned, and the data prints to the terminal (console.log()). If you look at my code, I believe that it is right. However, I am not sure where I need to place my Project4 directory. Should I place it in my views folder?

I am confused on why I need a views folder. Also, my form submission code is unresponsive.

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

In your form (please include the form as well), the name of the thing you want to access is very important. Using a npm package called body-parser (do npm i body-parser then const bodyParser = require("body-parser") . This basically just extracts the entire body portion of an incoming request stream and exposes it on req.body. Now you have body parser setup, you just need the name of the input (eg feedback) and do this

console.log(req.body.feedback)

in the app.post route. And you should be set, The thing i should mention though is that the form should have the method of POST. the route is correct and the button is a SUBMIT button. Here is what I would have done.

The form (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.

One last thing. Your views folder is needed because you are using a view engine. Take EJS; if I used res.render(index, {feedbackstuff: feedback}) , then the index file would need to be a.ejs file and in the views folder.