laravel和vue如何同时保存和更新

Question

我遇到了一个在任何地方都找不到答案的问题。 我正在用后端的 PHP(Laravel) 和前端的 VueJs 编写一个应用程序。 我已经成功地完成了整个应用程序，但现在，我必须同时保存和更新一个表，我将按照代码进行解释。

场景更新

我正在编写维护控件，我必须在表格中输入维护记录，因此，有些维护是定期进行的，我应该在下一次维护开始时发出警告，这就是为什么我需要同时发布和放置。 我无法从 vue 向 laravel 发送单个请求，因为我正在使用路由，如果它与 POST 方法一起使用，我会得到方法不允许错误，正如您在控制器的函数中看到的那样，我已经尝试使用单个请求。

这是我在主 vue 文件中使用的路由：

<b-tab title="Cadastro de Manutenções">
                    <manutencao-cadastro
                        rotacadadd="manutencao/cadastro/"
                        rotamaquina="manutencao/cadastro/autcomp"
                        rotatipoautcomp="manutencao/cadastro/axios-tipo"
                        rotanomecolaborador="manutencao/cadastro/nomeColaborador"
                        rotacadsalvar="manutencao/cadastro/salvarManutencao"
                        rotacadatualizar="manutencao/cadastro/updateManute"
                        rotacaddel="manutencao/cadastro/deleteManute"
                        rotaatualizacadastro="manutencao/cadastro/atualizaCad"
                    />
                </b-tab>

这是我在 vue 上保存/更新的函数：

save(){
            const method = this.maintenance.id ? 'put' : 'post'
            const id = this.maintenance.id ? `/${this.maintenance.id}` : ''
            const url = this.maintenance.id ? this.rotacadatualizar : this.rotacadsalvar
            axios[method](`${url}${id}`, this.maintenance)
                .then(() => {
                    this.reset()
                }).catch((err) => {
                console.error(err)
            });
    }

如您所见，此功能根据情况保存或更新，正常工作。

这是我在后端的功能：

public function saveMaintenance(Request $request)
{

    $maquina = $this->ManutencaoMaquinasM
        ->where('descricao', $request->maquina)
        ->first();

    $tecnico = $this->ColaboradorM
        ->where('nomecolaborador', $request->tecnico)
        ->first();

    $manutencao = $this->TecManutencaoTipoM
        ->where('manutencao', $request->manutencao)
        ->first();

    $dia = '';

    $data = $this->TecManutencaoCadastroM->join('manutencao_maquinas', 'tec_manutencao_cadastros.maqId', 'manutencao_maquinas.id')
        ->select(DB::raw('max(tec_manutencao_cadastros.data) as date'))
        ->where('manutencaoId', $manutencao->id)
        ->where('manutencao_maquinas.descricao', $request->maquina)
        ->get();

    foreach ($data as $dat) {
        $dia = $dat->date;
    }

    try{
        \DB::beginTransaction();
        $input = $request->all();

        $maintenance = new TecManutencaoCadastro();
        $maintenance->maqId = $maquina->id;
        $maintenance->tipoId = $input['tipo'];
        $maintenance->manutencaoId = $manutencao->id;
        $maintenance->tecnicoId = $tecnico->id;
        $maintenance->data = $input['data'];
        $maintenance->tempo = $input['tempo'];
        $maintenance->obs = $input['obs'];
        $maintenance->save();

        /* $atualizar = $this->TecManutencaoCadastroM
            ->where('madIq', $maquina->id)
            ->where('manutencaoId', $manutencao->id)
            ->where('data', $dia)
            ->update(array('atendido' => 's')); */

        //\Log::info($maintenance);

        \DB::commit();

        return response()->json('salvo', 200);

    } catch (\Exception $e){
        \DB::rollback();
        return response()->json($e.'erro', 422);
    }
}

当我必须保存数据时也可以正常工作。 注释块在 laravel 中有效，但在 vue 中无效。

这是要更新的函数：

public function updateMaintenance(Request $request)
{
    $maquina = $this->ManutencaoMaquinasM
        ->where('descricao', $request->maquina)
        ->first();

    $tecnico = $this->ColaboradorM
        ->where('nomecolaborador', $request->tecnico)
        ->first();

    $manutencao = $this->TecManutencaoTipoM
        ->where('manutencao', $request->manutencao)
        ->first();

    try{
        \DB::beginTransaction();

        $tipo = $this->TecManutencaoCadastroM->where('id', '=', $request->id)
            ->update(
                array(
                    'maqId' => $maquina->id,
                    'tipoId' => $request->tipo,
                    'manutencaoId' => $manutencao->id,
                    'tecnicoId' => $tecnico->id,
                    'data' => $request->data,
                    'tempo' => $request->tempo,
                    'obs' => $request->obs
                )
            );


        \DB::commit();

        return response()->json('salvo', 200);

    } catch (\Exception $e){
        \DB::rollback();
        return response()->json($e.'erro', 422);
    }
}

按预期工作。

我的问题是，我正在尝试在表中保存一些新数据并同时更新同一张表中的另一行，但是正如您在 vue 方法中看到的那样，当我保存时，路径指向POST 并且当我更新时，路径指向 PUT，我想这就是我无法执行此操作的原因。 这是我这样做的一种方式吗？ 我是 vue 的新手，没有找到任何可以帮助我的东西。 谁能给我指路？

提前致谢。

Answer 1

在我看来，您有 2 个选择。要么发起 2 个单独的请求（同时），要么发送一个请求，让 PHP 弄清楚如何处理插入和更新。

不确定TecManutencaoCadastro 和TecManutencaoCadastroM 之间的区别是什么，所以我只是从您的示例中复制/粘贴了它。

场景 1：发送 2 个请求

保留您的saveMaintenance 和updateMaintenance PHP 方法，并为每个方法发起一个请求。前任。 Axios-Make multiple request at once (vue.js)

axios.all([
    this.make_post_request(),
    this.make_put_request()
])
...
make_post_request() {
    return axios.post('...url...', { params: 'example' })
},
make_put_request() {
    return axios.put('...url...', { params: 'example' })
}
...

场景 2：发出单个（发布）请求

将您的所有数据与请求一起传递，让 PHP 决定如何处理它。这个场景只是扩展了post（插入）功能来处理您的特定用例，同时更新先前的维护记录如果它存在。

save(){
    axios['post'](`...url...`, this.maintenance)
        .then(() => {
            ...
        })
    );
}

PHP

public function saveMaintenance(Request $request)
{
    // Begin transaction

    // The request has an `id` parameter so do the update to set the status to `s`.
    if ($request->has('id')) {
        $tipo = $this->TecManutencaoCadastroM->where('id', '=', $request->id)
            ->update(
                ...
            );                
    }

    // Finally, create the new maintenance row with value `n`.
    $maintenance = new TecManutencaoCadastro();
    ...
    $maintenance->save();

    // Commit transaction
}

您应该保留updateMaintenance，以便实际发出put 请求以更新维护记录。