发布请求 Laravel 和 Vue 上的外键

Question

我正在使用带有 vue 前端的 larvel 后端。它们通过 API 连接。我一直在试图弄清楚如何正确地为与父模型具有foreign_key 关系的模型提交表单。

这里是关系

1. 一个用户有很多任务
2. 任务属于用户
3. 一个客户有很多约定
4. 订婚属于客户
5. 参与和任务有很多对很多
6. 用户和客户没有直接关系

所以我知道，如果我想提交与用户有关系的数据的发布请求，如下所示分配 foreign_key 很简单

*示例

public function store(Request $request)
    {
        $data = $request->validate([
            'title' => 'required|string',
            'completed' => 'required|boolean',
        ]);
        $todo = Todo::create([
            'user_id' => auth()->user()->id,
            'title' => $request->title,
            'completed' => $request->completed,
        ]);
        return response($todo, 201);
    }

但是当我尝试为我的客户做同样的事情时，我得到一个 500 内部服务器错误..

这是工作流程

在我的 vue 前端的 AddEngagment.vue 组件中

<template>
  <div class="page-wrapper mt-1">
    <div class="add-engagement container">
      <div class="card-body bg-light border-primary mb-2">
        <h4 class="text-left text-primary m-0"><i class="mr-3 far fa-folder-open"></i>New Engagement</h4>
      </div>
        <form @submit.prevent="addEngagement" class="d-flex-column justify-content-center">
          <div class="form-group">
            <select class="form-control mb-3" id="type" v-model="engagement.return_type">
              <option v-for="type in types" :key="type.id" :value="type">{{ type }}</option>
            </select>
            <input type="text" class="form-control mb-3" placeholder="Year" v-model="engagement.year">
            <input type="text" class="form-control mb-3" placeholder="Assign To" v-model="engagement.assigned_to">
            <input type="text" class="form-control mb-3" placeholder="Status" v-model="engagement.status">

            <button type="submit" class="btn btn-lg btn-primary d-flex justify-content-start">Create</button>
          </div>
        </form>
      </div>  
  </div>
</template>

<script>


export default {
  name: 'add-engagement',
  data() {
    return {
      engagement: {
        return_type: null,
        year: '',
        assigned_to: '',
        status: '',
      },
      types: [ 
        'Choose Return Type...', 
        '1040', 
        '1120',
      ],
    }
  },
   methods: {
    addEngagement(e) {
      if(!this.engagement.return_type || !this.engagement.year ){
        return
      } else {
        this.$store.dispatch('addEngagement', {
          id: this.idForEngagement,
          return_type: this.engagement.return_type,
          year: this.engagement.year,
          assigned_to: this.engagement.assigned_to,
          status: this.engagement.status,
        })
        e.preventDefault();
      }
      e.preventDefault();
      this.engagement = "" 
      this.idForEngagement++
      this.$router.push('/engagements')
    },
  },
  created: function() {
    this.engagement.return_type = this.types[0]
  },

}
</script>

我正在捕获输入中的数据，然后为 addEngagement 操作调度商店

现在在 AddEngagement.vue 组件的 URL 中，我的 client_id 如下所示

add-engagement/{client_id}

这是 addEngagement 的 store.js 操作

addEngagement(context, engagement) {
      axios.post(('/engagements'), {
        return_type: engagement.return_type,
        year: engagement.year,
        assigned_to: engagement.assigned_to,
        status: engagement.status,
        done: false
      })
      .then(response => {
        context.commit('getClientEngagement', response.data)
      })
      .catch(error => {
        console.log(error)
      })
    },

因此，它从这里将请求发送到我的 /engagement 上的 laravel api 路由文件，如下所示

Route::post('/engagements', 'EngagementsController@store');

然后去EngagementsController运行下面的store方法

public function store($client_id, Request $request)
    {
        $data = $request->validate([
            'return_type' => 'required|string',
            'year' => 'required|string',
            'status' => 'required|string',
            'assigned_to' => 'required|string',
            'done' => 'required|boolean'
        ]);

        $engagement = Engagement::create([
            'return_type' => $request->return_type,
            'year' => $request->year,
            'assigned_to' => $request->assigned_to,
            'status' => $request->status,
            'done' => $request->done,
            + [
                'client_id' => $client_id
            ]
        ]);

        return response($engagement, 201);
    }

此时我遇到了错误，我认为这与$client_id 有关，我尝试了许多不同的格式化方法，但均未成功。当 URL 在前端存储 client_id 以用于发布请求时，我不知道该数据如何与 laravel 共享，以便它知道 client_id 外键将分配给哪个客户端。

Answer 1

首先：

$engagement = Engagement::create([
            'return_type' => $request->return_type,
            'year' => $request->year,
            'assigned_to' => $request->assigned_to,
            'status' => $request->status,
            'done' => $request->done,
            + [
                'client_id' => $client_id
            ]
        ]);

为什么会有这个+[...] 数组的东西？对我来说真的没有意义......

但是 500 服务器错误很可能是由您的错误请求引起的（大多数 500 都是这样）。

如果这是您的路线定义：

Route::post('/engagements', 'EngagementsController@store');

这是方法头：

public function store($client_id, Request $request)

您的 Post 请求如下：

axios.post(('/engagements'), {
        return_type: engagement.return_type,
        year: engagement.year,
        assigned_to: engagement.assigned_to,
        status: engagement.status,
        done: false
      })

您会注意到，函数定义与您的 Route 不同。在函数中，您期望路由不知道的参数“client_id”。因此，要解决此问题，请将您的 client_id 放入 Post 请求正文（例如在您的 done: false 下方）并从函数定义中删除参数。