Axios 从 React 前端向 Laravel 和 mysql 发布请求失败

Question

我最近开始学习 Laravel 和所有后端 Php 结构。我正在尝试从我用 React 制作的表单发出一个简单的发布请求，我希望它存储到我的 sql 数据库中。我已经创建了模型，将表迁移到 Db 中。只有一个字段，并且是插入到输入文本中的名称。 到目前为止，这是我的代码： 反应形式：

 import React, {Component} from "react";
import axios from "axios";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state= {
      name: ""
    }

    this.onSubmit= this.onSubmit.bind(this);
    this.onChange=this.onChange.bind(this);
  }

  onChange = e =>{
    this.setState({
      name: e.target.value
    })
  }
  onSubmit(e){
    e.preventDefault();
    const {name} = this.state;

    let data = {
      name: name
    };






        axios.post('/', data)
            .then(response => {
               console.log(data);

            })
            .catch(err => {
               console.log(err);

            })

};

  render() {
    return (
      <>
        <div>
          <form onSubmit={this.onSubmit}>
            <label>name</label>
         <input type="text"  onChange={this.onChange}></input>
         <button type="submit">submit</button> 
          </form>

    <h1>{this.state.name}</h1>

        </div>

      </>
    );
  }
}

路线：

<?php

use Illuminate\Support\Facades\Route;

// The frontend is an SPA, so point all URIs (except /api/*) to the AppController.
Route::get('{uri?}', 'AppController@app')->where(['uri' => '^(?!api).*$'])->name('app');






Route::post('/', 'StoreDataCOntroller@store');


?>

我的控制器：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Form;

class StoreDataCOntroller extends Controller
{
    public function store(){
        $data = new Form();

        $data->name = request('name');


        $data->save();
    }
}

模型（空）：

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Form extends Model
{
    //
}

和迁移：

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateFormsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('forms', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string("name");
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('forms');
    }
}

我的环境文件：

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:ZJmPVhi6byB/kzZt/IEyEBFYK3QUVc6b+65ITHDo/pM=
APP_DEBUG=true
APP_URL=http://localhost:8080

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=test
DB_USERNAME=test
DB_PASSWORD=ciaoss

现在，当我在反应输入中按提交时，我将遇到一般错误“内部服务器错误 500”。 我在哪里做错了？ 谢谢你的帮助:)

编辑： 错误日志信息

[previous exception] [object] (PDOException(code: 42S22): SQLSTATE[42S22]: Column not found: 1054 Unknown column 'updated_at' in 'field list' at C:\\xampp\\htdocs\\dev-test\\vendor\\laravel\\framework\\src\\Illuminate\\Database\\Connection.php:453)

Answer 1

问题在于，默认情况下，Laravel 期望通过迁移创建时间戳（created_at 和 updated_at）字段。这让你有两个选择

1. 告诉模型没有时间戳

   class Form extends Model
   {
       public $timestamps = false;
   }
   

2. 添加到您的迁移时间戳

class CreateFormsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('forms', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string("name");
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('forms');
    }
}

另外，在控制器中，函数应该返回一些响应。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Form;

class StoreDataCOntroller extends Controller
{
    public function store(){
        $data = new Form();

        $data->name = request('name');


        $data->save();
        return response()->created();
    }
}

Answer 2

正如您在 Laravel.log 中看到的，您遇到错误：找不到列：1054 Unknown column 'updated_at' in 'field list'

在你的表单模型中你需要设置

public $timestamps = false;