mongodb 我的前端是工作,但数据是不是得到发送到数据库

6mzjoqzu  于 2023-03-22  发布在  Go
关注(0)|答案(1)|浏览(186)

我正在构建一个简单的react应用程序,但我的数据没有发送到数据库,错误是axios错误:控制台中的网络错误错误错误是net::ERR_CONNECTION_REFUSED,我已经挣扎了一个星期请帮助。im使用mern技术im使用端口3000和8071为后端
`我的server.js

const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const cors = require("cors");
const dotenv = require("dotenv");

const app = express(); 
require("dotenv").config();

const PORT = process.env.PORT || 8071;

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


const URL = process.env.MONGODB_URL;

mongoose.connect(URL, {
    useNewUrlParser: true,
});

const connection = mongoose.connection;
connection.once("open", () => {
    console.log("Mongodb Connection success!");
})

const supplierRouter = require("./routes/suppliers.js");

app.use("/supplier", supplierRouter);

app.listen(PORT, () => {
    console.log(`Server is up and running on port:  ${PORT}`)
})

我的Addsupplier.js

import AdminDashBoard from "./AdminDashBoard";
import axios from "axios";

export default function AddSupplier(){

    const [supplierName, setSupplierName] = useState("");
    const [address, setAddress] = useState("");
    const [contactNumber, setContactNumber] = useState("");
    const [email, setEmail] = useState("");

    function sendData(e){
        e.preventDefault();
        
        const newSupplier = {
            supplierName,
            address,
            contactNumber,
            email
        }
        
        axios.post("http://localhost:8071/supplier/add", newSupplier).then(()=>{
            alert("Supplier Added")
        }).catch((err)=> {
            alert(err)
        })

    }

    return(
        <div>
            <AdminDashBoard></AdminDashBoard>
       

        <div className="container">
            <form onSubmit={sendData}>
  <div className="form-group">
    <label for="supplierName">Supplier Name</label>
    <input type="text" className="form-control" id="supplierName"  placeholder="Enter Supplier Name" 

    onChange={(e)=>{
        setSupplierName(e.target.value);
    }} />
   
  </div>
  <div className="form-group">
  <label for="address">Supplier Address</label>
    <input type="text" className="form-control" id="address"  placeholder="Enter Supplier Address"
    
    onChange={(e)=>{
        setAddress(e.target.value);
    }} />
  </div>
 
  <div className="form-group">
  <label for="contactNumber">Contact Number</label>
    <input type="text" className="form-control" id="contactNumber"  placeholder="Enter Contact Number"
    
    onChange={(e)=>{
        setContactNumber(e.target.value);
    }} />
  </div>

  <div className="form-group">
  <label for="email">Supplier email</label>
    <input type="text" className="form-control" id="email"  placeholder="Enter Supplier email"
    
    onChange={(e)=>{
        setEmail(e.target.value);
    }} />
  </div>

  <button type="submit" className="btn btn-primary">Insert Data</button>
</form>
        </div>
        </div>
    )
}
pcww981p

pcww981p1#

对于这个路径(http://localhost:8071/supplier/add)首先尝试与postman建立连接。如果它从postman工作,然后尝试与Frontend连接,这里你没有添加supplier.js,所以我不能肯定回答有关API的问题。但从前端的Angular 来看,你需要交叉检查后端连接,只有当后端工作正常时才能工作。

相关问题