使用 Laravel 和 Vue.js 的 CRUD 问题

Question

我最近开始在 laravel 中使用 vue。

我在一个正在进行的项目中构建了一个 Blade 视图并在其上使用了一个 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>

应用程序.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']);
            });
        });

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

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

谢谢你们。

Answer 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);
    }
}