nodejs+mysql数据不会发送到我的数据库

irtuqstp  于 2021-09-23  发布在  Java
关注(0)|答案(2)|浏览(264)

我试图创建一个注册和登录页面,其中注册用户的详细信息被设置到数据库中,然后从那里他们被用来验证登录。
注册按钮应该向数据库发送数据,从而注册用户。之后,在登录表单中,数据操作系统进行身份验证,用户登录。我还没有进入登录部分,仍然停留在注册部分。我没有显示任何错误,只是我的数据没有被送入数据库。
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;
qxsslcnc

qxsslcnc1#

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

a7qyws3x

a7qyws3x2#

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

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.

相关问题