发出 post 请求并将信息发送到 reactjs 文件

Question

我正在用 reactJS 建立一个网站，用 NodeJS 建立一个服务器。我有一个表格，我想用它来将数据发布到节点服务器。

这是我的 react js 表单：

import React, { Component } from 'react';
import './app.css';
import Header from './header/Header.js';
import Footer from './footer/Footer.js';



export default class App extends Component {
    render() {
        return (
            <div>
                <h1>https://github.com/crsandeep/simple-react-full-stack</h1>
                <Header />
                <form action="localhost:8080/login" method="post" name="login">
                    <fieldset>
                        <legend>Choix du serveur</legend>
                        <label>IP baie : </label>
                        <input name="IP" id="IP" type="text" required />
                        <br />
                        <br />
                        <label>user baie : </label>
                        <input type="text" placeholder="3paradm" name="user" id="userbaie" onChange={this.handleUserNameChange} required />
                        <label>Password baie : </label>
                        <input type="password" name="password" id="PWbaie" required />
                        <br />
                        <input type="submit" defaultValue="Submit" />
                    </fieldset>
                </form>
                <Footer />
            </div>
        );
    }
}

server.js

const express = require('express');
const bodyParser = require('body-parser');
const os = require('os');
const path = require("path");

const app = express();

app.use(express.static('dist'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post("/login", (request, response) => {
    var IP = request.body.IP;
    var user = request.body.user;
    var password = request.body.password;
    const testscript = exec('python getCPG.py ' + IP + ' ' + user + ' ' + password);
    testscript.stdout.on('data', function (data) {
        console.log(data);
    });
});

app.listen(process.env.PORT || 8080, () => console.log(`Listening on port ${process.env.PORT || 8080}!`));

我使用与 HTML5 相同的技术。但它不起作用。

我希望我的网站完成发布请求并将信息发送到服务器。提交按钮完成后，它必须重定向到另一个页面，其中包含将从节点服务器发送的信息。

感谢您的帮助

Answer 1

您需要将提交 url 添加为 nodejs 服务器 url。 您已经以

的形式添加了 react app url

<form action="/replaceThisWithyourServerUrl" method="post" name="login">

1. 运行 react 应用可以说它在 3000 端口上运行

2. 然后运行 ​​node js 应用，假设它在端口 3001 上运行

那么操作 url 将是 action='http://locahost:3001/login'

而且你必须在方法中做出适当的回应

app.post("/login", (request, response) => {
    var IP = request.body.IP;
    var user = request.body.user;
    var password = request.body.password;
    // please implement your logic after this line
    // Im simply showing you how to send the response back to the user
    return response.status(200).json({success: true, message: 'logged in'})

});