我如何將數據從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",