Как отправить данные с сервера React на сервер Node, используя форму входа?

Я новичок в React JS, Node JS и Express. Я сделал простую форму входа с формой ввода имени пользователя и пароля. В SignIn.js я отправляю значение имени пользователя и пароля в index.js (узел), но не могу получить значение в index.js.

Вот код:

SignIn.js

import Axios from 'axios';
import {
  DribbbleOutlined,
  TwitterOutlined,
  InstagramOutlined,
  GithubOutlined,
} from "@ant-design/icons";
function onChange(checked) {
  console.log(`switch to ${checked}`);
}
const { Title } = Typography;
const { Header, Footer, Content } = Layout;


export default class SignIn extends Component {
  constructor(props) {
    super(props)
    this.onChangeUsername = this.onChangeUsername.bind(this);
    this.onChangePassword = this.onChangePassword.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.state = {
        name: '',
        email: ''
    }
}
onChangeUsername(e) {
    this.setState({ username: e.target.value })
}
onChangePassword(e) {
    this.setState({ password: e.target.value })
}
onSubmit(e) {
    e.preventDefault()

    
}

  render() {
    const onFinish = (values) => {
      
    const username = this.state.username;
    const password = this.state.password;

      Axios.post("http://localhost:3001/signin", {
        username : username,
        password : password,
      }).then((Response)=> {
        console.log(Response);
      });
    

      console.log("Success:", values);
    };

    const onFinishFailed = (errorInfo) => {
      console.log("Failed:", errorInfo);
    };
    return (
      <>
        <Layout className="layout-default layout-signin">
          <Header>
            <div className="header-col header-brand">
              <h5></h5>
            </div>
            <div className="header-col header-nav">
            <h5>TITLE HERE</h5>
            </div>
            <div className="header-col header-btn">
            </div>
          </Header>
          <Content className="signin">
            <Row gutter={[24, 0]} justify="space-around">
              <Col
                xs={{ span: 24, offset: 0 }}
                lg={{ span: 6, offset: 2 }}
                md={{ span: 12 }}
              >
                <Title className="mb-15">Sign In</Title>
                <Title className="font-regular text-muted" level={5}>
                  Enter your Username and password to sign in
                </Title>
                <Form
                  onFinish={onFinish}
                  onFinishFailed={onFinishFailed}
                  layout="vertical"
                  className="row-col"
                >
                  <Form.Item
                    className="username"
                    label="Username"
                    name="username"
                    id="username"
                    rules={[
                      {
                        required: true,
                        message: "Please input your Username!",
                      },
                    ]}
                    onChange={this.onChangeUsername}
                  >
                    <Input placeholder="Username" />
                  </Form.Item>

                  <Form.Item
                    className="username"
                    label="Password"
                    name="password"
                    id="password"
                    rules={[
                      {
                        required: true,
                        message: "Please input your password!",
                      },
                    ]}
                    onChange={this.onChangePassword}
                  >
                    <Input placeholder="Password" />
                  </Form.Item>

                  {/*<Form.Item
                    name="remember"
                    className="aligin-center"
                    valuePropName="checked"
                  >
                    <Switch defaultChecked onChange={onChange} />
                    Remember me
                  </Form.Item>*/}

                  <Form.Item>
                    <Button
                      type="primary"
                      htmlType="submit"
                      style={{ width: "100%" }}
                      
                    >
                      SIGN IN
                    </Button>
                  </Form.Item>
                  {/*<p className="font-semibold text-muted">
                    Don't have an account?{" "}
                    <Link to="/sign-up" className="text-dark font-bold">
                      Sign Up
                    </Link>
                  </p>*/}
                </Form>

Вот код для index.js (узел)

const { Result, message } = require('antd');
const express = require('express');
const app = express();
var cors = require('cors');

const mysql = require("mysql");

const db = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'wynadvm'
});

app.use(cors());

app.get('/', function (req, res) {
    res.send('hello');
  });

app.post('/signin', (req,res) => {
 
    const username = req.query.username;
    const password = req.query.password;
    db.query(
        "SELECT * from users where username = ? and password = ?",
        [username , password],
        (err,result) => {
            if(err) {
                res.send({err:err});
            }

            if(result.length > 0) {
                res.send('result.response');
                console.log(req.query.username);
               //return res.redirect('/UserHomePage');
               
            }
            else
            {
                res.send('{message : "Wrong Username/Password Combination"}');
                console.log(req.query.username);
                //return res.redirect('/dashboard');
                
            }
        }
    )
});

app.listen(3001,() => {
    console.log("running on port 3001");
});

мое имя пользователя и пароль const всегда показывают undefined в журнале консоли.

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
0
0
36
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете использовать axios для выполнения http-запросов к серверной части.

Вы можете узнать больше об аксиомах здесь: https://www.npmjs.com/package/axios

Ниже приведен пример того, как вы можете отправить запрос на вход с помощью axios.

axios.post('/signin', {
  username: 'Fred',
  password: 'Flintstone'
})
 .then(function (response) {
    console.log(response);
})
 .catch(function (error) {
    console.log(error);
});

Вы отправляете данные в теле, но используете запрос для получения имени пользователя и пароля, поэтому вы получаете неопределенность, попробуйте использовать

const username = req.body.username;
const password = req.body.password;
Ответ принят как подходящий

В передней части: Измените import Axios from "axios" на import axios from "axios" и перепишите так:

axios.post("http://localhost:3001/signin", {
        username : username,
        password : password,
      }).then((response)=> {
        console.log(response);
      }).catch(error => console.log(error))

В Back End, если вы хотите получить значение из запроса тела из Front end проще, установить парсер тела. Пример:

В терминале:

$ npm install body-parser

Добавьте строку в код Back End:

var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

И измените переменную, которую вы назначаете из запроса в тело, например:

От:

 const username = req.query.username; //<--- you can't get value from query while you post data request in body
 const password = req.query.password;

К:

const username = req.body.username;
const password = req.body.password;

Привет VMT, спасибо за вашу помощь. После того, как я следую вашим указаниям, я получаю сообщение об ошибке в задней части. «TypeError: Не удается прочитать свойства неопределенного (чтение« имени пользователя »)» . Это потому, что я меняю const username = req.query.username; в const имя_пользователя = req.body.username; И приложение дает ответ 500 Internal Server Error.

Daily Food ASMR 17.05.2022 06:53

@DailyFoodASMR я забыл, вы добавляете: app.use(bodyParser.json()) в свой внутренний файл index.js.

VMT 17.05.2022 06:58

О, круто. Спасибо. Оно работает. i Добавить var bodyParser = require('body-parser') ; app.use(bodyParser.urlencoded({extended: true})) app.use(bodyParser.json()) . Большое спасибо ВМТ.

Daily Food ASMR 17.05.2022 06:59

Другие вопросы по теме