Как отправляются формы Laravel Spark?

Laravel Spark имеет несколько форм в области настроек. Вот тот, который добавляет команды.

введите здесь описание изображения

Если я посмотрю исходный код этой формы, то увижу следующее.

Исходный код HTML для этой формы выглядит следующим образом.

<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>

В частности, сама форма не имеет параметров action или type.

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

Я предполагаю, что есть какой-то javascript, который обрабатывает все это (компонент Vue JS), но это не ясно

  1. Где находится исходный код javascript Team Creation и/или где Spark создает компонент
  2. Как я могу отследить, как конкретная форма соответствует ее javascript

Опытный программист здесь - просто новичок в Spark и надеется, что это просто/очевидно для опытного разработчика Spark.


person Alan Storm    schedule 24.04.2017    source источник


Ответы (1)


Каждый <form> в Spark обычно обрабатывается компонентом Vue.js, содержащим его определение, и хотя у них нет атрибутов action или method, у них есть специальные директивы Vue, такие как @submit (или @click, если это <button type="submit">). Причина, по которой вы не видите их в HTML в инструментах разработки, заключается в том, что эти директивы компилируются перед рендерингом.

Таким образом, форма, о которой вы говорите, заключена в тег <spark-create-team>. Вы можете найти код, который инициализирует этот компонент в /resources/assets/js/spark-components/settings/teams/create-team.js; вы также заметите, что для этого просто требуется определение компонента из каталога Spark /vendor. Другими словами, определения компонентов и форм хранятся в файлах поставщиков Spark по адресу /vendor/laravel/spark/resources/assets/js/settings/teams/create-form.js. Вы видите, что часть settings/teams/create-form.js идентична? Это должно помочь вам найти базовый код JS для любого компонента или формы — просто найдите JS-ресурсы Spark, и в конечном итоге его структура папок станет для вас второй натурой.

Что касается класса SparkForm, то это вспомогательный класс, предназначенный для работы с ошибками формы. Его определение находится в файле vendor/laravel/spark/resources/assets/js/forms/form.js, хотя я не думаю, что вам когда-нибудь понадобится вносить в него какие-либо изменения; просто следуйте примерам Тейлора с формами, используя Axios, и у вас не должно возникнуть проблем с отправкой или проверкой. Хотя для более позднего этапа проверки я бы предложил использовать внешний package вместо проверки на стороне сервера по умолчанию, но здесь это немного не по теме.

Надеюсь это поможет.

person Alex    schedule 25.04.2017
comment
Идеальный! Как раз то, что я искал - person Alan Storm; 25.04.2017
comment
Re: просто следуйте примерам Тейлора с формами, используя Axios — какие это примеры? - person Alan Storm; 25.04.2017
comment
@AlanStorm Практически любой пример компонента в файлах поставщиков с SparkForm в нем, чтобы увидеть, как отправляются формы. Или вы можете просто обратиться к документам (ссылка в ответе). - person Alex; 25.04.2017
comment
А, понял @alex, спасибо. Я думал, вы имеете в виду конкретный учебник, который хорошо известен в мире laravel. В очередной раз благодарим за помощь! - person Alan Storm; 25.04.2017