Nodejs + mySQL 數據沒有發送到我的數據庫

Question

我正在嘗試創建一個注冊和登錄頁面，其中將注冊用戶的詳細信息設置到數據庫中，然后從那里它們用於驗證登錄。

注冊按鈕應該將數據發送到數據庫，從而注冊用戶。 之后，在登錄表單中，數據經過身份驗證，用戶登錄。我還沒有進入登錄部分，仍然停留在注冊部分。 我沒有顯示任何錯誤，只是我的數據沒有被輸入到數據庫中。

用於 nodejs 的 index.js：

//var { app } = require("cli");
const express = require("express");
const mysql = require("mysql");
const cors = require("cors");

app = express();

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

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

app.post("/register", (req, res) => {
  const CompanyCode = req.body.CompanyCode;
  const UserID = req.body.UserID;
  const UserFullName = req.body.UserFullName;
  const UserDetail = req.body.UserDetail;
  const LoginID = req.body.LoginID;
  const Password = req.body.Password;
  const ConfirmPassword = req.body.ConfirmPassword;
  const UserPin = req.body.UserPin;
  const UserEmailID = req.body.UserEmailID;

  db.query(
    "INSERT INTO usermst (CmpnyCode,UserID,UserFullName,UserDetail,LoginID,Password,UserPin,UserEmailID) VALUES (?,?,?,?,?,?,?,?)",
    [
      CompanyCode,
      UserID,
      UserFullName,
      UserDetail,
      LoginID,
      Password,
      UserPin,
      UserEmailID,
    ],
    (err, result) => {
      console.log(err);
    }
  );
});

app.listen(8000, () => {
  console.log("Server running on port 8000");
});

用於反應 js 的 app.js：

import "bootstrap/dist/css/bootstrap.min.css";
import React, { useState } from "react";
//import { BrowserRouter, Switch, Route } from "react-router-dom";
import "./App.css";
import axios from "axios";

function App() {
  const [CompanyCodeReg, setCompanyCodeReg] = useState("");
  const [UserIDReg, setUserIDReg] = useState("");
  const [UserFullNameReg, setUserFullNameReg] = useState("");
  const [UserDetailReg, setUserDetailReg] = useState("");
  const [LoginIDReg, setLoginIDReg] = useState("");
  const [PasswordReg, setPasswordReg] = useState("");
  const [ConfirmPasswordReg, setConfirmPasswordReg] = useState("");
  const [UserPinReg, setUserPinReg] = useState("");
  const [UserEmailIDReg, setUserEmailIDReg] = useState("");

  const register = () => {
    axios
      .post("http://localhost8000/register", {
        CompanyCode: CompanyCodeReg,
        UserID: UserIDReg,
        UserFullName: UserFullNameReg,
        UserDetail: UserDetailReg,
        LoginID: LoginIDReg,
        Password: PasswordReg,
        ConfirmPassword: ConfirmPasswordReg,
        UserPin: UserPinReg,
        UserEmailID: UserEmailIDReg,
      })
      .then((response) => {
        console.log(response);
      });
  };

  return (
    <div className="App">
      <nav className="navbar navbar-expand navbar-light fixed-top">
        <div className="container">Home</div>
      </nav>
      <div className="auth-wrapper">
        <div className="auth-inner">
          <form>
            <h3>Sign Up</h3>

            <div className="form-group">
              <label>Company Code</label>
              <input
                type="text"
                className="form-control"
                placeholder="CompanyCode"
                onChange={(e) => {
                  setCompanyCodeReg(e.target.value);
                }}
              />
            </div>

            <div className="form-group">
              <label>User ID</label>
              <input
                type="text"
                className="form-control"
                placeholder="UserID"
                onChange={(e) => {
                  setUserIDReg(e.target.value);
                }}
              />
            </div>

            <div className="form-group">
              <label>User Full Name</label>
              <input
                type="text"
                className="form-control"
                placeholder="UserFullName"
                onChange={(e) => {
                  setUserFullNameReg(e.target.value);
                }}
              />
            </div>

            <div className="form-group">
              <label>User Detail</label>
              <input
                type="text"
                className="form-control"
                placeholder="UserDetail"
                onChange={(e) => {
                  setUserDetailReg(e.target.value);
                }}
              />
            </div>

            <div className="form-group">
              <label>Login ID</label>
              <input
                type="text"
                className="form-control"
                placeholder="LoginID"
                onChange={(e) => {
                  setLoginIDReg(e.target.value);
                }}
              />
            </div>

            <div className="form-group">
              <label>Password</label>
              <input
                type="password"
                className="form-control"
                placeholder="Password"
                onChange={(e) => {
                  setPasswordReg(e.target.value);
                }}
              />
            </div>

            <div className="form-group">
              <label>Confirm Password</label>
              <input
                type="password"
                className="form-control"
                placeholder=" ConfirmPassword"
                onChange={(e) => {
                  setConfirmPasswordReg(e.target.value);
                }}
              />
            </div>

            <div className="form-group">
              <label>User Pin</label>
              <input
                type="Text"
                className="form-control"
                placeholder="UserPin"
                onChange={(e) => {
                  setUserPinReg(e.target.value);
                }}
              />
            </div>

            <div className="form-group">
              <label>UserEmailID</label>
              <input
                type="email"
                className="form-control"
                placeholder="UserEmailID"
                onChange={(e) => {
                  setUserEmailIDReg(e.target.value);
                }}
              />
            </div>

            <button className="btn btn-primary btn-block" onClick={register}>
              Sign Up
            </button>
          </form>
        </div>
        <div className="auth-inner">
          <form>
            <h3>Log In</h3>

            <div className="form-group">
              <label>Login ID</label>
              <input
                type="text"
                className="form-control"
                placeholder="First Name"
              />
            </div>

            <div className="form-group">
              <label>Password</label>
              <input
                type="password"
                className="form-control"
                placeholder="Password"
              />
            </div>

            <button className="btn btn-primary btn-block">Login</button>
          </form>
        </div>
      </div>
    </div>
  );
}

export default App;

Answer 1

您必須將響應發送回客戶端，您可以使用res對象這樣做

res.json({ result });

app.post("/register", (req, res) => {
  const CompanyCode = req.body.CompanyCode;
  const UserID = req.body.UserID;
  const UserFullName = req.body.UserFullName;
  const UserDetail = req.body.UserDetail;
  const LoginID = req.body.LoginID;
  const Password = req.body.Password;
  const ConfirmPassword = req.body.ConfirmPassword;
  const UserPin = req.body.UserPin;
  const UserEmailID = req.body.UserEmailID;

  db.query(
    "INSERT INTO usermst (CmpnyCode,UserID,UserFullName,UserDetail,LoginID,Password,UserPin,UserEmailID) VALUES (?,?,?,?,?,?,?,?)",
    [
      CompanyCode,
      UserID,
      UserFullName,
      UserDetail,
      LoginID,
      Password,
      UserPin,
      UserEmailID,
    ],
    (err, result) => {
      console.log(err);
      // You have missed this line
      res.json({ result });
    }
  );
});

Answer 2

我剛剛意識到我違反了我自己的數據庫外鍵約束。 我添加了以下行：

db.connect((err) => {
  if (err) {
    console.log(err);
  }
  console.log("Connected to MySQL Server!");
});```

after creating the database connection and it displayed to me what was going wrong.