Full Stack MERN - подключение базы данных пользователей к компоненту регистрации - PullRequest
0 голосов
/ 16 апреля 2020

Итак, я работаю над сайтом электронной коммерции для моего github portfilio, у меня возникают трудности с подключением сервера к клиенту, я создал сервер с nodejs, express и mongodb, но не могу подключить его к реагирующий компонент SignUp. Может кто-нибудь взглянуть на код, скажите мне, что мне не хватает? Вы можете найти полный проект по этой ссылке https://github.com/RMP1992/NERM-My-Ecommerce-App

Используя почтальон, я получаю ошибку 404 Не найдено, на консоли я получаю это «Не удалось загрузить ресурс: сервер ответил с статус 404 (не найден) '

пс. Я новичок в кодировании, я занимаюсь в течение 3 месяцев.

Реагировать компонент регистрации

import React from 'react';
import axios from 'axios';
import FormInput from '../signin-signup-forms/form-input.component';
import Button from '../buttons/buttons.component';

class SignUp extends React.Component {
    constructor() {
        super()
        this.state={
            first_name: '',
            last_name: '',
            email: '',
            password: '',
            errors: {}
        }
    }
    handleChange = event =>{
        this.setState({ [event.target.id]: event.target.value });

    }

    handleSubmit = () =>{
        axios.get('/resgister').then(response =>{
            this.setState({
                first_name: response.userData.first_name,
                last_name: response.userData.last_name,
                email: response.userData.email,
                password: response.userData.password
            })
        })
    }
    render(){
        return(
            <div>
                <FormInput 
                    name='first_name' 
                    type='text' 
                    value={this.state.first_name} 
                    onChange={this.handleChange} 
                    label='First Name' 
                    required 
                />
                <FormInput 
                    name='last_name' 
                    type='text' 
                    value={this.state.last_name} 
                    onChange={this.handleChange} 
                    label='Last Name' 
                    required 
                />
                <FormInput 
                    name='email' 
                    type='email' 
                    value={this.state.email} 
                    onChange={this.handleChange} 
                    label='Email' 
                    required 
                />
                <FormInput 
                    name='password' 
                    type='password' 
                    value={this.state.password} 
                    onChange={this.handleChange} 
                    label='Password' 
                    required 
                />
                <Button 
                    button='Sign Up' 
                    type='submit' 
                    handleSubmit={this.handleSubmit}
                />
            </div>
        )
    }
}
export default SignUp;

сервер / модели / пользователь. js

const userSchema = require('../models/users');

exports.addUser = (name, email, password) => {
    let user = new userSchema({
        name,
        email,
        password
    });

    user.save();

    console.log('user added to DB, hopefully');
}

exports.getUsers = async() => {
    let data = await userSchema.find({})
    return data;
}


server.models/user.js



const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const UserSchema = new Schema({
    first_name: {type: String, required: true},
    last_name: {type: String, required: true},
    email: {type: String, required: true},
    password: {type: String, required: true},
    date: {type: Date, default: Date.now}
})

module.exports = User = mongoose.model('users', UserSchema);

сервер / маршруты / пользователь. js

const express = require('express');
const users = express.Router();
const cors = require('cors');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcrypt');

const User = require('../models/users')
users.use(cors())

process.env.SECRET_KEY = 'secret'

users.post('/register',(req, res) =>{
    const today = new Date()
    const userData = {
        first_name: req.body.first_name,
        last_name: req.body.last_name,
        email: req.body.email,
        password: req.body.password,
        created: today
    }
    User.findOne({
        email: req.body.email
    })
    .then(user =>{
        if (!user) {
            bcrypt.hash(req.body.password, 10, (err, hash) =>{
                userData.password = hash
                User.create(userData)
                    .then(user =>{
                        res.json({ status:user.email + 'Resgistered'})
                    })
                    .catch(err =>{
                        res.send('error: ' + err)
                    })
            })
        }else{
            res.json({ error: 'User already exists'})
        }
    })
    .catch(err =>{
        res.send('error: ' + err)
    })
})
users.post('/login', (req, res) =>{
    User.findOne({
        email: req.body.email
    })
    .then(user =>{
        if(user){
            if (bcrypt.compareSync(req.body.password, user.password)) {
                //password match
                const payload = {
                    _id: user._id,
                    first_name: user.first_name,
                    last_name: user.last_name,
                    email: user.email
                }
                let token = jwt.sign(payload, process.env.SECRET_KEY, {
                    expiresIn: 1440
                })
                res.send(token)
            } else{
                //password doesn't match
                res.json({ error: 'User does not exist' })
            }
        }else {
            res.json({ error: 'User does not exist' })
        }
    })
    .catch(err =>{
        res.send('error: ' + err)
    })
})
users.get('/profile', (req, res) => {
    let decoded = jwt.verify(req.headers['authorisation'], process.env.SECRET_KEY)
    User.findOne({
        _id: decoded._id
    })
    .then(user =>{
        if (user) {
            res.json(user)
        }else {
            res.send('User doesn not exist')
        }
    })
    .catch(err => {
        res.send('error: ' + err)
    })
})
module.exports = users

сервер / индекс. js

const bodyParser = require('body-parser');
const cors = require('cors'); //allows the server to handle requests from the client
const express = require('express');
const mongoose = require('mongoose')
require('dotenv').config();
const port = process.env.PORT || 5000
const app = express();

app.use(bodyParser.json())
app.use(cors())
app.use(
    bodyParser.urlencoded({
        extended: false
    })
)
const mongoURI = `mongodb+srv://RMP1992:${process.env.PASSWORD}@cluster-frhfb.mongodb.net/test?retryWrites=true&w=majority`

mongoose
    .connect(
        mongoURI,
        {
            useNewUrlParser: true,
            useUnifiedTopology: true
        }
    )
    .then(() => console.log('MondoDB Connected'))
    .catch(err => console.log(err))
let Users = require('./routes/users')
app.use('/users', Users)


app.listen(port, function(){
    console.log('Server is running on port: ' + port)
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...