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

react 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

我刚刚意识到我违反了我自己的数据库外键约束。 我添加了以下行：

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.  

Answer 2

您必须将响应发送回客户端，您可以使用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 });
    }
  );
});