Wie werden Laravel Spark-Formulare gesendet?

Question

Laravel Spark hat eine Reihe von Formen in seinem Einstellungsbereich. Hier ist einer, der Teams hinzufügt.

Wenn ich auf den Quellcode dieser Form anschaue, sehe ich die folgenden.

Die HTML-Quelle für diese Form sieht wie folgt aus

<form role="form" class="form-horizontal"> 
    <div class="form-group"> 
     <label class="col-md-4 control-label"> 
      Team Name 
     </label> 
     <div class="col-md-6"> 
      <input type="text" id="create-team-name" name="name" class="form-control"> 
<!----> 
       <span class="help-block" style="display: none;"> 
       </span> 
      </div> 
     </div> 
    <div class="form-group"> 
     <div class="col-md-offset-4 col-md-6"> 
      <button type="submit" class="btn btn-primary"> 
       Create 
      </button> 
     </div> 
    </div> 
</form> 

Insbesondere selbst die Form

<form role="form" class="form-horizontal"> 

Meine Vermutung gibt keine action oder type Parameter hat einige Script ausgeführt wird, der das alles Griffe (eine Vue JS-Komponente), aber es ist nicht klar

1. Wo das Team Creation javascript Quelle lebt und/oder wo Funken die Komponente
2. Wie schafft kann ich denselben Weg zurückverfolgen, wie eine bestimmte Form seiner Javascript

Erfahrene Programmierer hier - gerade neue Spark und der Hoffnung, dies ist Einfach/offensichtlich für einen erfahrenen Spark-Entwickler.

Answer 1

Jeder <form> Spark wird typischerweise durch eine Vue.js Komponente enthält die Definition behandelt, und obwohl sie keine action oder method Attribute haben sie haben spezielle Vue-Richtlinien tun, wie @submit (oder @click wenn es a <button type="submit">). Der Grund, warum Sie sie nicht in HTML in Dev-Tools sehen, ist, dass diese Direktiven vor dem Rendern kompiliert werden.

Das Formular, auf das Sie sich beziehen, ist in einem <spark-create-team>-Tag verpackt. Sie können den Code finden, der diese Komponente in /resources/assets/js/spark-components/settings/teams/create-team.js initialisiert; Sie werden auch bemerken, dass es nur die Komponentendefinition aus dem Verzeichnis /vendor von Spark erfordert. Mit anderen Worten: Komponenten- und Formulardefinitionen werden in Spark-Herstellerdateien unter /vendor/laravel/spark/resources/assets/js/settings/teams/create-form.js gespeichert. Kannst du sehen, dass settings/teams/create-form.js Teil identisch ist? Dies sollte Ihnen helfen, den zugrunde liegenden JS-Code für jede Komponente oder jedes Formular zu finden - suchen Sie einfach die JS-Assets von Spark, und schließlich wird die Ordnerstruktur für Sie zu einer zweiten Natur.

Was die SparkForm Klasse, es ist ein helper class designed for working with form errors. Seine Definition ist in vendor/laravel/spark/resources/assets/js/forms/form.js Datei, obwohl ich glaube nicht, dass Sie jemals irgendwelche Änderungen daran vornehmen müssen; Folgen Sie einfach Taylors Beispielen mit Formularen, die Axios verwenden, und Sie sollten keine Probleme mit Übermittlungen oder Validierung haben. Obwohl für den späteren Zeitpunkt, Validierung, würde ich vorschlagen, ein external package verwenden, anstatt auf serverseitige Validierung von säumigen, aber das ist ein bisschen weg hier Thema.

Hoffe, das hilft.