CRUD React App - 无法将数据发布到 SQL 数据库？

Question

我一直在尝试使用 Create React App 创建一个 CRUD 应用程序来与我的 SQL 数据库进行交互。

但是，我不断收到以下错误：

未捕获（承诺中）错误：请求失败，状态码为 404 createError createError.js:16 解决 sett.js:17 handleLoad xhr.js:62 dispatchXhrRequest xhr.js:37 xhrAdapter xhr.js:13 dispatchRequest dispatchRequest.js:52 承诺回调*请求 Axios.js:61 方法 Axios.js:87 包装 bind.js:9 saveData App.js:22 React 14 不稳定_runWithPriority scheduler.development.js:468 React 4 createError.js:16 XHRPOSThttp://localhost:3000/create [HTTP/1.1 404 2ms 未找到]

这是我的 index.js 文件中的代码：

const express = require('express');
const app = express();
const mysql = require('mysql2');
const cors = require('cors');
 
app.use(cors());
app.use(express.json());
 
const db = mysql.createConnection({
user: 'root',
host: 'localhost',
port: '3307',
password: '',
database: 'aemonthlysitrep',
});
 
app.post("/create", (req, res) => {
const aeattendances_type1 = req.body.aeattendances_type1;
const aeattendances_type2 = req.body.aeattendances_type2;
const aeattendances_other = req.body.aeattendances_other;
const fourhours_patients_type1 = req.body.fourhours_patients_type1;
const fourhours_patients_type2 = req.body.fourhours_patients_type2;
const fourhours_patients_other = req.body.fourhours_patients_other;
const fourtotwelvehours_patients = req.body.fourtotwelvehours_patients;
const twelvehours_patients = req.body.twelvehours_patients;
const aeemergencyadmissions_type1 = req.body.aeemergencyadmissions_type1;
const aeemergencyadmissions_type2 = req.body.aeemergencyadmissions_type2;
const aeemergencyadmissions_other = req.body.aeemergencyadmissions_other;
const emergencyadmissions_other = req.body.emergencyadmissions_other;
 
db.query(
    "INSERT INTO data (aeattendances_type1, aeattendances_type2, aeattendances_other, >4hours_patients_type1, >4hours_patients_type2, >4hours_patients_other, 4-12hour_patients, >12hours_patients, aeemergencyadmissions_type1, aeemergencyadmissions_type2, aeemergencyadmissions_other, emergencyadmissions_other) VALUES (?,?,?,?,?,?,?,?,?,?,?,?)",
    [aeattendances_type1, aeattendances_type2, aeattendances_other, fourhours_patients_type1, fourhours_patients_type2, fourhours_patients_other, fourtotwelvehours_patients, twelvehours_patients, aeemergencyadmissions_type1, aeemergencyadmissions_type2, aeemergencyadmissions_other, emergencyadmissions_other ],
    (err, result) => {
        if (err) {
        console.log(err);
    } else {
        res.send("Data added successfully.");
     }
    }
    );
});  
 
app.listen(3000, ()=> {
console.log("The server is running.")
});

下面是我的 App.js 文件中的代码：

 import './App.css';
    import { useState } from "react"; 
    import Axios from 'axios';

    function App() {

    const [aeattendances_type1, setAeattendances_type1] = useState(0);
    const [aeattendances_type2, setAeattendances_type2] = useState(0);
    const [aeattendances_other, setAeattendances_other] = useState(0);
    const [fourhours_patients_type1, setFourhours_patients_type1] = useState(0);
    const [fourhours_patients_type2, setFourhours_patients_type2] = useState(0);
    const [fourhours_patients_other, setFourhours_patients_other] = useState(0);
    const [fourtotwelvehours_patients, setFourtotwelvehours_patients] = useState(0);
    const [twelvehours_patients, setTwelvehours_patients] = useState(0);
    const [aeemergencyadmissions_type1, setAeemergencyadmissions_type1] = useState(0);
    const [aeemergencyadmissions_type2, setAeemergencyadmissions_type2] = useState(0);
    const [aeemergencyadmissions_other, setAeemergencyadmissions_other] = useState(0);
    const [emergencyadmissions_other, setEmergencyadmissions_other] = useState(0);


    const saveData = () => {
    Axios.post("http://localhost:3000/create", { 
      aeattendances_type1: aeattendances_type1,
      aeattendances_type2: aeattendances_type2,
      aeattendances_other: aeattendances_other,
      fourhours_patients_type1: fourhours_patients_type1,
      fourhours_patients_type2: fourhours_patients_type2,
      fourhours_patients_other: fourhours_patients_other,
      fourtotwelvehours_patients: fourtotwelvehours_patients,
      twelvehours_patients: twelvehours_patients,
      aeemergencyadmissions_type1: aeemergencyadmissions_type1,
      aeemergencyadmissions_type2: aeemergencyadmissions_type2,
      aeemergencyadmissions_other: aeemergencyadmissions_other,
      emergencyadmissions_other: emergencyadmissions_other,
    }).then(() => {
      console.log("Success.");
    });
    };

    return (
    <div className="App">
      <link
           rel="stylesheet"
           href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
           integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
           crossOrigin="anonymous"
      />
       <div>
        <div className="col-6 mx-auto">
          <table className="table table-bordered">
            <thead>
              <tr>
                <th colSpan={10} scope="col"><p className="text-end px-5 pt-2">Attendances by A&amp;E Type</p></th>
              </tr>
              <tr>
                <th scope="col" />
                <th scope="col"><center>Type 1</center></th>
                <th scope="col"><center>Type 2</center></th>
                <th scope="col"><center>Other</center></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">Number of A&amp;E Attendances</th>
                <td>
                  <div className="col p-4">
                    <div className="form-group">
                      <input type="number" onChange={(event) => {
                        setAeattendances_type1(event.target.value);
                        }}  className="form-control"/>
                    </div>
                  </div>
                </td>
                <td>
                  <div className="col p-4">
                    <div className="form-group">
                      <input type="number" onChange={(event) => {
                        setAeattendances_type2(event.target.value);
                        }}  className="form-control" />
                    </div>
                  </div>
                </td>
                <td>
                  <div className="col p-4">
                    <div className="form-group">
                      <input type="number" onChange={(event) => {
                        setAeattendances_other(event.target.value);
                        }}  className="form-control" />
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
              </tr><tr>
                <th scope="row">Number of Patients who have had a total time in A&amp;E of  <br />over 4 hours from arrival to discharge,transfer of admission</th>
                <td>
                  <div className="col p-4">
                    <div className="form-group">
                      <input type="number" onChange={(event) => {
                        setFourhours_patients_type1(event.target.value);
                        }}  className="form-control" />
                    </div>
                  </div>
                </td>
                <td>
                  <div className="col p-4">
                    <div className="form-group">
                      <input type="number" onChange={(event) => {
                        setFourhours_patients_type2(event.target.value);
                        }}  className="form-control" />
                    </div>
                  </div>
                </td>
                <td>
                  <div className="col p-4">
                    <div className="form-group">
                      <input type="number" onChange={(event) => {
                        setFourhours_patients_other(event.target.value);
                        }}  className="form-control" />
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <th scope="row">Number of patient who have waited 4-12 hours in A&amp;E from <br />decision to admit to admission</th>
                <td colSpan={3}>
                  <div className="col-7 p-4 mx-auto">
                    <div className="form-group">
                      <input type="number" onChange={(event) => {
                        setFourtotwelvehours_patients(event.target.value);
                        }}  className="form-control" />
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <th scope="row">Number of patient who have over 12 hours in A&amp;E from <br />decision to admit to admission</th>
                <td colSpan={3}>
                  <div className="col-7 p-4 mx-auto">
                    <div className="form-group">
                      <input type="number" onChange={(event) => {
                        setTwelvehours_patients(event.target.value);
                        }}  className="form-control" />
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="col-6 mx-auto">
          <table className="table table-bordered">
            <thead>
              <tr>
                <th colSpan={10} scope="col"><p className="text-end px-5 pt-2">Number of Admissions</p></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">Number of patient who have waited 4-12 hours in A&amp;E from <br />decision to admit to admission</th>
                <td colSpan={3}>
                  <div className="col-6 mx-auto">
                    <div className="form-group">
                      <input type="number" onChange={(event) => {
                        setAeemergencyadmissions_type1(event.target.value);
                        }}  className="form-control" />
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <th scope="row">Number of patient who have over 12 hours in A&amp;E from <br />decision to admit to admission</th>
                <td colSpan={3}>
                  <div className="col-6 mx-auto">
                    <div className="form-group">
                      <input type="number" onChange={(event) => {
                        setAeemergencyadmissions_type2(event.target.value);
                        }}  className="form-control" />
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <th scope="row">Number of patient who have waited 4-12 hours in A&amp;E from <br />decision to admit to admission</th>
                <td colSpan={3}>
                  <div className="col-6 mx-auto">
                    <div className="form-group">
                      <input type="number" onChange={(event) => {
                        setAeemergencyadmissions_other(event.target.value);
                        }}  className="form-control" />
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <th scope="row">Number of patient who have over 12 hours in A&amp;E from <br />decision to admit to admission</th>
                <td colSpan={3}>
                  <div className="col-6 mx-auto">
                    <div className="form-group">
                      <input type="number" onChange={(event) => {
                        setEmergencyadmissions_other(event.target.value);
                        }}  className="form-control" />
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          <div className="sitrep col-6 mx-auto">
            <button onClick={saveData}>Save Data</button>
            </div>
        </div>
      </div>
    </div>
     );
     }
    
    export default App;

如果我正确理解错误，我无法弄清楚是什么阻止了数据输入到我的 SQL 数据库中；似乎是在暗示它找不到 /create URL？

如果有任何帮助，我将不胜感激。

谢谢。

亲切的问候，

亚当

Answer 1

一点代码审查，希望能解决问题。

app.post('/create', async (req, res) =>{
    const body = req.body // Assigning all incoming data into a variable
    
    const data = await db.query('INSERT INTO data (aeattendances_type1, aeattendances_type2, aeattendances_other, >4hours_patients_type1, >4hours_patients_type2, >4hours_patients_other, 4-12hour_patients, >12hours_patients, aeemergencyadmissions_type1, aeemergencyadmissions_type2, aeemergencyadmissions_other, emergencyadmissions_other) VALUES (?,?,?,?,?,?,?,?,?,?,?,?)', [...Object.values(body)], // Spreading data into an array
    (err, result)=>{
        if (err) {
            console.log(err);
        } else {
            console.log('Data added successfully.');
        }
    }
    )
})