sql - 如何使我的 Web 应用程序与 SQL 数据库交互？
问题描述
我正在尝试创建一个 Web 应用程序，它允许我通过表单输入数据，然后将其保存在 SQL 数据库中。
我的表格看起来像这样。
我一直在关注 YouTube 教程来帮助编写后端代码，但是当我单击“保存数据”按钮时，我的控制台日志中出现以下错误。
这是我的 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:3001/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 数据库中。
我将非常感谢任何关于我下一步可以做什么的建议/指示？
谢谢你。
亲切的问候，
亚当
解决方案
推荐阅读
- android - 我想在 Firebase onMessage 接收方法上播放自定义通知音，当锁定屏幕 android 手机时
- python - 使用 ModelForm 将模型的实例与不同模型的实例链接起来
- java - 我将如何使用 org.json API 读取这个 json 字符串
- angular - 如何从angular6中的blob在iframe中显示pdf？
- wpf - 数据最终不是一步一步来查看的；如何使用 Dispatcher 在 UI 线程和渲染线程之间切换？
- botframework - 在本地测试中使用 bot 向已知用户发送通知时出现“Access-Control-Allow-Origin”错误
- ios - 如何添加List中间的UITableViewRow
- android - 什么是 kotlin 中的内联类？
- javascript - 过滤多个组合框 SAPUI5
- android - 如何根据 JSON 响应设置多个按钮？