Динамические формы с VueJS

What this does is iterate over all of the locations data and validates each piece. We iterate over it as an object in case the keys are out of order if we remove a location. Now each of the validations is keyed to the specific field in the array along with the text.

If you look at one of the lines, like:

this.validations.locations[index].zip.is_valid = false;
this.validations.locations[index].zip.text = 'Please enter a valid zip code for the new cafe!';

вы увидите, что если одно из полей недействительно, оно имеет соответствующий ключ. Вот как мы ориентируемся на динамические поля.

Еще одно быстрое обновление проверки: мы добавили проверку URL-адреса для поля веб-сайта, которое является дополнительным полем, которое мы добавили:

/*
  If a website has been entered, ensure the URL is valid
*/
if( this.website.trim != '' && !this.website.match(/^((https?):\/\/)?([w|W]{3}\.)+[a-zA-Z0-9\-\.]{3,}\.[a-zA-Z]{2,}(\.[a-zA-Z]{2,})?$/) ){
  validNewCafeForm = false;
  this.validations.website.is_valid = false;
  this.validations.website.text = 'Please enter a valid URL for the website!';
}else{
  this.validations.website.is_valid = true;
  this.validations.website.text = '';
}

Это просто проверяет, есть ли у нас веб-сайт и является ли он действительным URL-адресом. Остальные проверки остаются прежними, как и весь процесс. Мы вернем false, если форма недействительна.

Шаг 8: Обновление addCafe Dispatch

Теперь, когда у нас есть действующая форма с целой кучей новых полей, нам нужно правильно передать их действию, чтобы мы могли сохранить новое кафе.

В нашем методе submitNewCafe() мы добавим дополнительные поля и реструктурируем наши адреса, чтобы они находились в местоположениях. Наши обновления должны выглядеть так:

submitNewCafe(){
  if( this.validateNewCafe() ){
    this.$store.dispatch( 'addCafe', {
      name: this.name,
      locations: this.locations,
      website: this.website,
      description: this.description,
      roaster: this.roaster
    });
  }
},

Теперь мы передаем все данные о местоположении в виде массива, а веб-сайт, описание и параметры ростера мы добавили позже. Помните, что наши методы заваривания теперь специфичны для каждого кафе.

Шаг 9: Обновление API cafe.js

После обновления диспетчера addCafe нам нужно настроить метод действия обработчика в модуле resources/assets/js/modules/cafes.js Vuex. Прямо сейчас этот метод принимает объект данных, но передает старую структуру в API.

Во-первых, нам нужно обновить это, чтобы передать новую структуру следующим образом:

addCafe( { commit, state, dispatch }, data ){
  commit( 'setCafeAddedStatus', 1 );

  CafeAPI.postAddNewCafe( data.name, data.locations, data.website, data.description, data.roaster )
      .then( function( response ){
        commit( 'setCafeAddedStatus', 2 );
        dispatch( 'loadCafes' );
      })
      .catch( function(){
        commit( 'setCafeAddedStatus', 3 );
      });
}

Это передает обновленные данные в API.

Теперь нам нужно открыть наш файл /resources/assets/js/cafe.js и настроить API для отправки новых данных на сервер.

Вызывается метод postAddNewCafe(), и нам нужно обновить параметры и полезную нагрузку метода следующим образом:

/*
  POST  /api/v1/cafes
*/
postAddNewCafe: function( name, locations, website, description, roaster ){
  return axios.post( ROAST_CONFIG.API_URL + '/cafes',
    {
      name: name,
      locations: locations,
      website: website,
      description: description,
      roaster: roaster
    }
  );
}

Теперь мы передаем данные в правильном формате со стороны JS на сервер, чтобы они соответствовали тому, что у нас сейчас есть в нашей динамической форме. Теперь нам нужно просто обновить проверку на стороне сервера, чтобы убедиться, что мы получаем достоверные данные.

Шаг 10: Обновление проверки на стороне сервера

Прямо сейчас, если бы мы отправили нашу форму, мы бы получили массу проблем с проверкой, потому что наш запрос проверяется в формате старых данных. Нам нужно убедиться, что новые данные проверены.

Сначала мы открываем наш файл /app/Http/Requests/StoreCafeRequest.php.

В массиве проверки удалите старые данные адреса:

return [
    'name'         => 'required',
    'website'      => 'sometimes|url'
];

Все это объединено в локации. Нам также необходимо удалить старые адресные данные из массива сообщений.

Теперь нам нужно добавить проверки для массива местоположений. В Laravel есть несколько встроенных правил проверки для массивов, перечисленных здесь: Проверка — Laravel — PHP Framework для веб-мастеров.

Что вы можете сделать, так это использовать * для любого ключа, а затем проверить каждую часть массива. Проверка нашего массива местоположений должна выглядеть так:

