我如何将 ReactJS 提交表单中的数据传递给 AdonisJS答案

【问题标题】：How can i pass data from ReactJS submit form to AdonisJS我如何将 ReactJS 提交表单中的数据传递给 AdonisJS
【发布时间】：2019-12-15 04:18:33
【问题描述】：

我在 ReactJS 中有一个表单，每次单击提交按钮时，数据都应该传递给 adonis api。

ReactJs 文件

  async handleSubmit(e) {
        e.preventDefault();

      console.log(JSON.stringify(this.state));
      await axios({
          method: 'post',
          url: 'http://127.0.0.1:3333/add',
          data: JSON.stringify(this.state),
      })
          .then(function (response) {
                console.log('response',response);
            })
            .catch(function (error) {
                console.log('error',error);
            });

    }

“http://127.0.0.1:3333/add”是带有路由'/add'的Adonis服务器

我不知道如何在 Adonis 中编写以在该路线上发布状态

谁能解释一下，好吗？

【问题讨论】：

标签： javascript node.js reactjs npm adonis.js

【解决方案1】：

在控制器的函数中获取这样的值 const data = request.only(['data']) 然后你得到数据。
获取此类数据的其他方法 const alldata = request.all() 这个控制台这个结果并查看你得到了多少结果并从此alldata.data获取数据

【讨论】：

【解决方案2】：

首先，创建一个简单的控制器来处理从 ReactJS 应用程序中的 handleSubmit() 方法接收的数据。

使用以下命令创建一个简单的控制器：

adonis make:controller TestController --type http

创建后，打开TestController 文件并创建一个index 方法，并在index 方法中添加以下内容。

'use strict'

class TestController{
  // define your index method here 
 index ({ request }) {
    const body = request.post() // get all the post data;
    console.log(body) //console it to see the passed data
  }
}

module.exports = TestController

之后，在start/routes.js 文件中注册您的/add 路由。

Route.post('/add', 'TestController.index') // controller name and the method

最后，点击你的 ReactJS 应用程序中的提交按钮，然后测试它。

您很可能在发送请求时收到CORS issues 从您的 ReactJS 应用程序到 Adonis 服务器，如果是这样，您必须 proxy api 向 Adonis 服务器请求。

为此，请在 ReactJS 应用程序中打开您的 package.json 文件，然后添加下面的 proxy field。

"proxy": "http://127.0.0.1:3333",

【讨论】：