使用 Laravel 和 Vue.js 的 CRUD 问题答案

【问题标题】：Problems with CRUD using Laravel and Vue.js使用 Laravel 和 Vue.js 的 CRUD 问题
【发布时间】：2019-11-25 13:52:11
【问题描述】：

我最近开始使用 vue 和 laravel。

我在一个正在进行的项目中构建了一个刀片视图并在其上使用了一个 vue 模板，我可以正常查看所有内容，但是当页面加载时我收到： "[Vue 警告]: 编译模板出错：

模板应该只负责将状态映射到 UI。避免在模板中放置带有副作用的标签，例如，因为它们不会被解析。” 当我尝试保存时，出现 422 和 500 错误。

这也是一个多页应用程序。

我已经尝试在刀片中给出脚本标签的类型，更改部分标签的脚本标签，但均未成功。至于保存，我在模板中记录控制台我的数据并且所有数据都在那里，正如我所期望的那样，但是由于某种原因，这些数据对控制器有一些错误，老实说，我已经有两个星期了为了解决这个问题，我多次重写了我的代码，但仍然没有弄清楚。有人可以帮我提供一些想法吗？

关注代码：

这是刀片文件：

@extends('portal.template')

@section('content')
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ url('/portal-cambos') }}">Portal Cambos</a></li>
        <li class="breadcrumb-item"><a href="{{ url('/portal-cambos/tecelagem') }}">Tecelagem</a></li>
        <li class="breadcrumb-item active">Manuteção</li>
        <li class=" ml-auto">
            <button type="button" class="btn btn-secondary btn-sm" onclick="goBack()">
                <i class="fa fa-reply"></i> Voltar
            </button>
        </li>
    </ol>

    <div id="app">
        <index rotaadd="tecelagem/manutencao/"></index>
    </div>

    <script src="{{ asset('js/app.js') }}"></script>
@endsection

主要的vue组件：

<template>
    <div class="tec-manut-pages">
        <PageTitle main="Manutenções Tecelagem" />
        <div class="tec-manut-pages-tabs">
            <b-card no-body>
                <b-tabs pills card>
                    <b-tab title="Máquinas com Manutençao Próxima" active>
                        Manutenções Próximas
                    </b-tab>
                    <b-tab title="Tipos de Manutenção">
                        <manutencao-tipos
                                rotaadd="manutencao/tipos/"
                                rotasalvar="manutencao/tipos/salvar/"/>
                    </b-tab>
                    <b-tab title="Cadastro de Manutenções">
                        Cadastro de Manutenções
                    </b-tab>
                    <b-tab title="Relatórios">
                        Relatórios
                    </b-tab>
                </b-tabs>
            </b-card>
        </div>
    </div>
</template>

<script>
    import PageTitle from '../../PageTitle'
    import ManutencaoTipos from "./manutencaoTipos";

    export default {
        name: "index",
        components: {PageTitle, ManutencaoTipos}
    }
</script>

<style scoped>

</style>

第二个vue组件：

<template>
    <div class="tec-manu-tipo" id="tec-manu-tipo">
        <b-form>
            <b-row>
                <b-col md="4" sm="12">
                    <b-form-group label="Tipo: " label-for="tipo">
                        <b-form-select id="tipo" v-model="type.tipo" :options="options" :readonly="mode === 'remove'"></b-form-select>
                    </b-form-group>
                </b-col>

                <b-col md="4" sm="12">
                    <b-form-group label="Manutenção: " label-for="manutencao">
                        <b-form-input id="manutencao" v-model="type.manutencao" placeholder="Informe o nome da manutenção..." :readonly="mode === 'remove'" />
                    </b-form-group>
                </b-col>

                <b-col md="4" sm="12">
                    <b-form-group label="Período: " label-for="periodo">
                        <b-form-input id="manutencao" v-model="type.periodo" placeholder="Informe o período da manutenção em dias..." :readonly="mode === 'remove'" />
                    </b-form-group>
                </b-col>
            </b-row>

            <b-row>
                <b-col xs="12">
                    <b-button variant="primary" v-if="mode === 'save'" @click="save">Salvar</b-button>
                    <b-button variant="danger" v-if="mode === 'remove'" @click="remove">Excluir</b-button>
                    <b-button class="ml-2" @click="reset">Cancelar</b-button>
                </b-col>
            </b-row>
        </b-form>
        <hr>
        <b-table hover striped>
            <template slot="actions">
                <b-button variant="warning" class="mr-2">
                    <i class="fa fa-pencil"></i>
                </b-button>

                <b-button variant="danger">
                    <i class="fa fa-trash"></i>
                </b-button>
            </template>
        </b-table>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: "manutencaoTipos",
        props:['rotaadd', 'rotasalvar', 'nomes'],
        data() {
            return {
                mode: 'save',
                type: {
                    tipo: '',
                    manutencao: '',
                    periodo: ''
                },
                tipos: [],
                options: [
                    {value: null, text: 'Escolha o Tipo...'},
                    {value: '0', text: 'Corretiva'},
                    {value: '1', text: 'Preventiva'},
                    {value: '2', text: 'Limpeza'}
                ]
            }
        },
        methods:{
            reset(){
                this.mode = 'save'
                this.type = {}
                this.loadTypes()
            },
            save(){
                //console.log(this.tipo)
                axios.post(this.rotasalvar, this.type)
                    .then((res) => {
                        window.location.href ='http://127.0.0.1:8000/portal-cambos/tecelagem/manutencao';
                    }).catch((err) => {
                    console.error(err)
                });
            }
        }
    }
</script>

<style scoped>

</style>

app.js：

require('./bootstrap');
window.Vue = require('vue');
window.BootstrapVue = require('bootstrap-vue');
window.VueRouter=require('vue-router').default;
window.VueAxios=require('vue-axios').default;
window.Axios = require('axios').default;

Vue.use(BootstrapVue);

//let AppIndex= require('./components/tecelagem/manutencao/index.vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the body of the page. From here, you may begin adding components to
 * the application, or feel free to tweak this setup for your needs.
 */

Vue.component('example', require('./components/Example.vue').default);
Vue.component('add-produtos', require('./components/tecelagem/add-produtos.vue').default);
//Vue.component('rform', require('./components/tecelagem/RForm.vue').default);
Vue.component('index', require('./components/tecelagem/manutencao/index.vue').default);
Vue.component('tipos', require('./components/tecelagem/manutencao/manutencaoTipos.vue').default);

/*const index = Vue.component('index', require('./components/tecelagem/manutencao/index.vue'));

Vue.use(VueRouter,VueAxios, axios);

const routes = [
    {
        name: 'Index',
        path: '/',
        component: index
    }
];

const router = new VueRouter({ mode: 'history', routes: routes});

new Vue(
    Vue.util.extend(
        { router },
        AppIndex
    )
).$mount('#app');*/

const app = new Vue({
    el: '#app'
});

保存在控制器中的功能：

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

            foreach($input as $entrada){

                $tipo = new TecManutencaoTipo();
                $tipo->tipo = $entrada->tipo;
                $tipo->manutencao = $entrada->manutencao;
                $tipo->periodo = $entrada->periodo;
                $tipo->save();
            }

            \DB::commit();

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

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

路线：

Route::group(['prefix' => 'manutencao'], function () {
            Route::get('', ['as' => 'tecelagem.manutencao', 'uses' => 'TecelagemManutencaoController@index']);

            Route::group(['prefix' => 'tipos'], function () {
                //Route::get('', ['as' => 'tecelagem.manutencao.tipos', 'uses' => 'TecelagemManutencaoController@']);
                Route::post('salvar', ['as' => 'tecelagem.manutencao.tipos.salvar', 'uses' => 'TecelagemManutencaoController@saveType']);
            });
        });

正如我之前所说，我在完成此保存操作时遇到了问题，我想如果我能做到，我将能够制作下一个。

感谢任何帮助，如果需要，我可以提供更多信息。

谢谢大家。

【问题讨论】：

500 错误是相当普遍的，您应该在 Laravel 或 PHP/Web 服务器日志中找到更多信息。您自己返回了 422 错误，但您没有对异常执行任何操作。尝试在 catch 块中添加 Log::info('TecManutencaoTipo failed: '.$e->getMessage());，然后检查 storage/logs 中的 Laravel 日志以查看返回的消息。
你能把代码分享到任何像github这样的vcs上来克隆代码并帮助你修复错误！
$entrada 不是对象。在您的 while 循环开始时尝试 Log::info($entrada); 以找出它是什么。它很可能是一个数组，因此正确的格式是$entrada['tipo'];，但请先仔细检查日志。
不，它现在看起来像是一个整数而不是一个数组。在循环之前尝试Log::info($input);，你有什么？
是的，看起来可以。删除循环并改用$input['tipo']。

标签： php laravel vue.js

【解决方案1】：

通过使用Log::info($input);，确定发送的是单个数组而不是对象数组。因此，您需要删除循环，并通过数组键访问数据：

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

        $tipo = new TecManutencaoTipo();
        $tipo->tipo = $input['tipo'];
        $tipo->manutencao = $input['manutencao'];
        $tipo->periodo = $input['periodo'];
        $tipo->save();

        \DB::commit();

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

    } catch (\Exception $e){
        \DB::rollback();
        Log::info("Unable to save TecManutencaoTipo, ".$e->getMessage());
        return response()->json($e.'erro', 422);
    }
}

【讨论】：