【发布时间】：2021-10-31 06:16:32
【问题描述】：
我使用 MongoDB，当我尝试在我的 mongooDB 上使用 6 个输入路由预订时，我从标题中得到错误。 在这里你可以看到my folders 这是我的预订.js
import React from "react";
import Cutter from "../../../assets/images/Cutter.png";
import validate from "../validations/validateInfo";
import "./booking.css";
import { TimePickerComponent } from "@syncfusion/ej2-react-calendars";
import { useState, useEffect } from "react";
import axios from "axios";
const Booking = () => {
const minTime: Date = new Date("01/02/2023 09:00 AM");
const maxTime: Date = new Date("01/02/2023 5:00 PM");
// const { handleChange, values, handleSubmit, errors } = useForm(validate);
const [values, setValues] = useState({
firstName: "",
lastName: "",
phoneNumber: "",
email: "",
date: "",
hour: "",
});
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const handleChange = (e) => {
const { name, value } = e.target;
setValues((prevValues) => {
return { ...prevValues, [name]: value };
});
};
const handleClick = (e) => {
e.preventDefault();
const newProgramare = {
firstName: values.firstName,
lastName: values.lastName,
phoneNumber: values.phoneNumber,
email: values.email,
date: values.date,
hour: values.hour,
};
axios.post("http://localhost:3000/programare", newProgramare);
};
return (
<div className="programaree">
<div className="wrapper-icon">
<div className="line"></div>
<img src={Cutter} className="scissors" />
<div className="line"></div>
</div>
<div className="booking-text">
<h1 className="title-servicii">PROGRAMARE ONLINE</h1>
<h4 className="subtitle-servicii">
Ne incadram in ora programata de tine si respectam programul de tuns
</h4>
</div>
<div className="container">
<div className="left-container">
<h2 className="title-design">PROGRAM DE LUCRU</h2>
<div className="program">
<div className="days">
<h5 className="subtitle-booking">Luni-Sambata:</h5>
<h5 className="subtitle-booking">Duminica:</h5>
</div>
<div className="hours">
<h5 className="subtitle-booking">10:00 - 21:00</h5>
<h5 className="subtitle-booking">10:00 - 16:00</h5>
</div>
</div>
<h2 className="title-design">DATE DE CONTACT</h2>
<div className="program">
<div className="days">
<h5 className="subtitle-booking">Telefon:</h5>
<h5 className="subtitle-booking">Email:</h5>
</div>
<div className="hours">
<h5 className="subtitle-booking">0746060270</h5>
<h5 className="subtitle-booking">test@gmaiil.com</h5>
</div>
</div>
</div>
<div className="right-container">
<form className="form">
<div className="style-form">
<div className="right-form">
<div className="inputs">
<input
id="firstName"
className="input"
name="firstName"
placeholder="Numele mic"
type="text"
value={values.firstName}
onChange={handleChange}
></input>
{errors.firstName && <p>{errors.firstName}</p>}
</div>
<div className="inputs">
<input
id="lastName"
className="input"
name="lastName"
placeholder="Numele de familie"
type="text"
value={values.lastName}
onChange={handleChange}
></input>
{errors.lastName && <p>{errors.lastName}</p>}
</div>
<div className="inputs">
<input
id="phoneNumber"
className="input"
name="phoneNumber"
placeholder="Numar de telefon"
type="phoneNumber"
value={values.phoneNumber}
onChange={handleChange}
></input>
{errors.phoneNumber && <p>{errors.phoneNumber}</p>}
</div>
</div>
<div className="right-form">
<div className="inputs">
<input
id="email"
className="input"
name="email"
placeholder="Email"
type="Email"
value={values.email}
onChange={handleChange}
></input>
{errors.email && <p>{errors.email}</p>}
</div>
<div className="inputs">
<input
id="date"
className="input"
name="date"
placeholder="Date"
type="date"
value={values.date}
onChange={handleChange}
></input>
{errors.date && <p>{errors.date}</p>}
</div>
<div className="inputs-hour">
<TimePickerComponent
id="hour"
name="hour"
className="Hour"
placeholder="Alegeti-va ora"
min={minTime}
max={maxTime}
format="HH:mm"
step={45}
value={values.hour}
onChange={handleChange}
></TimePickerComponent>
{errors.hour && <p>{errors.hour}</p>}
</div>
</div>
</div>
<button className="button-form" type="submit" onClick={handleClick}>
{" "}
Programeaza-te
</button>
</form>
</div>
</div>
</div>
);
};
export default Booking;前端形式为Here的图片
server.js 在这里：
require("dotenv").config({ path: ".env" });
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const cookieParser = require("cookie-parser");
const fileUpload = require("express-fileupload");
const app = express();
app.use(express.json());
app.use(cors());
app.use(cookieParser());
app.use(
fileUpload({
useTempFiles: true,
})
);
// Routes
app.use('/user', require('./routes/userRouter'))
app.use('/api', require('./routes/upload'))
//Connect to mongoodb
const URI = process.env.MONGODB_URL;
mongoose.connect(URI, (err) => {
if (err) throw err;
console.log("connected to MongoDB");
});
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
console.log("Server is running on port", PORT);
});而且我确实有 app.use('/user', require('./routes/userRouter')) 女巫从路线与我的路线建立链接
这是我的路线：
router.route("/programare").post((req,res)=>{
const firstName = req.body.firstName;
const lastName = req.body.lastName;
const phoneNumber = req.body.phoneNumber;
const email = req.body.email;
const date = req.body.date;
const hour = req.body.hour;
const newProgramare = new Prog({
firstName,
lastName,
phoneNumber,
email,
date,
hour
})
newProgramare.save();
})
module.exports = router;我的架构是我使用的 programareSchema：
const mongoose = require("mongoose");
const programareSchema = {
date: String,
email: String,
firstName: String,
hour: String,
lastName: String,
phoneNumber: String,
};
const Prog = mongoose.model("Programare",programareSchema)
module.exports=Prog;
const userSchema = new mongoose.Schema(
{
name: {
type: String,
required: [true, "Please enter your name !"],
trim: true,
},
email: {
type: String,
required: [true, "Please enter your email !"],
trim: true,
unique: true,
},
password: {
type: String,
required: [true, "Please enter your password !"],
},
role: {
type: Number,
default: 0, //0 = user , 1 = admin
},
avatar: {
type: String,
default:
"https://www.google.ro/imgres?imgurl=https%3A%2F%2Fwww.w3schools.com%2Fhowto%2Fimg_avatar.png&imgrefurl=https%3A%2F%2Fwww.w3schools.com%2Fhowto%2Fhowto_css_image_avatar.asp&tbnid=Jjq5a5o5G80fpM&vet=12ahUKEwj9uKXAi9ryAhVBxqQKHeSUCo0QMygAegUIARCyAQ..i&docid=IN--qpeX1hje-M&w=499&h=498&q=avatar%20image&hl=ro&ved=2ahUKEwj9uKXAi9ryAhVBxqQKHeSUCo0QMygAegUIARCyAQ",
},
},
{
timestamps: true,
}
);
module.exports = mongoose.model("Users", userSchema);当我按下“Programeaza-te”时，我想在 mongoDB 中添加我的对象，但我得到了那个错误。我想提一下，我使用了正确的 localhost 。请帮忙！
【问题讨论】：
标签： javascript node.js reactjs mongodb routes