旗下导航:搜·么
当前位置:网站首页 > PHP框架 > Laravel > 正文

laravel5.4框架中vue.js完成Ajax的表单提交毛病考证【laravel框架】

作者:搜搜PHP网发布时间:2019-11-27分类:Laravel浏览:91


导读:本篇文章给人人分享的内容是关于laravel5.4框架中vue.js完成Ajax的表单提交毛病考证,有肯定的参考价值,愿望能够协助到有须要的朋侪。最先之前起首预备好开辟环境...
本篇文章给人人分享的内容是关于laravel5.4框架中vue.js完成Ajax的表单提交毛病考证,有肯定的参考价值,愿望能够协助到有须要的朋侪。

最先之前起首预备好开辟环境,我们假定你已安装好 Laravel,至于 Vue 的引入,请参考官方文档。

做好上述预备事情后就可以够最先我们的开辟了,本教程中我们将演示文章发布页面的表单考证。

起首在 routes/web.php 中新增两条路由划定规矩:

Route::get('post/create', 'PostController@create');
Route::post('post/save', 'PostController@save');

然后在项目根目录下运转 Artisan 敕令建立控制器 PostController:

php artisan make:controller PostController

在生成的控制器中新增两个要领用于处置惩罚路由要求:

public function create() {
    return view('post.create');
}
public function save(Request $request) {
    // 设置考证划定规矩
    $this->validate($request, [
         'title' => 'required',
         'body'  => 'required'
     ]);
}

接下来就要建立响应视图了,为了复用已有的款式作风和页面规划,我们先运转以下 Artisan 敕令:

php artisan make:auth

如许我们就可以够复用 Laravel 自带的认证功用页面规划了,建立视图文件 post/create.blade.php,并编辑文件内容以下:

@extends('layouts.app')
@section('content')
    <div class="container">
        <!--建立胜利显现音讯-->
        <div class="alert alert-success" v-if="submitted">
            建立胜利!
        </div>
        <!--页面提交以后阻挠革新-->
        <form @submit.prevent="createPost" method="POST">
            <legend>建立文章</legend>
            <!--假如title字段考证失利则增加.has-error-->
            <div class="form-group" :class="{'has-error':errors.title}">
                <label>文章题目</label>
                <input type="text" name="title" class="form-control" v-model="post.title" value="{{ old('title') }}">
                <!--假如考证失利经由过程FormError组件显现毛病信息-->
                <form-error v-if="errors.title" :errors="errors">
                    @{{errors.title.join(',')}}
                </form-error>
            </div>
            <!--假如body字段考证失利则增加.has-error-->
            <div class="form-group" :class="{'has-error':errors.body}">
                <label>文章正文</label>
                <textarea name="body" class="form-control" rows="5" v-model="post.body">{{ old('body') }}</textarea>
                <!--假如考证失利经由过程FormError组件显现毛病信息-->
                <form-error v-if="errors.body" :errors="errors">
                    @{{errors.body.join(',')}}
                </form-error>
            </div>
            <button type="submit" class="btn btn-primary">建立文章</button>
        </form>
    </div>
@endsection

这时候接见页面页面为空,由于我们还没有定义 Vue 相干的数据变量,layouts.app 规划视图里引用了 app.js,而这个 js 由 resources/assets/js/app.js 编译而来,所以我们预备在这里定义 Vue 相干的代码:

var app = new Vue({
    el: '#app',
    data: {
        post: {
            title: '',
            body: ''
        },
        errors: [],
        submitted: false
    },
    methods: {
        createPost: function () {
            var self = this;
            axios.post('/post/save', self.post).then(function(response) {
                // form submission successful, reset post data and set submitted to true
                self.post = {
                    title: '',
                    body: '',
                };
                // clear previous form errors
                self.errors = '';
                self.submitted = true;
            }).catch(function (error) {
                // form submission failed, pass form  errors to errors array
                self.errors = error.response.data;
            });
        }
    }
});

我们在视图文件里还看到了 form-error,这实际上是 Vue 内里的子组件,我们能够在 resources/assets/js/components 目录下建立这个新的组件文件,该目录下供应了一个样例 Example.vue,我们能够参照该样例编写一个新的 FormError.vue:

<template>
    <span class="help-block">
        <slot></slot>
    </span>
</template>
<script>
    export default {
        props: ['errors']
    }
</script>

这里我们将父组件中的数据 errors 通报到了子组件中以便在子组件中显现毛病信息。完成建立子组件后不要忘了在上述 resources/assets/js/app.js 中引入它:

Vue.component('form-error', require('./components/FormError.vue'));

如许,我们就完成了一切编码事情,接下来运转以下敕令从新编译js:

npm run dev

当然在开辟环境中,我们更倾向于运用 npm run watch,该敕令会监听前端资本文件的变动然后从新编译,以防止每次修改后手动编译。

如许,在浏览器中接见 post/create 页面,就可以够一般展现了:

什么都不填写,点击建立按钮,页面就可以展现毛病提醒信息了:

填写响应字段以后再提交,则提醒建立胜利。

如许,我们在 Laravel 中完成了简朴的,基于 Vue 完成的 Ajax 表单提交考证功用,个人感觉在提拔开辟效力方面照样很明显的

相干引荐:

laravel的新特征之高阶音讯通报

Laravel 5.1框架中的ACL用户受权和权限搜检功用的完成

以上就是laravel5.4框架中vue.js完成Ajax的表单提交毛病考证的细致内容,更多请关注ki4网别的相干文章!

标签:laravel5.4框架