我如何将数据从ReactJS提交表单传递给AdonisJS

Question

我在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服务器

我不知道如何用阿多尼斯写那条路线上的状态

有人可以解释一下吗？

Answer 1

• 在控制器的函数中，例如const data = request.only(['data'])获取值中，则可以获取数据。
  

• 另一种获取数据的方法，例如const alldata = request.all()此控制台将显示此结果，并查看从此alldata.data获取和获取数据的结果alldata.data

Answer 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

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

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

最后，点击ReactJS应用程序中的Submit按钮，然后对其进行测试。

当您将请求从ReactJS应用发送到Adonis服务器时，很可能会遇到CORS issues 。如果是这样，则必须将api请求proxy到Adonis服务器。

为此，请在ReactJS App中打开package.json文件，并添加以下proxy field 。

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