php - 使用 Laravel 和 Vue.js 的 CRUD 问题
问题描述
我最近开始在 laravel 中使用 vue。
我已经在一个正在进行的项目中构建了一个刀片视图并在其上使用了一个 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']);
});
});
正如我之前所说,我在完成这个保存操作时遇到了问题,我想如果我能做到,我就可以做下一个。
我感谢任何帮助,如果需要,我可以提供更多信息。
谢谢你们。
解决方案
通过使用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);
}
}
推荐阅读
- java - 如何摆脱输出“java.lang.Exception
- magento - Magento 无法将产品添加到类别
- python - 使用 Pandas 更新 Excel 电子表格中的单个单元格
- unity3d - 如何在 Unity3D 中制作类似于 Subway Surfers 或 Talking Tom Gold Run 的着色器?
- oauth-2.0 - 未返回带客户端凭据流的范围
- apache-spark - 简单的火花流而不是打印线
- jupyter-notebook - 是否可以从在 Linux 上运行的远程 Jupyter Notebook 服务器访问 Windows 网络或本地驱动器?
- java - SipServlet 彩铃实现
- html - 让图像在 CSS 网格内自动调整大小
- r - 在 R 中构建具有加权周末的随机日期生成器