Utilisation de Vue.js dans Laravel pour implémenter l'opération de vérification des erreurs de soumission de formulaire Ajax

Ce tutoriel est basé sur Laravel 5.4

Avant de commencer, préparez d'abord l'environnement de développement Nous supposons que vous avez installé Laravel. Quant à l'introduction de Vue, veuillez vous référer au. documents officiels. Après avoir terminé les préparatifs ci-dessus, nous pouvons commencer notre développement. Dans ce didacticiel, nous démontrerons la vérification du formulaire de la page de publication de l'article. Cet article présente principalement l'utilisation de Vue.js dans Laravel pour implémenter la fonction de vérification des erreurs de soumission de formulaire basée sur Ajax. C'est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer.

Ajoutez d'abord deux règles de routage dans routes/web.php :

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

Ensuite, exécutez Artisan dans le répertoire racine du projet Commande pour créer un contrôleur PostController :

php artisan make:controller PostController

Ajoutez deux méthodes dans le contrôleur généré pour gérer les requêtes de routage :

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

L'étape suivante consiste à créer une vue responsive. Afin de réutiliser les styles et mises en page existants, nous exécutons d'abord la commande Artisan suivante :

php artisan make:auth

Dans. de cette façon, nous pouvons réutiliser la mise en page de la fonction d'authentification fournie avec Laravel, créer le fichier de vue post/create.blade.php et modifier le contenu du fichier comme suit :

@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

La page visitée en ce moment est vide car nous n'avons pas défini les variables de données liées à Vue. La vue de mise en page layouts.app fait référence à app.js, et ce js est fourni par resources/assets/js/app.js compilé. , nous allons donc définir ici le code lié à 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;
      });
    }
  }
});

Nous avons également vu une erreur de formulaire dans le fichier de vue, qui se trouve en fait à l'intérieur du sous-composant Vue, nous peut créer ce nouveau fichier de composant dans le répertoire resources/assets/js/components. Un exemple de fichier Sample.vue est fourni dans ce répertoire. On peut se référer à cet exemple pour écrire un nouveau FormError.vue :

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

Ici, nous transmettons les erreurs de données du composant parent au composant enfant pour afficher les informations d'erreur dans le composant enfant. Une fois que vous avez fini de créer le sous-composant, n'oubliez pas de l'introduire dans les ressources/assets/js/app.js ci-dessus :

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

De cette façon, nous avoir terminé tout le travail de codage, puis exécutez la commande suivante pour recompiler js :

npm run dev

Bien sûr dans l'environnement de développement, nous préférons utiliser

, qui écoutera les modifications des fichiers de ressources front-end, puis recompilera pour éviter la compilation manuelle après chaque modification. npm run watch

De cette façon, lorsque vous accéderez à la page de publication/création dans le navigateur, elle s'affichera normalement :

Ne remplissez rien, cliquez sur créer bouton, et la page sera Le message d'erreur peut être affiché :

Après avoir rempli les champs correspondants puis soumis, il sera demandé que la création a réussi :

De cette façon, nous avons complété une simple fonction de vérification de soumission de formulaire Ajax basée sur Vue dans Laravel. Personnellement, je pense que cela a considérablement amélioré l'efficacité du développement.

Recommandations associées :

Partage des méthodes de vérification de formulaire ajax dans le framework TP

Explication détaillée de l'exemple de code de téléchargement de fichier asynchrone de formulaire Ajax

Utilisation de Vue.js dans Laravel pour implémenter des exemples de validation de formulaire Ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!