我的数据没有进入 Mern 栈认证项目的 MongoDB,为什么?

编程入门 行业动态 更新时间:2024-10-05 09:27:36

我的数据没有进入 Mern 栈认证<a href=https://www.elefans.com/category/jswz/34/1771421.html style=项目的 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,为什么?

本文发布于:2024-05-30 19:59:39,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1770865.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:项目   数据   Mern   MongoDB

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!