项目的 MongoDB,为什么?"/>
我的数据没有进入 Mern 栈认证项目的 MongoDB,为什么?
我制作了后端和前端,尝试通过 axios 连接它们。当我启动后端时,在终端中写入连接到 MongoDB 并且一切正常,没问题。但是当我将我的用户数据放入注册表中时,页面重新加载但我不能'在我的 MongoDB 中找不到数据。这是我的代码:
// server.js
const express = require('express');
const mongoose = require('mongoose');
const bcrypt = require('bcrypt');
const cors = require('cors');
require('dotenv').config();
const app = express();
const port = 8000 || 5000;
// Middleware
app.use(cors());
app.use(express.json());
// Connect to MongoDB
mongoose
.connect('mongodb+srv://<hide here too>:<password I hide here>@cluster0.uoltuxm.mongodb/?retryWrites=true&w=majority', {
useNewUrlParser: true,
useUnifiedTopology: true,
})
.then(() => console.log('Connected to MongoDB'))
.catch((error) => console.error('Failed to connect to MongoDB:', error));
// User Model
const userSchema = new mongoose.Schema({
email: { type: String, required: true, unique: true },
password: { type: String, required: true },
});
const User = mongoose.model('User', userSchema);
// Registration Route
app.post('/register', async (req, res) => {
try {
const { email, password } = req.body;
// Check if the email already exists
const existingUser = await User.findOne({ email });
if (existingUser) {
return res.status(400).json({ message: 'Email already exists' });
}
// Hash the password
const hashedPassword = await bcrypt.hash(password, 10);
// Create a new user
const newUser = new User({ email, password: hashedPassword });
await newUser.save();
res.status(201).json({ message: 'User registered successfully' },alert('sfdfsfs'));
} catch (error) {
console.error('Failed to register user:', error);
res.status(500).json({ message: 'Failed to register user' });
}
});
// Login Route
app.post('/login', async (req, res) => {
try {
const { email, password } = req.body;
// Check if the user exists
const user = await User.findOne({ email });
if (!user) {
return res.status(401).json({ message: 'Invalid credentials' });
}
// Check if the password is correct
const isPasswordValid = await bcryptpare(password, user.password);
if (!isPasswordValid) {
return res.status(401).json({ message: 'Invalid credentials' });
}
res.status(200).json({ message: 'Login successful' });
} catch (error) {
console.error('Failed to login:', error);
res.status(500).json({ message: 'Failed to login' });
}
});
// Start the server
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
这是我在 React 中的注册表格:
import React,{useState,useEffect} from "react";
import {NavLink,useNavigate} from "react-router-dom"
import axios from "axios";
export default function Register(){
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleRegister = async (e) => {
e.preventDefault();
try {
await axios.post('/register', { email, password });
alert('Registration successful');
} catch (error) {
console.error('Failed to register:', error);
alert('Failed to register');
}
};
return (
<div className="Auth-form-container" style={{display: 'flex',justifyContent: 'center',alignItems:'center',width: '100%',height: '100vh',backgroundSize: '100% 100%',zIndex: '3',position: 'absolute'}} >
<form className="Auth-form" style={{width: '42vw',boxShadow:'rgb(0 0 0 / 16%) 1px 1px 10px',paddingTop: '4.2vw',paddingBottom:'4vw',borderRadius: '8px',backgroundColor: 'white'}} >
<div className="Auth-form-content" style={{paddingLeft: '12%',paddingRight: '12%'}}>
<h3 className="Auth-form-title" style={{textAlign: 'center',marginBottom: '1em',fontSize: '2vw',color: 'rgb(34, 34, 34)',fontWeight: '800'}}>Sign Up</h3>
<div className="text-center" style={{marginBottom:'1vw',fontSize:'1.3vw',}}>
Already registered?{" "}
<NavLink to={'/login'} className="link-primary" style={{cursor:'pointer',}}>
Sign In
</NavLink>
</div>
<form onSubmit={handleRegister}>
<div className="form-group mt-3" style={{display:'flex',alignItems:'center',marginBottom:'.7vw',}}>
<label style={{width:'6.6vw',fontSize: '1vw',fontWeight: '600',color: 'rgb(34, 34, 34)'}}>Full Name</label>
<input
type="text"
className="form-control mt-1"
placeholder="e.g Jane Doe"
style={{width:'80%',fontSize:'1vw',padding:'.7vw 1vw .7vw 1vw',}}
name='firstName'
/>
</div>
<div className="form-group mt-3"style={{display:'flex',alignItems:'center',marginBottom:'.7vw',}}>
<label style={{width:'6.6vw',fontSize: '1vw',fontWeight: '600',color: 'rgb(34, 34, 34)'}}>Email address</label>
<input
type="email"
className="form-control mt-1"
placeholder="Email Address"
style={{width:'80%',fontSize:'1vw',padding:'.7vw 1vw .7vw 1vw',}}
name='email'
value={email} onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="form-group mt-3" style={{display:'flex',alignItems:'center',marginBottom:'.7vw',}}>
<label style={{width:'6.6vw',fontSize: '1vw',fontWeight: '600',color: 'rgb(34, 34, 34)'}}>Password</label>
<input
type="password"
className="form-control mt-1"
placeholder="Password"
style={{width:'80%',fontSize:'1vw',padding:'.7vw 1vw .7vw 1vw',}}
name='password'
value={password} onChange={(e) => setPassword(e.target.value)}
/>
</div>
</form>
<div className="d-grid gap-2 mt-3" style={{display:'flex',justifyContent:'center',}}>
<button type="submit" className="btn btn-primary" style={{padding:'.7vw 1vw .7vw 1vw',background:'none',width:'30%',fontSize:'.9vw',border:'solid thin lightgrey',boxShadow:' rgb(0 0 0 / 16%) 1px 1px 10px',cursor:'pointer',}}>
Submit
</button>
</div>
</div>
</form>
</div>
)
}
我尝试了很多不同的代码,没有任何效果......
回答如下:更多推荐
我的数据没有进入 Mern 栈认证项目的 MongoDB,为什么?
发布评论