'name'                    => 'required',
'location.*.address'      => 'required',
'location.*.city'         => 'required',
'location.*.state'        => 'required',
'location.*.zip'          => 'required|regex:/\b\d{5}\b/',
'location.*.brew_methods' => 'sometimes|array',
'website'                 => 'sometimes|url'

Теперь любой ключ в нашем массиве местоположений будет проверяться в соответствии с правилами. Довольно болен, а?

Шаг 11: Сохранение нового запроса формы

Теперь, когда у нас есть действительные данные, поступающие в нашу конечную точку API, пришло время добавить данные в базу данных.

Нам нужно будет открыть наш файл /app/Http/Controllers/API/CafesController.php и внести некоторые изменения в метод postNewCafe.

Поскольку мы добавили несколько локаций и возможность для родительского кафе (по сути, используемого для группировки кафе), нам нужно внести много изменений.

Сначала давайте добавим весь наш код и разберем его:

$addedCafes = array();

$locations = $request->get('locations');

/*
  Create a parent cafe and grab the first location
*/
$parentCafe = new Cafe();

$address            = $locations[0]['address'];
$city                   = $locations[0]['city'];
$state                  = $locations[0]['state'];
$zip                        = $locations[0]['zip'];
$locationName       = $locations[0]['name'];
$brewMethods        = $locations[0]['methodsAvailable'];

/*
  Get the Latitude and Longitude returned from the Google Maps Address.
*/
$coordinates = GoogleMaps::geocodeAddress( $address, $city, $state, $zip );

$parentCafe->name                   = $request->get('name');
$parentCafe->location_name  = $locationName != '' ? $locationName : '';
$parentCafe->address                = $address;
$parentCafe->city                   = $city;
$parentCafe->state                  = $state;
$parentCafe->zip                        = $zip;
$parentCafe->latitude           = $coordinates['lat'];
$parentCafe->longitude          = $coordinates['lng'];
$parentCafe->roaster                = $request->get('roaster') != '' ? 1 : 0;
$parentCafe->website                = $request->get('website');
$parentCafe->description        = $request->get('description') != '' ? $request->get('description') : '';
$parentCafe->added_by           = Auth::user()->id;

/*
  Save parent cafe
*/
$parentCafe->save();

/*
  Attach the brew methods
*/
$parentCafe->brewMethods()->sync( $brewMethods );

array_push( $addedCafes, $parentCafe->toArray() );

/*
  Now that we have the parent cafe, we add all of the other
  locations. We have to see if other locations are added.
*/
if( count( $locations ) > 1 ){
  /*
    We off set the counter at 1 since we already used the
    first location.
  */
  for( $i = 1; $i < count( $locations ); $i++ ){
    /*
      Create a cafe and grab the location
    */
    $cafe = new Cafe();

    $address            = $locations[$i]['address'];
    $city                   = $locations[$i]['city'];
    $state                  = $locations[$i]['state'];
    $zip                        = $locations[$i]['zip'];
    $locationName       = $locations[$i]['name'];
    $brewMethods        = $locations[$i]['methodsAvailable'];

    /*
      Get the Latitude and Longitude returned from the Google Maps Address.
    */
    $coordinates = GoogleMaps::geocodeAddress( $address, $city, $state, $zip );

    $cafe->parent               = $parentCafe->id;
    $cafe->name                     = $request->get('name');
    $cafe->location_name    = $locationName != '' ? $locationName : '';
    $cafe->address              = $address;
    $cafe->city                     = $city;
    $cafe->state                    = $state;
    $cafe->zip                      = $zip;
    $cafe->latitude             = $coordinates['lat'];
    $cafe->longitude            = $coordinates['lng'];
    $cafe->roaster              = $request->get('roaster') != '' ? 1 : 0;
    $cafe->website              = $request->get('website');
    $cafe->description      = $request->get('description') != '' ? $request->get('description') : '';
    $cafe->added_by             = Auth::user()->id;

    /*
      Save cafe
    */
    $cafe->save();

    /*
      Attach the brew methods
    */
    $cafe->brewMethods()->sync( $brewMethods );

    array_push( $addedCafes, $cafe->toArray() );
  }
}

/*
  Return the added cafes as JSON
*/
return response()->json($addedCafes, 201);

Много кода для прохождения! В первой строке мы инициализируем новый массив с именем addedCafes(). Здесь будут размещаться кафе, которые мы добавили в базу данных.

Затем мы берем все местоположения из запроса и создаем родительское кафе:

$locations = $request->get('locations');

/*
  Create a parent cafe and grab the first location
*/
$parentCafe = new Cafe();

$address        = $locations[0]['address'];
$city           = $locations[0]['city'];
$state          = $locations[0]['state'];
$zip                = $locations[0]['zip'];
$locationName       = $locations[0]['name'];
$brewMethods        = $locations[0]['methodsAvailable'];

