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”是Adonis服务器，其路由为'/ add'

我不知道如何用Adonis来写那条路线上的状态

请问有人可以解释一下吗？

Answer 1

像这样获取值 const data = request.only(['data'])，您将获得数据。
其他获取数据的方法是这样的 const alldata = request.all() 此控制台此结果并查看您得到多少结果并从此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按钮，然后对其进行测试。

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

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

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

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

2 个答案: