React+MySQL CRUD应用无法添加数据，POST请求404问题求助

核心问题分析 #

你遇到的POST http://localhost:8080/create 404 (Not Found)错误，看似是路由未匹配，但结合代码来看，主要是后端SQL语法错误+数据库未主动建立连接导致请求处理失败，进而表现出异常响应。

具体修复步骤 #

1. 修正SQL语句的语法错误 #

后端server.js中的插入语句使用了单引号包裹列名，这在MySQL中是错误的（单引号用于字符串值，列名需用反引号或直接省略）：

// 错误写法
const sql = "INSERT INTO student ('Name','Email') VALUES (?)";

// 正确写法
const sql = "INSERT INTO student (`Name`,`Email`) VALUES (?)";

2. 初始化数据库连接 #

后端仅创建了连接对象，但未主动发起连接，导致执行SQL时失败。在创建db对象后添加连接代码：

const db = mysql.createConnection({
    host : "localhost",
    user : "root",
    password : "",
    database : "crud"
})

// 添加这段连接代码
db.connect((err) => {
  if (err) {
    console.error('数据库连接失败:', err);
    return;
  }
  console.log('数据库连接成功');
});

3. 优化后端错误排查 #

在POST路由中打印具体错误信息，方便定位问题：

app.post('/create', (req, res) => {
    const sql = "INSERT INTO student (`Name`,`Email`) VALUES (?)";
    const values = [
        req.body.name,
        req.body.email
    ]
    db.query(sql, [values], (err, data) => {
        if(err) {
            console.log(err); // 打印具体错误日志
            return res.status(500).json("Errorrr");
        }
        return res.json(data);
    })
})

4. 确认前端状态变量初始化 #

确保CreateStudent.js中正确初始化了name和email状态：

import { useState } from 'react';

// 在组件内添加
const [name, setName] = useState('');
const [email, setEmail] = useState('');

5. 验证后端服务状态 #

确保后端服务正常运行在8080端口，控制台能看到Listening....和数据库连接成功的日志，避免端口被其他程序占用。

测试验证 #

修改完成后重启后端服务，重新提交表单：

• 若数据库连接正常且SQL语法正确，数据会成功插入，页面将跳转至首页
• 若仍有错误，查看后端控制台的错误日志，根据具体信息进一步排查

内容的提问来源于stack exchange，提问作者Deelliiee