Question

我正在使用带有vue前端的larvel后端。它们通过API连接。我一直在尝试找出如何正确提交与父模型具有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

首先：

{% for object in model2count %}
    {{ object.title }}
    {{ object.count }}
{% endfor %}

为什么有这个$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');

您的Post请求如下：

public function store($client_id, Request $request)

您会注意到，功能定义不同于您的路线。在函数中，您需要一个路由未知的参数“ client_id”。因此，要解决此问题，请将您的client_id放入Post请求正文中（在您完成的情况下：例如false），然后从函数定义中删除参数。

请求后的外键Laravel＆Vue

1 个答案: