Laravel8 | Vuex：POST错误500（内部服务器错误）

Posted 2023-02-22

【中文标题】Laravel8 | Vuex：POST错误500（内部服务器错误）

【英文标题】：Laravel8 | Vuex: POST error 500 (Internal Server Error)

【发布时间】：2021-12-12 13:44:06

【问题描述】：

在过去的 2 个月里，我一直在学习 Vue 和 Laravel，最近我开始从事一个项目，以应用我迄今为止学到的所有知识。我成功设置了几个 GET 和 POST 路由，但由于某种原因，此请求一直失败。 我正在尝试使用 Vuex、Laravel 和 Axios 设置一个简单的 POST 请求，但我不断收到 500（内部服务器错误），我不确定是什么原因造成的。我感觉可能是模型设置不正确，如果我输出控制器接收到的数据，它看起来是正确的，但是当我实例化模型并将数据保存到数据库时，我得到了错误。

我非常感谢任何有关我的代码的帮助或反馈，因为我正处于学习曲线的早期阶段，我确信有些事情可以优化。

路线：

//StreamingProviders
Route::get('/api/all-streaming-providers', [StreamingProviderController::class, 'getAllStreamingProviders']);
Route::post('/api/add-streaming-providers', [StreamingProviderController::class, 'addStreamingProviders']);

控制器：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Repository\Dictionaries\StreamingProvidersList;
use App\Models\StreamingProvider;

class StreamingProviderController extends Controller

    public function __construct()
    
        $this->middleware('auth');
    

    public function getAllStreamingProviders()
    
        $streamingProviders = StreamingProvidersList::$map;
        
        return response()->json([
            'allProviders' => $streamingProviders
        ]);
    

    public function addStreamingProviders(Request $request, StreamingProvider $userStreamingProviders)
    
        $user = auth()->user();
        $data = $request->all();
    
        $userStreamingProviders = new StreamingProvider();
        $userStreamingProviders->user_id = $user['id'];
        $userStreamingProviders->Netflix = $request->input('Netflix');
        $userStreamingProviders->Amazon_Prime_Video = $request->input('Amazon Prime Video');
        $userStreamingProviders->Sky_Ticket = $request->input('Sky Ticket');
        $userStreamingProviders->Disney_Plus = $request->input('Disney Plus');
        $userStreamingProviders->HBO_Video = $request->input('HBO Video');
        $userStreamingProviders->save();

        return response()->json([
            'streamingProviders' => $userStreamingProviders            
        ]);
    

FormComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="card">
                <div class="card-header">
                    <h2>Select your streaming country</h2>
                </div>
                <form @submit.prevent="updateUserDetails()">
                    <div class="card-body">                   
                        <div class="form-control">
                            <select class="selectpicker" id="countryList">
                                <option v-for="(value, name) in getCountriesList" :key="name" :value="name">
                                     value 
                                </option>
                            </select>
                        </div>   
                        <div v-for="(value, name) in getAllStreamingProviders" :key="name" class="form-check">
                            <input v-model="streamingProviders[value]"
                                type="checkbox"
                                :id="name"
                                :value="value"
                                :name="streamingProviders[value]"
                                class="form-check-input" />
                            <label> value </label>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-success center-text">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
import  mapGetters  from 'vuex';
import router from '../../routes/index';

export default 
    name: 'edituserdetails',
    data() 
        return 
            value: '',
            streamingProviders: 
                'Netflix': false,
                'Amazon Prime Video': false,
                'Disney Plus': false,
                'HBO Video': false,
                'Sky Ticket': false
            
        
    ,
    created() 
        this.$store.dispatch('getCountriesList'),
        this.$store.dispatch('getAllStreamingProviders')
    ,
    methods: 
        updateUserDetails() 
            const country = 
                'id': $('#countryList').children("option:selected").val(),
                'name': $('#countryList').children("option:selected").text()
            ;
            this.$store.dispatch('updateUserStreamingProviders', this.streamingProviders);

            this.$store.dispatch('updateCountry', country).then(() => 
                router.push('/user-settings');
            );
        
    ,
    computed: 
        ...mapGetters(['getCountriesList', 'getAllStreamingProviders']),
    

</script>

Vuex 商店：

import axios from "axios";

const state = 
    userName: "",
    country: "",
    countriesList: ,
    allStreamingProviders: ,
    userStreamingProviders: []
;

const mutations = 
    UPDATE_USERNAME(state, payload) 
        state.userName = payload;
    ,
    GET_COUNTRIES_LIST(state, payload) 
        state.countriesList = payload;
    ,
    UPDATE_COUNTRY(state, payload) 
        state.country = payload;
    ,
    GET_ALL_STREAMING_PROVIDERS(state, payload) 
        state.allStreamingProviders = payload;
    ,
    UPDATE_STREAMING_PROVIDERS(state, payload) 
        state.userStreamingProviders = payload;
    
;

const actions = 
    updateUserData( commit ) 
        axios.get("/api/user").then(response => 
            commit("UPDATE_USERNAME", response.data.name);
            commit("UPDATE_COUNTRY", response.data.country);
        );
    ,
    getCountriesList( commit ) 
        axios.get("/api/countries-list").then(response => 
            commit("GET_COUNTRIES_LIST", response.data.list);
        );
    ,
    updateCountry( commit , country) 
        axios
            .post("/api/update-country", country)
            .then(response => 
                commit("UPDATE_COUNTRY", response.data.country);
            )
            .catch(err => 
                console.log(err);
            );
    ,
    getAllStreamingProviders( commit ) 
        axios.get("/api/all-streaming-providers").then(response => 
            commit("GET_ALL_STREAMING_PROVIDERS", response.data.allProviders);
        );
    ,
    updateUserStreamingProviders( commit , streamingProviders) 
        axios
            .post("/api/add-streaming-providers", streamingProviders)
            .then(response => 
                commit(
                    "UPDATE_STREAMING_PROVIDERS",
                    response.data.streamingProviders
                );
            )
            .catch(err => 
                console.log(err);
            );
    
;

const getters = 
    getUserName: state => state.userName,
    getCountry: state => state.country,
    getCountriesList: state => state.countriesList,
    getAllStreamingProviders: state => state.allStreamingProviders
;

const userStore = 
    state,
    mutations,
    actions,
    getters
;

export default userStore;

流提供者模型：

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class StreamingProvider extends Model

    use HasFactory;

     /**
     * Attributes that are mass assignable
     * 
     * @var array
     */
    protected $fillable = ['user_id', 'Netflix', 'Amazon_Prime_Video', 'Sky_Ticket', 'Disney_Plus', 'HBO_Video'];

    protected $table = 'streaming_provider';

    protected $cast = [
        'Netflix' => 'boolean',
        'Amazon_Prime_Video' => 'boolean',
        'Sky_Ticket' => 'boolean',
        'Disney_Plus' => 'boolean',
        'HBO_Video' => 'boolean'
    ];

    public function user()
    
        return $this->belongsTo(User::class);
    

在将数据保存到数据库之前，我是否必须转换数据？ 布尔属性被认为是 $fillable 吗？？

迁移：

<?php

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

class StreamingProvidersTable extends Migration

    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    
        Schema::create('streaming_provider', function (Blueprint $table) 
            $table->id();
            $table->string('user_id');
            $table->boolean('Netflix')->default(0);
            $table->boolean('Amazon_Prime_Video')->default(0);
            $table->boolean('Sky_Ticket')->default(0);
            $table->boolean('Disney_Plus')->default(0);
            $table->boolean('HBO_Video')->default(0);
        );
    

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

Laravel.log：

[2021-10-27 09:12:39] local.ERROR: SQLSTATE[42S22]: Column not found: 1054 Unknown column 'updated_at' in 'field list' (SQL: insert into `streaming_provider` (`user_id`, `Netflix`, `Amazon_Prime_Video`, `Sky_Ticket`, `Disney_Plus`, `HBO_Video`, `updated_at`, `created_at`) values (1, 1, 1, 0, 0, 0, 2021-10-27 09:12:39, 2021-10-27 09:12:39)) "userId":1,"exception":"[object] (Illuminate\\Database\\QueryException(code: 42S22): SQLSTATE[42S22]: Column not found: 1054 Unknown column 'updated_at' in 'field list' (SQL: insert into `streaming_provider` (`user_id`, `Netflix`, `Amazon_Prime_Video`, `Sky_Ticket`, `Disney_Plus`, `HBO_Video`, `updated_at`, `created_at`) values (1, 1, 1, 0, 0, 0, 2021-10-27 09:12:39, 2021-10-27 09:12:39)) at C:\\xampp\\htdocs\\laravel_vue\\Fullstack_Project_Movie_III\\vendor\\laravel\\framework\\src\\Illuminate\\Database\\Connection.php:703)
[previous exception] [object] (PDOException(code: 42S22): SQLSTATE[42S22]: Column not found: 1054 Unknown column 'updated_at' in 'field list' at C:\\xampp\\htdocs\\laravel_vue\\Fullstack_Project_Movie_III\\vendor\\laravel\\framework\\src\\Illuminate\\Database\\Connection.php:486)

谢谢大家！！

【问题讨论】：

也许检查一下日志？

在storage/logs/laravel.log中发布您收到的错误消息

（编辑）添加日志：看到日志后，我猜错误是我缺少时间戳列，对吧？

问题解决了！如果其他人有同样的问题，我忘了添加时间戳列

【参考方案1】：

您遇到此错误是因为您的迁移中缺少 $table->timestamps();，因此您必须添加它，Laravel 会自动为您创建 updated_at 和 created_at 列。 对于 laravel 中的每个条目和更新，它会自动为这些列分配值，因此很明显，当它们从数据库中丢失时会出现此错误。

之后，您的迁移将如下所示：

`Schema::create('streaming_provider', function (Blueprint $table) 
        $table->id();
        $table->string('user_id');
        $table->boolean('Netflix')->default(0);
        $table->boolean('Amazon_Prime_Video')->default(0);
        $table->boolean('Sky_Ticket')->default(0);
        $table->boolean('Disney_Plus')->default(0);
        $table->boolean('HBO_Video')->default(0);
        $table->timestamps();
    );`