javascript - CRUD React App - 无法将数据发布到 SQL 数据库？
问题描述
我一直在尝试使用 Create React App 创建一个 CRUD 应用程序来与我的 SQL 数据库进行交互。
但是，我不断收到以下错误：
未捕获（在承诺中）错误：请求失败，状态码为 404 createError createError.js:16 解决落户.js:17 handleLoad xhr.js:62 dispatchXhrRequest xhr.js:37 xhrAdapter xhr.js:13 dispatchRequest dispatchRequest.js:52 promise callback*request Axios.js:61 方法 Axios.js:87 wrap bind.js:9 saveData App.js:22 React 14 stable_runWithPriority scheduler.development.js:468 React 4 createError.js:16 XHRPOSThttp://localhost:3000 /create [HTTP/1.1 404 Not Found 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&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&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&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&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&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&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&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&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&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？
我将不胜感激任何帮助。
谢谢你。
亲切的问候，
亚当
解决方案
一点点代码审查，我希望它能解决问题。
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.');
}
}
)
})
推荐阅读
- c# - 动态添加的控件不会显示在表单上
- python - how to find a pandas dataframe index with a similar keyword?
- angular - 没有 index.html 的 Angular CLI 构建
- angular - I need a solution for (Error: InvalidPipeArgument: 'function observeOnOperatorFunction(source) )
- reactjs - React Native Lottie - 动画结束时反转
- javascript - Show/Hide elements (form) on link click - Submit form via ajax
- arabic - printing arabic on zebra ZM400 , the characters appear separated
- drupal - 没有目标_blank的Ckeditor链接锚？
- pymongo - 试图在pymongo中获取带有日期的对象ID
- batch-file - 为什么这些 DOS 变量是空的？（例如 %DATE%、%ERRORLEVEL%）