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

Question

我只是在学习如何为我的宿舍制作一个简单的网络应用程序，一旦他们输入他们的名字，它就会为每个参与者分配一个随机数。有一个带有一个文本框和一个按钮的表单域。文本框（表单）需要将全名（单个字符串）发送到 MySQL 数据库，以便稍后我可以检索带有分配数字的完整列表，以便在现实世界中实际使用应用程序。只是为了冗余，我已经输入了每次创建一个新数据库和一个表的代码，但是如果数据库和表已经存在，SQL 会忽略它。

我的基本问题是我无法从 HTML 表单中获取数据。我正在使用 express.js 并尝试检索它，然后通过 SQL 模块将其发布到我的数据库中。现在，由于我是一个完整的新手，我不知道它应该如何工作。在过去的 4 天里，我一直在互联网上搜索，试图解决这个问题。不知道是js文档还是HTML文档的问题。

这是我的 HTML 表单（请告诉我您是否需要全部内容）：

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

这是我完整的 node.js 文档：

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();

  });

});

现在每次我按下表单中的按钮时，我都会Cannot POST /createPerson进入浏览器，并且没有数据发送到我的数据库。浏览器（网络选项卡）也给了我 404。也许它找不到表格？

我完全是个新手，我可以管理 HTML 和 CSS，Javascript 对我来说真的很新鲜。如果您有时间帮助我，我衷心感谢您！

标签： javascriptmysqlnode.jsexpresspost

Answer 1

问题是您同时使用node.js http 模块和express。

您正在 express.js 应用程序中设置 /createPerson，但启动的是 node.js http 服务器。因此，您启动的服务器中不存在任何端点 - 因此 404 Page Not Found。

通常，您只使用其中之一。Node.js http 模块提供了启动低级 HTTP 服务器的能力。另一方面，Express 是用于构建 http 服务的更高级的解决方案。所以在你的情况下，我会坚持使用 express 并丢弃 http（express 无论如何都在使用 http 模块）。

但是您的解决方案的根本问题是它太大而复杂，无法从头开始引导。

弄清楚一个复杂的应用程序中发生了什么可能真的很令人困惑，因为你试图一次做很多事情 - 表达 http 服务器 + sql 数据库 + html 表单......很多事情都可能出错，所以最好尝试一下取而代之的是“Hello World”方法。

为了调试这样的问题，我会缩小应用程序并尝试逐级检查每个小的交互：

1级

1. 注释掉 http 模块的使用和 express 中的每个映射，除了 /createPerson 的 POST
2. 确保在端点设置后运行 express app.listen()。
3. 注释掉 /createPerson 处理程序中的所有数据库访问，并只留下这样的日志语句：

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

4. 现在使用 node.js 运行您的脚本，并尝试使用 curl 检查 /createPerson 上的 POST：

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

（确保您使用的是正确的端口）

5. 检查 node.js 日志 - 您必须在其中看到您使用 curl 发送的名称。

当您在日志中看到名称时，级别 1 已完成！

2级

现在尝试执行相同的 POST，但形成一个 HTML 表单。

1. 将 /public 上的静态映射添加到 node.js。

2. 运行 node.js 服务器。

3. 打开一个带有 HTML 表单的页面并发布它。

4. 确保您的表单将数据发送到正确的 URL，并且您在 node.js 日志中看到数据

3级

只有现在，当您有数据从 html 流向 node.js 时，您可以尝试使用数据库扩展系统。将数据库访问代码重新集成回 /createPerson 并调试解决方案。

祝你在下一个级别好运！