Question

我如何能够检查用户输入的内容（电子邮件地址和密码）在数据库中是否有效？我需要能够从我的网站获取用户的凭据，并使用“ testlog”数据库对其进行验证。我是Web开发的新手，到处都是，但是大多数论坛都不使用react-bootstrap，这使我很难找到答案。有人可以帮我解决这个问题吗？

//////////////////////////////Navigation Bar////////////////////////////////


    import React, { Component } from 'react';
    import { Navbar, Nav, Form, Col, Row, Button } from 'react-bootstrap';
    import styled from 'styled-components';

    const Styles = styled.div`
            .navbar {
                background-color: #222;
                }
            .navbar-brand, .navbar-nav .nav-link, .form-label {
                color: #C0C0C0;
            &:hover {
                color: white;
            }
        }
            .form-inline > * {
                margin:5px 3px;
        }
        `

    class NavigationBar extends Component {
        constructor() {
            super()

            this.state = {
                email: "",
                password: ""
            }
            this.handleSubmit = this.handleSubmit.bind(this);
        }

        handleSubmit(event) {
            event.preventDefault();
            console.log(this.state);
            event.target.className += " was-validated"
        }
        handleEmailChange(event)   {
            this.setState({
                email: event.target.value
            })
        }

        handlePassChange(event)   {
            this.setState({
                password: event.target.value
            })
        }

        render() {
            return (
                <Styles>
                    <Navbar expand="lg">
                        <Navbar.Brand href="/">ABC Group</Navbar.Brand>
                        <Navbar.Toggle aria-controls="basic-navbar-nav" />
                        <Navbar.Collapse id="basic-navbar-nav">
                            <Nav className="ml-auto">
                                <Form inline onSubmit={this.handleSubmit}>
                                    <Form.Group as={Row} controlId="formHorizontalEmail">
                                        <Form.Label column sm={1000} name="email" >Email:&nbsp;</Form.Label>
                                        <Col sm={15}>
                                            <Form.Control onChange={this.handleEmailChange.bind(this)} value={this.state.email} size="sm" type="email" placeholder="Enter your email" />
                                        </Col>
                                    </Form.Group>
                                    <Form.Group as={Row} controlId="formHorizontalPassword">
                                        <Form.Label column sm={1000}>Password:&nbsp;</Form.Label>
                                        <Col sm={15}>
                                            <Form.Control onChange={this.handlePassChange.bind(this)} value={this.state.password} size="sm" type="text" placeholder="Enter your password" />
                                        </Col>
                                    </Form.Group>
                                    <Button variant="primary" type="submit">Submit</Button>
                                </Form>
                            </Nav>
                        </Navbar.Collapse>
                    </Navbar>
                </Styles>
            )
        }
    }

    export default NavigationBar;


    ///////////////////////////////////Database//////////////////////////////////


    const express = require('express');
    const mysql = require('mysql');
    const app = express();

    // Create a connection
    var connection = mysql.createConnection({
        //Server properties
        host: 'localhost',
        user: 'root',
        password: '',
        database: 'testlog'
      });


      connection.connect(function(error) {
        if(!!error) {
            console.log(error);
        } else {
            console.log('Connected');
        }
    });

    app.get('/', function(req, resp)  {
        //about mysql
        connection.query("SELECT * FROM  sakila.actor", function(error, rows, fields) {
            if(!!error) {
                console.log(error);
            } else {
                console.log('Successful query');
            }
        });
    })

    app.listen('3003', () => {
        console.log("Server is up and listening on 3003...")
    });

Answer 1

要实现这种行为逻辑，您首先需要确定记录状态的位置（在此示例中，您可能需要保持登录成功/失败的状态，并且还需要记录有关输入的状态（用户名和密码））。常用选项是使用react上下文或react-redux。

有一些折衷的选择，我真的建议您阅读教程，因为在这里简短的回答将涉及很多内容。例如，您可以查看this comparison

这两个都不涉及react-bootstrap，因此不必担心找到包含react-bootstrap的示例。 React-bootstrap仅仅是关于组件的可视化呈现，并且您已经正确地将其用于预期的用途。管理行为是另一回事。

选择了一种状态管理方法后，您需要从handleSubmit调用API（使用fetch JS函数）并更新状态：

    handleSubmit(event) {
        // get username and password from state (redux, react context or component state)
        // ... code depends on which one you choose

        // call the backend API, sending your user inputs
        // and using a promise to get the async result
        fetch('/', { method: 'POST', body: { username: username, passowrd: password } } )
            .then((resp) => resp.json())
            .then((json) => /* update state with the result */);

        // your original code
        event.preventDefault();
        console.log(this.state);
        event.target.className += " was-validated"
    }

我希望这会为您提供一些指导，以帮助您充分发挥作用。

Answer 2

如果我正确地理解了您的问题，那么应该很容易解决！

您需要做的摘要是向后端发送请求以验证数据。

最基本的版本是使用用户名和密码向后端发布请求，然后执行sql查询以检查给定的密码是否与请求中的用户名相匹配。

类似：

app.post('/checkPass', function(req, res) {
    let username = req.body.username;
    let password = req.body.password;
    let isValid = false;
    connection.query("Select * from users_table Where username='" + username + "' and password='" + password + "'", function(error, rows, fields) {
        if(rows.length > 0) {
          //the user is valid
          isValid = true;
        } else {
          //the user isn't valid
          isValid = false;
        }
    });
    res.send(isValid);
});

，该请求将取决于您使用的内容，但是您需要以某种方式从前端发送一个http请求。（如果您还没有客户，那么axios就是一个很好的客户。）

上面示例中请求的实际主体必须具有形状

{
    username: //username here,
    password: //password here
}

如果您要处理真实数据，我还会考虑在两端加密密码。

希望这会有所帮助！

如何检查用户输入是否有效？

2 个答案: