Nodejs + mySQL 数据没有发送到我的数据库

Question

I am trying to create a register and login page where the registered user's details are setn to the database and then from there they are used to verify login.

The sign up button is supposed to send data to the database, hence registering a user. After that, in the login form the data os authenticated and the user logs in. I haven't gotten to the login part, still stuck on the sign up part. I don't get any errors displayed, it is just that my data is not being fed to the database.

index.js for nodejs:

//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");
});

app.js for react 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

You have to send the response back to the client, you can do so with the res object like

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

I just realized that I was violating my own database foreign key constraints. I added the following line:

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.