Как проверить правильность ввода пользователя? - PullRequest
Новая
       26

Как проверить правильность ввода пользователя?

1 голос
/ 22 апреля 2019

Как я могу проверить, допустимы ли введенные пользователем данные (адрес электронной почты и пароль) в базе данных?Мне нужно иметь возможность получить учетные данные пользователя с моего веб-сайта и проверить их с моей базой данных 'testlog'.Я новичок в веб-разработке, и я искал повсюду, но большинство форумов не используют response-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...")
    });

Ответы [ 2 ]

0 голосов
/ 22 апреля 2019

Если я правильно понимаю вашу проблему, решить ее будет довольно просто!

Сводка того, что вам нужно сделать, это отправить запрос на ваш сервер для проверки данных.

Самой простой версией этого будет почтовый запрос к вашему бэкэнду с именем пользователя и паролем, а затем запрос 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
}

Также я хотел бы рассмотреть возможность шифрования пароля на обоих концах, если вы обрабатываете реальные данные.

Надеюсь, это поможет!

0 голосов
/ 22 апреля 2019

Чтобы реализовать этот тип логики поведения, вам сначала нужно решить, где вы будете записывать состояние (в этом примере вам, вероятно, нужно поддерживать состояние успешного / неудачного входа в систему, а также вам нужно записывать состояние о входах (имя пользователя)и пароль)).Распространенными вариантами являются использование реагирующего контекста или реактивного редукса.

Есть некоторые компромиссы, по которым можно выбирать, и я очень рекомендую взглянуть на учебные пособия, потому что здесь очень много коротких ответов.Вы можете посмотреть, например, это сравнение

Ни один из этих двух вариантов не предусматривает реакцию-бутстрап, поэтому не беспокойтесь о поиске примеров, которые включают реакцию-бутстрап.React-bootstrap - это просто визуальный рендеринг ваших компонентов, и вы правильно использовали его для того, для чего он предназначен.Управление поведением это отдельный вопрос.

После того, как вы выбрали подход к управлению состоянием, вам нужно вызвать свой API из handleSubmit (используйте функцию 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"
    }

Я надеюсь, что это даст некоторые указатели, которые помогут вам использовать реагировать в полной мере.

...