邮寄请求Laravel＆Vue上的外键

Question

我正在使用带有vue前端的拉长后端。它们通过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内部服务器错误..

所以这是工作流程

在我的AddEngagment.vue组件的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)
      })
    },

所以，从这里开始，它将请求发送到我的/订阅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以用于post请求时，我不知道如何与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)

你的邮政要求如下：

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下），并从函数定义中删除该参数。