Как опубликовать данные из ReactJS в NodeJS Express API

Question

Мне нужно взять формальные данные, отправленные в ReactJS (JSX), и передать их в метод app.post в моей серверной части Express API.Я целую вечность искал, как это сделать, но до сих пор понятия не имею.

Код моего внешнего интерфейса:

import React, { Component } from 'react'
import '../public/styles/App.css'
import Header from "./header.js"

export default class Login extends Component {

    render() {
        return(   
            <div style={{border:"none"}}>
                <div style={{background:"white"}}>
                    <br></br>
                    <center><Header /></center>
                    <br></br>
                </div>
                <br></br>
                <br></br>
                <div style={{background:"white"}}>
                    <center><form>
                        <br></br>
                        Username: <br></br>
                        <input type = "text" name= "username"></input>
                        <br></br>
                        <br></br>
                        Password: <br></br>
                        <input type = "text" name = "password"></input>
                        <br></br>
                        <br></br>
                        <input type = "submit" value = "Log-in"></input>
                        <br></br>
                    </form></center>
                    <br></br>
                </div>
            </div>
        )
    }
}

Метод экспресс-почты:

app.post("/api/login", async(req, res) => {
    const id = await users.login(req.body.user, req.body.pass)
    console.log(id)

Не уверен, какие параметры необходимо использовать для экспресс-публикации, или какотправить его через компонент в ReactJS.Любая грубая идея о том, как отправить данные формы из ReactJS в NodeJS Express api, была бы отличной!

Answer 1

Ваша форма пуста, в ней нет атрибутов для отправки на маршрут.В результате код вашего внешнего интерфейса не соединяется с серверной частью.

Просто добавьте <form action="/api/login" method="POST">, оно должно работать.

Answer 2

Я уверен, что вышеупомянутые ответы работают, но вот подход, ориентированный на новичка, использующий axios и одновременно.

Выполните установку npm для axios и одновременно.

Вот каков ваш логинфайл может делать:

import React from 'react';
import '../public/styles/App.css'
import Header from "./header.js"
import Axios from 'axios'

class Login extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            username: '',
            password: ''
        };
    }

    handleInputChange = (e) => {

        this.setState({

            [e.target.name]: e.target.value

        });
    }

    handleSubmit = (e) => {

        e.preventDefault();

        const url = 'YOUR BACKEND URL HERE';

        const user = {

            username: this.state.username, 
            password: this.state.password
        }

        Axios.post(url, user).then((res) => {

            //handle your login 

        }).catch((e) => {

            //handle your errors
        });

    }

    render() {

        return (

            <div style={{border:"none"}}>
                <div style={{background:"white"}}>
                    <br></br>
                    <center><Header /></center>
                    <br></br>
                </div>
                <br></br>
                <br></br>
                <div style={{background:"white"}}>
                    <center>
                    <form onSubmit={this.handleSubmit}>
                        <br></br>
                        Username: <br></br>
                        <input type = "text" onChange={this.handleInputChange} name= "username"></input>
                        <br></br>
                        <br></br>
                        Password: <br></br>
                        <input type = "password" name = "password" onChange={this.handleInputChange}></input>
                        <br></br>
                        <br></br>
                        <input type = "submit" value = "Log-in"></input>
                        <br></br>
                    </form>
                  </center>
                    <br></br>
                </div>
            </div>

        );
    } 
}

export default Login;

Одновременно позволяет одновременно запускать внутренний сервер узла и приложение реагирования. В папке проекта вашего узла (бэкенда) откройте package.jsonи настройте его следующим образом:

Это только грубый пример:

{
  "name": "dev-proj",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "client-install": "npm install --prefix client",
    "start": "node app.js",
    "server": "nodemon app.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "express": "^4.16.3",  
  }
}

Прочтите одновременно документацию для более подробных примеров.

Я использую Nodemon для запуска моего сервера (app.js).Кроме того, реактивный проект в моем случае находится внутри папки клиента, поэтому приведенная выше конфигурация.

В папке вашего реактивного проекта откройте package.json и добавьте следующую строку:

"proxy": "http://localhost:5000"

Учитываяваш внутренний сервер работает на порту 5000.

Answer 3

Чтобы использовать fetch для POST-данных (в формате JSON):

fetch("<--url-->", {
    method: 'POST',
    body: JSON.stringify({"user": this.state.username,
                            "pass": this.state.password}),
    headers: {
        'Content-Type': 'applications/json'
    }
})
.then(res => res.json())
.then(
    (result) => {
        //callback for the response
    }
);

При реакции вам нужно использовать состояния для хранения значений этих текстовых полей.Состояния изменяются с помощью события, которое запускается при изменении значений текстового поля:

<form>
   <br></br>
   Username: <br></br>
   <input type = "text" name= "username" onChange={this.handleUserNameChange}></input>
   <br></br>
   <br></br>
   Password: <br></br>
   <input type = "text" name = "password" onChange={this.handlePasswordChange}></input>
   <br></br>
   <br></br>
   <input type = "submit" value = "Log-in"></input>
   <br></br>
</form>

Обработчики могут быть определены как:

handleUserNameChange = event => {
    this.setState({username: event.target.value});
}

handlePasswordChange = event => {
    this.setState({username: event.target.value});
}

Также не забудьте определить эти состояния:

constructor(props) {
    super(props);
    this.state = {
        username: "",
        password: ""
    }
}