Verwenden von Vue.js in Laravel, um den Fehlerüberprüfungsvorgang für die Ajax-Formularübermittlung zu implementieren

Dieses Tutorial basiert auf Laravel 5.4

Bevor Sie beginnen, gehen wir davon aus, dass Sie Laravel installiert haben offizielle Dokumentation. Nachdem wir die oben genannten Vorbereitungen abgeschlossen haben, können wir mit der Entwicklung beginnen. In diesem Tutorial demonstrieren wir die Formularüberprüfung der Artikelveröffentlichungsseite. In diesem Artikel wird hauptsächlich die Verwendung von Vue.js in Laravel zur Implementierung der Ajax-basierten Formularübermittlungsfehlerüberprüfungsfunktion vorgestellt. Freunde, die es benötigen, können darauf verweisen.

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 Artisan im Projektstammverzeichnis aus. Befehl zum Erstellen ein Controller PostController:

php artisan make:controller PostController

Fügen Sie zwei Methoden im generierten Controller hinzu, um Routing-Anfragen zu verarbeiten:

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

Der nächste Schritt besteht darin, eine responsive Ansicht zu erstellen. Um den vorhandenen Stil und das Seitenlayout wiederzuverwenden, führen wir zunächst den folgenden Artisan-Befehl aus:

php artisan make:auth

In 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')
  <p class="container">
    <!--创建成功显示消息-->
    <p class="alert alert-success" v-if="submitted">
      创建成功!
    </p>
    <!--页面提交之后阻止刷新-->
    <form @submit.prevent="createPost" method="POST">
      <legend>创建文章</legend>
      <!--如果title字段验证失败则添加.has-error-->
      <p 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>
      </p>
      <!--如果body字段验证失败则添加.has-error-->
      <p 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>
      </p>
      <button type="submit" class="btn btn-primary">创建文章</button>
    </form>
  </p>
@endsection

Die zu diesem Zeitpunkt besuchte Seite ist leer, da wir keine Vue-bezogenen Datenvariablen definiert haben. Die Layoutansicht „layouts.app“ verweist auf app.js, und dieser js wird von resources/assets/js/app.js kompiliert , also werden wir hier Vue-bezogenen Code definieren:

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 sich tatsächlich in der Vue-Unterkomponente befindet, wir können diese neue Komponentendatei im Verzeichnis resources/assets/js/components erstellen. In diesem Verzeichnis finden Sie ein Beispiel. Wir können auf dieses Beispiel zurückgreifen, 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, um Fehlerinformationen in der untergeordneten Komponente 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 Nachdem Sie alle Codierungsarbeiten abgeschlossen haben, führen Sie dann den folgenden Befehl aus, um js neu zu kompilieren:

npm run dev

Natürlich bevorzugen wir in der Entwicklungsumgebung die Verwendung von npm run watch hört sich die Änderungen an den Front-End-Ressourcendateien an und kompiliert sie dann neu, um eine manuelle Kompilierung nach jeder Änderung zu vermeiden.

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. Die Fehlermeldung kann angezeigt werden:

Nach dem Ausfüllen der entsprechenden Felder und dem anschließenden Absenden wird 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 dies die Entwicklungseffizienz erheblich verbessert hat.

Verwandte Empfehlungen:

Freigabe von Ajax-Formularüberprüfungsmethoden im TP-Framework

Detaillierte Erläuterung des Beispielcodes für das asynchrone Hochladen von Dateien nach Ajax-Formular

Verwendung von Vue.js in Laravel zur Implementierung von Ajax-Formularvalidierungsbeispielen

Das obige ist der detaillierte Inhalt vonVerwenden von Vue.js in Laravel, um den Fehlerüberprüfungsvorgang für die Ajax-Formularübermittlung zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!