无法通过React前端向PostgreSQL数据库插入数据问题求助

后端（Node.js + PostgreSQL）错误与修正 #

核心问题点 #

• HTTP方法误用：插入数据应使用POST方法，而非PUT（PUT用于资源更新操作）
• 请求体处理错误：req.body无需await，且前端传递的是包含三个字段的对象，后端错误地将其作为单一字段插入数据库
• SQL语句错误：INSERT语句仅指定了一个字段，与表中实际的admin_name、admin_email、admin_password字段不匹配

修正后的后端代码 #

const express = require("express");
const app = express();
const cors = require("cors");
const pool = require("./db");
const bodyParser = require("body-parser");

app.use(bodyParser.json());
app.use(cors());
app.use(express.json());

// 插入管理员数据，使用POST方法
app.post("/admin/staff", async (req, res) => {
    try {
        // 解构前端传递的三个字段
        const { admin_name, admin_email, admin_password } = req.body;
        // 插入对应字段，返回新增数据
        const newAdmin = await pool.query(
            "INSERT INTO adminstration (admin_name, admin_email, admin_password) VALUES ($1, $2, $3) RETURNING *",
            [admin_name, admin_email, admin_password]
        );
        res.json(newAdmin.rows[0]);
        console.log("新增管理员数据:", newAdmin.rows[0]);
    } catch (err) {
        console.error("数据库插入错误:", err.message);
        res.status(500).json({ error: err.message }); // 给前端返回错误状态码
    }
});

app.listen(5000, () => {
    console.log("server is running on port 5000");
});

前端（React + MUI）错误与修正 #

核心问题点 #

• 事件方法拼写错误：e.preventdefault()应为e.preventDefault()（首字母D大写）
• 提交事件绑定错误：onSubmit应绑定在form容器（即Box组件）上，而非Input组件
• HTTP方法不匹配：需与后端一致，改为POST
• 提交按钮组件误用：MUI的Input不是按钮组件，应使用Button或原生button
• 请求体结构优化：无需嵌套adminstration对象，直接传递字段更简洁

修正后的前端代码 #

import React, { useState } from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

export default function Adminfun() { 
    const [adminData, setAdminData] = useState({
        admin_name: "", 
        admin_email: "", 
        admin_password: ""
    });

    const handleSubmit = async (e) => {
        e.preventDefault(); // 修正拼写错误
        try {
            const response = await fetch("http://localhost:5000/admin/staff", {
                method: "POST", // 改为POST方法
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(adminData) // 直接传递字段对象
            });
            
            if (!response.ok) {
                throw new Error(`HTTP错误状态: ${response.status}`);
            }
            
            const result = await response.json();
            console.log("提交成功:", result);
            // 提交后清空表单
            setAdminData({ admin_name: "", admin_email: "", admin_password: "" });
        } catch (err) {
            console.error("提交失败:", err.message);
        } 
    }; 

    return (
        <Box
            component="form"
            sx={{ '& > :not(style)': { m: 1, width: '25ch' } }}
            noValidate
            autoComplete="off"
            onSubmit={handleSubmit} // 将onSubmit绑定在form容器上
        >
            <TextField 
                id="outlined-basic" 
                label="Name" 
                variant="outlined" 
                value={adminData.admin_name} 
                onChange={(e) => setAdminData({...adminData, admin_name: e.target.value})}
            />
            <TextField 
                id="filled-basic" 
                label="Email" 
                variant="filled" 
                value={adminData.admin_email} 
                onChange={(e) => setAdminData({...adminData, admin_email: e.target.value})}
            />
            <TextField 
                id="standard-basic" 
                label="Password" 
                variant="standard" 
                value={adminData.admin_password} 
                onChange={(e) => setAdminData({...adminData, admin_password: e.target.value})}
            />
            <br />
            {/* 使用MUI Button作为提交按钮 */}
            <Button type="submit" variant="contained">Submit</Button>
        </Box>
    );
};

额外注意事项 #

1. 确保PostgreSQL中的adminstration表确实存在admin_name、admin_email、admin_password三个字段
2. 后端的db.js需正确配置数据库连接，确保能正常访问PostgreSQL
3. 前端提交时可增加表单验证（如邮箱格式、密码长度），提升用户体验
4. 生产环境需关闭CORS的全开放设置，限制允许的域名

内容的提问来源于stack exchange，提问作者بغية السالِك