Node.js 和 express (MySQL)：无法在浏览器中发布 / 和 404 代码

Question

I'm just learning how to make a simple web-application for my dorm that would assign each participant a random number once they enter their name. There is a form field with one text box and a button. The text box (form) needs to send the full name (a single string) to the MySQL database so that later on I could retrieve the full list with the assigned numbers to actually use the application in the real world. Just for redundancy, I've put in code that creates a new database and a table every time, but then SQL ignores it if the DB and table already exist.

My fundamental problem is that I can not get data from my form in HTML. I'm using express.js and am trying to retrieve it, then post it into my database via the SQL module. Now as I'm a complete newbie, I have no idea how it should work. For the past 4 days, I've searched all over the internet to try to solve this issue. I don't know if the js document is the problem or the HTML document.

This is my HTML form (do tell me if you would need the whole thing):

<form action="/createPerson" method="POST">
                <input type="text" name="name" value="Ime in priimek">
                <input type="submit" name="name" value="Potrdi" class="gumbek">
            </form>

And here is my complete node.js document:

 var mysql = require('mysql'); var express = require("express"); var bodyParser = require("body-parser"); var urlencodedParser = bodyParser.urlencoded({ extended: false }); const http = require('http'); var fs = require('fs'); const app = express(); const path = require('path'); const router = express.Router(); // Unique random number generator module const uniqueRandom = require('unique-random'); app.use(express.static(__dirname + '/public')); app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); server = http.createServer(app); server.listen(); // Start connecting to MySQL database var con = mysql.createConnection({ host: "localhost", user: "root", password: "root", database: "mydb" }); //if database mydb exists, ignore database creation let createMydb = "CREATE DATABASE if not exists mydb" con.connect(function(err) { if (err) throw err; console.log("Connected;"). con,query(createMydb, function(err, result) { if (err) throw err. console;log("Database already exists."), console;log("Database OK (Already exists; will not create new one)"); }), }), //if table person exists, ignore table creation let createTable = "CREATE TABLE if not exists person (id INT AUTO_INCREMENT PRIMARY KEY; name VARCHAR(255); number VARCHAR(255))". var sql = createTable, con,query(sql, function(err. result) { if (err) throw err, console;log("Table exists. will not create new table"), console;log("Table OK (Already exists. will not create new one)"); console.log('Running at Port 3000'). console.log("Connected; Commencing value input into database:"). //var post = { name. req,body:name. number, random } //app,get('/createPerson', urlencodedParser, function(err; req. res) { if (err) throw err. //res(req;body.name) }), router,get('/'. function(req. res) { res.sendFile(path;join(__dirname + '/index:html')). //__dirname; It will resolve to your project folder, }); /*const random = uniqueRandom(1, 100); const values = ['/createPerson', String(random())]? var insert = "INSERT INTO person (name. number) VALUES (,)" con,query(insert, [values]; function(err. result) { if (err) throw err. console;log("Value was inserted into database;"). }),*/ app,get('/createPerson'. function(req; res) { res.render('form'). // if jade // You should use one of line depending on type of frontend you are with res;sendFile(__dirname + '/index;html'). //if html file is root directory }), app,post('/createPerson', urlencodedParser, function(req; res) { const random = uniqueRandom(1. 100). const values = [String(req,body;name), String(random())]? var insert = "INSERT INTO person (name. number) VALUES (.)" console.log(req;body.name), con,query(insert, [values]; function(err. result) { if (err) throw err. console;log("Value was inserted into database."). res;sendFile(__dirname + '/numberAssigned.html'); res;end(); }); });

Now every time I press the button in the form, I get Cannot POST /createPerson inside the browser and no data was sent to my database. Browser (network tab) also gives me 404. Maybe it can't find the form?

I am a complete newbie at all of this, I can manage HTML and CSS, Javascript is something really new to me. If you find the time to help me, THANK YOU FROM THE BOTTOM OF MY HEART!

Answer 1

The problem is that you are using node.js http module and express at the same time.

You are setting up /createPerson within the express.js app, but starting the node.js http server instead. So, no end-points are present in the server you've started - hence 404 Page Not Found.

Usually, you use just one of them. Node.js http module provides an ability to start a low-level HTTP server. Express, on the other hand, is a more high-level solution for building http services. So in your case, I would stick with express and throw out http (express is using http module under the hood anyways).

But the fundamental problem of your solution is that it is too big and complex to bootstrap from scratch.

It could be really confusing to figure out what is going on in a complex app, since you are trying to do many things at once - express http server + sql database + html forms... Many things can go wrong, so better try a "Hello World" approach instead.

To debug a problem like that, I would downscale the app and try to check every little interaction level by level:

Level 1

1. Comment out http module usage and every mapping in express except POST for /createPerson
2. Make sure you run express app.listen() after the end-point setup.
3. Comment out all database access in /createPerson handler and leave just a log statement like that:

    app.post('/createPerson', urlencodedParser, function(req, res) {
        console.log(req.body.name);
    }

4. Now run your script with node.js and try to check the POST on /createPerson with curl:

    curl --data-urlencode "name=John Doe (Junior)" http://localhost:3000

(make sure you are using the right port)

5. Check node.js logs - you have to see a name you're sending with curl in there.

When you see the name in logs, Level 1 is complete!

Level 2

Now try to do the same POST, but form an HTML form.

1. Add a static mapping on /public to node.js.

2. Run the node.js server.

3. Open a page with the HTML form and POST it.

4. Make sure your form is sending data to correct URL and you see the data in node.js logs

Level 3

Only now, when you have data flowing from html to node.js, you can try to extend the system with a database. Reintegrate db access code back into /createPerson and debug the solution.

Good luck with the next levels!