Vue.js im Laravel5.4-Framework implementiert die Fehlerüberprüfung bei der Ajax-Formularübermittlung

Der Inhalt dieses Artikels befasst sich mit der von vue.js im laravel5.4-Framework implementierten Ajax-Formularübermittlungsfehlerüberprüfung. Es hat einen gewissen Referenzwert und ich hoffe, dass es Freunden in Not helfen kann.

Bevor Sie beginnen, bereiten Sie zunächst die Entwicklungsumgebung vor. Wir gehen davon aus, dass Sie Laravel installiert haben. Informationen zur Einführung von Vue finden Sie in der offiziellen Dokumentation.

Nach Abschluss der oben genannten Vorbereitungen können wir mit der Entwicklung beginnen. In diesem Tutorial demonstrieren wir die Formularüberprüfung der Artikelveröffentlichungsseite.

Fügen Sie zunächst zwei Routing-Regeln in „routes/web.php“ hinzu:

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

Führen Sie dann den Artisan-Befehl im Projektstammverzeichnis aus, um den Controller PostController:

php artisan make:controller PostController

in Two zu erstellen Dem generierten Controller werden neue Methoden zur Verarbeitung von Routing-Anfragen hinzugefügt:

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

Als nächstes müssen wir eine Antwortansicht erstellen. Um den vorhandenen Stil und das Seitenlayout wiederzuverwenden, führen wir zunächst den folgenden Artisan-Befehl aus:

php artisan make:auth

Auf diese Weise können wir das mit Laravel gelieferte Seitenlayout der Authentifizierungsfunktion wiederverwenden, die Ansichtsdatei post/create.blade.php erstellen und den Dateiinhalt wie folgt bearbeiten:

@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="{&#39;has-error&#39;:errors.title}">
                <label>文章标题</label>
                <input type="text" name="title" class="form-control" v-model="post.title" value="{{ old(&#39;title&#39;) }}">
                <!--如果验证失败通过FormError组件显示错误信息-->
                <form-error v-if="errors.title" :errors="errors">
                    @{{errors.title.join(&#39;,&#39;)}}
                </form-error>
            </div>
            <!--如果body字段验证失败则添加.has-error-->
            <div class="form-group" :class="{&#39;has-error&#39;:errors.body}">
                <label>文章正文</label>
                <textarea name="body" class="form-control" rows="5" v-model="post.body">{{ old(&#39;body&#39;) }}</textarea>
                <!--如果验证失败通过FormError组件显示错误信息-->
                <form-error v-if="errors.body" :errors="errors">
                    @{{errors.body.join(&#39;,&#39;)}}
                </form-error>
            </div>
            <button type="submit" class="btn btn-primary">创建文章</button>
        </form>
    </div>
@endsection

An dieser Stelle Zeit Die Zugriffsseite ist leer, da wir keine Vue-bezogenen Datenvariablen definiert haben. Die Layoutansicht „layouts.app“ verweist auf app.js, und dieser js wird aus resources/assets/js/app.js kompiliert, also werden wir dies tun Definieren Sie hier Vue-bezogenen Code:

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

Wir haben auch einen Formfehler in der Ansichtsdatei gesehen, die eigentlich eine Unterkomponente in Vue ist. Wir können diesen neuen in den Ressourcen/assets/js/components erstellen In diesem Verzeichnis wird eine Beispieldatei „Example.vue“ bereitgestellt. Wir können auf dieses Beispiel verweisen, um eine neue FormError.vue zu schreiben:

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

Hier übergeben wir die Datenfehler in der übergeordneten Komponente an die untergeordnete Komponente Komponente in, um Fehlermeldungen in untergeordneten Komponenten anzuzeigen. Nachdem Sie die Unterkomponente erstellt haben, vergessen Sie nicht, sie in den oben genannten resources/assets/js/app.js einzuführen:

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

Auf diese Weise haben wir alle Codierungsarbeiten abgeschlossen und führen dann die aus Folgender Befehl zum Neukompilieren von js:

npm run dev

Natürlich bevorzugen wir in der Entwicklungsumgebung die Verwendung von npm run watch. Dieser Befehl wartet auf Änderungen in den Front-End-Ressourcendateien und kompiliert sie dann neu, um eine manuelle Kompilierung zu vermeiden jede Änderung.

Auf diese Weise wird die Seite zum Veröffentlichen/Erstellen im Browser normal angezeigt:

Füllen Sie nichts aus und klicken Sie auf „Erstellen“. Klicken Sie auf die Schaltfläche und die Seite wird angezeigt. Es kann eine Fehlermeldung angezeigt werden:

Nach dem Ausfüllen der entsprechenden Felder und dem anschließenden Absenden wird eine Meldung angezeigt, dass die Erstellung erfolgreich war.

Auf diese Weise haben wir eine einfache Ajax-Formularüberprüfungsfunktion basierend auf Vue in Laravel fertiggestellt. Ich persönlich habe das Gefühl, dass sie die Entwicklungseffizienz erheblich verbessert hat

Verwandte Empfehlungen:

Laravels neue Funktion für High-Level-Messaging

Implementierung von ACL-Benutzerautorisierungs- und Berechtigungsprüfungsfunktionen im Laravel 5.1-Framework

Das obige ist der detaillierte Inhalt vonVue.js im Laravel5.4-Framework implementiert die Fehlerüberprüfung bei der Ajax-Formularübermittlung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!