最新消息: 电脑我帮您提供丰富的电脑知识,编程学习,软件下载,win7系统下载。

MERN登录脚本

IT培训 admin 7浏览 0评论

MERN登录脚本

我一直关注YouTube上的MERN教程,位于此处:

我已经完成了整个教程,但是无法登录。使用Postman时,我会找回似乎是令牌的东西。但是,当尝试在实际站点上使用相同的凭据时,出现了404错误。

我不确定应该在此处添加哪段代码。这是Login.js文件,可在客户端文件夹的src文件夹的components文件夹中找到:

import React, {Component} from 'react'
import {login} from './UserFunctions'

class Login extends Component {
constructor() {
    super()
    this.state = {
        email: '',
        password: '',
    }

    this.onChange = this.onChange.bind(this)
    this.onSubmit = this.onSubmit.bind(this)
}

onChange(e) {
    this.setState({[e.target.name]: e.target.value})
}

onSubmit(e) {
    e.preventDefault()

    const user = {
        email: this.state.email,
        password: this.state.password
    }

    login(user).then(res => {
        if(res) {
            this.props.history.push(`/profile`)
        }
    })
}

render() {
    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6 mt-5 mx-auto">
                    <form noValidate onSubmit={this.onSubmit}>
                        <h1 className="h3 mb-3 font-weight-normal">Please sign in</h1>
                        <div className="form-group">
                            <label htmlFor="email">Email Address</label>
                            <input type="email"
                            className="form-control"
                            name="email"
                            placeholder="Enter Email"
                            value={this.state.email}
                            onChange={this.onChange}
                            />
                        </div>
                        <div className="form-group">
                            <label htmlFor="password">Password</label>
                            <input type="password"
                            className="form-control"
                            name="password"
                            placeholder="Enter Password"
                            value={this.state.password}
                            onChange={this.onChange}
                            />
                        </div>
                        <button type="submit" className="btn btn-lg btn-primary btn-block">Sign in</button>
                    </form>
                </div>
            </div>
        </div>
    ) 
  }
}

export default Login

这是在models文件夹中找到的Users.js文件:

const Sequelize = require("sequelize")
const db = require("../database/db")

module.exports = db.sequelize.define(
'user',
{
    id: {
        type: Sequelize.INTEGER,
        primaryKey: true,
        autoIncrement: true
    },
    first_name: {
        type: Sequelize.STRING
    },
    last_name: {
        type: Sequelize.STRING 
    },
    email: {
        type: Sequelize.STRING
    },
    password: {
        type: Sequelize.STRING
    },
    created: {
        type: Sequelize.DATE, 
        defaultValue: Sequelize.NOW
    }
},
{
    timestamps: false
}
)

这是我的server.js文件:

var express = require("express")
var cors = require("cors")
var bodyParser = require("body-parser")
var app = express()
var port = process.env.PORT || 5000

app.use(bodyParser.json())
app.use(cors())
app.use(bodyParser.urlencoded({extended: false}))

var Users = require('./routes/Users')

app.use('/users', Users)

app.listen(port, () => {
console.log("Server is running on port: " + port) 
})

这里是指向git存储库的链接,因为就像我说的那样,我不确定哪段代码有故障。

我在终端上没有任何错误。我得到的唯一错误是在控制台中,显示为:

POST http://localhost:3000/user/login 404 (Not Found)
Error: Request failed with status code 404
 at createError (createError.js:17)
 at settle (settle.js:19)
 at XMLHttpRequest.handleLoad (xhr.js:60)
回答如下:

您的路线是/users,而不是/user

尝试https://localhost:3000/users/login

MERN登录脚本

我一直关注YouTube上的MERN教程,位于此处:

我已经完成了整个教程,但是无法登录。使用Postman时,我会找回似乎是令牌的东西。但是,当尝试在实际站点上使用相同的凭据时,出现了404错误。

我不确定应该在此处添加哪段代码。这是Login.js文件,可在客户端文件夹的src文件夹的components文件夹中找到:

import React, {Component} from 'react'
import {login} from './UserFunctions'

class Login extends Component {
constructor() {
    super()
    this.state = {
        email: '',
        password: '',
    }

    this.onChange = this.onChange.bind(this)
    this.onSubmit = this.onSubmit.bind(this)
}

onChange(e) {
    this.setState({[e.target.name]: e.target.value})
}

onSubmit(e) {
    e.preventDefault()

    const user = {
        email: this.state.email,
        password: this.state.password
    }

    login(user).then(res => {
        if(res) {
            this.props.history.push(`/profile`)
        }
    })
}

render() {
    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6 mt-5 mx-auto">
                    <form noValidate onSubmit={this.onSubmit}>
                        <h1 className="h3 mb-3 font-weight-normal">Please sign in</h1>
                        <div className="form-group">
                            <label htmlFor="email">Email Address</label>
                            <input type="email"
                            className="form-control"
                            name="email"
                            placeholder="Enter Email"
                            value={this.state.email}
                            onChange={this.onChange}
                            />
                        </div>
                        <div className="form-group">
                            <label htmlFor="password">Password</label>
                            <input type="password"
                            className="form-control"
                            name="password"
                            placeholder="Enter Password"
                            value={this.state.password}
                            onChange={this.onChange}
                            />
                        </div>
                        <button type="submit" className="btn btn-lg btn-primary btn-block">Sign in</button>
                    </form>
                </div>
            </div>
        </div>
    ) 
  }
}

export default Login

这是在models文件夹中找到的Users.js文件:

const Sequelize = require("sequelize")
const db = require("../database/db")

module.exports = db.sequelize.define(
'user',
{
    id: {
        type: Sequelize.INTEGER,
        primaryKey: true,
        autoIncrement: true
    },
    first_name: {
        type: Sequelize.STRING
    },
    last_name: {
        type: Sequelize.STRING 
    },
    email: {
        type: Sequelize.STRING
    },
    password: {
        type: Sequelize.STRING
    },
    created: {
        type: Sequelize.DATE, 
        defaultValue: Sequelize.NOW
    }
},
{
    timestamps: false
}
)

这是我的server.js文件:

var express = require("express")
var cors = require("cors")
var bodyParser = require("body-parser")
var app = express()
var port = process.env.PORT || 5000

app.use(bodyParser.json())
app.use(cors())
app.use(bodyParser.urlencoded({extended: false}))

var Users = require('./routes/Users')

app.use('/users', Users)

app.listen(port, () => {
console.log("Server is running on port: " + port) 
})

这里是指向git存储库的链接,因为就像我说的那样,我不确定哪段代码有故障。

我在终端上没有任何错误。我得到的唯一错误是在控制台中,显示为:

POST http://localhost:3000/user/login 404 (Not Found)
Error: Request failed with status code 404
 at createError (createError.js:17)
 at settle (settle.js:19)
 at XMLHttpRequest.handleLoad (xhr.js:60)
回答如下:

您的路线是/users,而不是/user

尝试https://localhost:3000/users/login

与本文相关的文章

发布评论

评论列表 (0)

  1. 暂无评论