Мы берем позицию 0, потому что с нашими валидациями мы точно передаем 1 позицию, и мы создаем наше родительское кафе.

Теперь мы сохраняем наше родительское кафе и синхронизируем методы варки, как показано на https://serversideup.net/many-many-relationships-laravel/

/*
  Get the Latitude and Longitude returned from the Google Maps Address.
*/
$coordinates = GoogleMaps::geocodeAddress( $address, $city, $state, $zip );

$parentCafe->name               = $request->get('name');
$parentCafe->location_name  = $locationName != '' ? $locationName : '';
$parentCafe->address                = $address;
$parentCafe->city               = $city;
$parentCafe->state              = $state;
$parentCafe->zip                    = $zip;
$parentCafe->latitude           = $coordinates['lat'];
$parentCafe->longitude          = $coordinates['lng'];
$parentCafe->roaster                = $request->get('roaster') != '' ? 1 : 0;
$parentCafe->website                = $request->get('website');
$parentCafe->description            = $request->get('description') != '' ? $request->get('description') : '';
$parentCafe->added_by           = Auth::user()->id;

/*
  Save parent cafe
*/
$parentCafe->save();

/*
  Attach the brew methods
*/
$parentCafe->brewMethods()->sync( $brewMethods );

После добавления родительского кафе мы помещаем родительское кафе в массив addCafes:

array_push( $addedCafes, $parentCafe->toArray() );

Это будет возвращено. Далее все становится немного уникальным. Сначала проверяем, есть ли еще локации:

if( count( $locations ) > 1 ){

Если есть, то мы смещаем на 1 и добавляем другие места как отдельные кафе с родительским набором кафе. Это позволяет нам сгруппировать кафе. Смещаем на 1, так как мы уже использовали первое местоположение для родительского кафе. Весь остальной код одинаков для сохранения кафе и добавления методов приготовления.

Шаг 12: добавьте функции UX в форму

Есть пара функций UX, которые я добавляю в форму. Один из них очищает форму в случае успеха и показывает уведомление. Это очень важно, потому что если пользователь хочет добавить несколько кафе за один сеанс, ему не нужно обновлять страницу. Для этого я сначала добавил getCafeAddStatus к вычисляемым свойствам на странице NewCafe.vue. Таким образом, мы можем слушать изменения.

computed: {
  brewMethods(){
    return this.$store.getters.getBrewMethods;
  },
  addCafeStatus(){
    return this.$store.getters.getCafeAddStatus;
  }
},

Затем мы добавляем следующий метод наблюдения для addCafeStatus:

watch: {
  'addCafeStatus': function(){
    if( this.addCafeStatus == 2 ){
      this.clearForm();
      $("#cafe-added-successfully").show().delay(5000).fadeOut();
    }

    if( this.addCafeStatus == 3 ){
      $("#cafe-added-successfully").show().delay(5000).fadeOut();
    }
  }
},

Что это делает, так это наблюдайте за addCafeStatus . Если он равен 2, то мы очищаем форму и показываем сообщение об успешном завершении. Метод очистки формы сбрасывает данные формы. Мы добавили этот метод в наши методы здесь:

clearForm(){
  this.name = '';
  this.locations = [];
  this.website = '';
  this.description = '';
  this.roaster = false;
  this.validations = {
    name: {
      is_valid: true,
      text: ''
    },
    locations: [],
    oneLocation: {
      is_valid: true,
      text: ''
    },
    website: {
      is_valid: true,
      text: ''
    }
  };

  this.addLocation();
}

В самом конце, после сброса информации, он добавляет местоположение в форму.

Если статус добавления кафе равен 3, то мы показываем сообщение о неудачном добавлении.

Вывод

Эта динамическая форма становится немного более конкретной для самого приложения, но, надеюсь, пример может помочь тем, кто в этом нуждается. VueJS чертовски хорошо справляется с динамическими формами благодаря своей реактивной природе. Многие функциональные возможности, наконец, собираются воедино, но теперь у нас есть действительно хорошая база, на которой мы можем абстрагировать некоторые данные и отправиться в город с еще большим количеством руководств и идей.

Конечно же, посмотрите «GitHub — serversideup/roastandbrew: помощь кофеману в поиске следующей чашки кофе. Кроме того, помогая начинающим разработчикам веб-приложений и мобильных приложений создавать одностраничные приложения и преобразовывать их в гибридные мобильные приложения. Все руководства можно найти по адресу https://serversideup.net для всего исходного кода, и обращайтесь по любым вопросам!

Привет! Мы пишем книгу по разработке приложений на основе API. Узнай первым, как только он будет готов! Зарегистрируйтесь здесь: Регистрация для разработки приложений на основе API