Ultimate Vuejs и Laravel Crud Tutorial

Автор оригинала: Anthony Gore.

Crud (создать, чтение, обновление и удаление) – это основные операции хранения данных, а также одна из первых, которые вы изучаете как разработчик Laravel.

Но что происходит, когда вы добавляете одностраничное приложение Vue.js в качестве интерфейса к этому стеку? Вдруг вы должны иметь дело с асинхронный Crud, поскольку операции сейчас происходят без обновления страницы. Это потребует особого внимания на обеспечение того, чтобы состояние данных соответствовало как в торжественных ситуациях.

В этом руководстве я покажу вам, как настроить All-Stack Vue & Laravel App и Demo каждая из операций CRUD. Ajax – это ключ к этой архитектуре, поэтому мы будем использовать Axios в качестве HTTP-клиента. Я также покажу вам некоторые стратегии для борьбы с подводными камнями UX этой архитектуры.

Вы можете проверить готовый продукт в Этот Github Repo Отказ

Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js на 2010/02/05.

Демо-приложение

Приложение Demo Full-Stack позволяет пользователю создавать новые «Cruds», которые я решил, после невероятного количества творческого мышления, являются инопланетными существами со странными именами и способностью меняться от красного до зеленого и обратно.

Грузки показаны на главной странице, и пользователь имеет возможность создавать новые Cruds, чтобы удалить их или обновить их цвет.

Crud в Backend Laravel

Мы начнем Учебное пособие с Backend Laravel, где выполняются операции CRUD. Я буду держать эту часть, поскольку Laravel Crud – это тема, широко распространенная в других местах.

Таким образом, мы будем:

• Настройте базу данных
• Настройте маршруты RESTFLAY API с помощью контроллера ресурсов
• Определите методы в контроллере для выполнения операций CRUD

База данных

Во-первых, миграция. Наши халаты имеют два свойства: имя и цвет, который мы храним как текст.

2018_02_02_081739_CREATE_CRUDS_TABLE.PHP.

increments('id');
      $table->text('name');
      $table->text('color');
      $table->timestamps();
    });
  }

  ...
}
...

API.

Теперь мы настроили Restful API маршрутов. Ресурс Метод Маршрут Фасад создаст все действия, которые нам нужны автоматически. Тем не менее, нам не нужно редактировать , Показать или магазин Итак, мы исключаем тех.

Маршруты/API.PHP.

 ['edit', 'show', 'store']
]);

С этим на месте, вот различные конечные точки теперь имеем доступные в нашем API:

Контроллер

Теперь нам нужно реализовать эти действия в контроллере:

Приложение/HTTP/Controllers/CrudScontroller.php

Давайте сделаем краткий обзор каждого метода:

создать Отказ Мы рандомилизировать имя и цвет нового Crud, используя Faker Пакет включен в Laravel. Мы отправляем новые данные Crud обратно как JSON.

name = $faker->lexify('????????');
  $crud->color = $faker->boolean ? 'red' : 'green';
  $crud->save();

  return response($crud->jsonSerialize(), Response::HTTP_CREATED);
}

индекс Отказ Мы возвращаем полный набор грунтовки с индекс метод. В более серьезном приложении мы использовали пагинацию, но давайте удержим его простым сейчас.

jsonSerialize(), Response::HTTP_OK);
}

Обновить Отказ Это действие позволяет клиенту изменить цвет CRUD.

color = $request->color;
  $crud->save();

  return response(null, Response::HTTP_OK);
}

уничтожить Отказ Вот как мы удаляем наши грудки.

Vue.js приложение

Теперь для нашего Vue одностранного приложения. Мы начнем с создания одного файлового компонента, чтобы представлять наши грудины, называемые Crudcomponent.vue Отказ

Этот компонент только для отображения и не имеет большого логики. Вот замечательные аспекты:

• Показанное изображение зависит от цвета Crud (либо red.png или green.png )
• Имеет кнопку удаления, которая вызывает метод дель Нажмите, что излучает событие Удалить с идентификатором CRUD
• Имеет HTML SELECT (для выбора цвета), которые вызывают метод Обновить Отмена, что излучает событие Обновить с идентификатором CRUD и новым выбранным цветом

Ресурсы/активы/JS/Компоненты/CrudComponent.Vue

Другой компонент в этом проекте является App.js Отказ Вот где возникает вся интересная логика, поэтому мы собираемся пройти через этот пошаговый.

Начнем с шаблона. Это имеет следующие работы:

• Отображение наших грунтовки с Crud-компонент Компонент обсуждается выше
• Корпус через массив объектов Crud (в массиве Cruds ), с каждым отображением к экземпляру Crud-компонент Отказ Мы передаем все свойства Crud до компонента как реквизиты, и настроить слушателей для Обновить и Удалить События, исходящие из компонента
• У нас также есть Добавить Кнопка, которая создаст новые Cruds, вызвав метод создать по щелчку

Ресурсы/Активы/JS/Компоненты/App.vue

Вот …| Сценарий от App.js Отказ Давайте тоже будем говорить:

• Начнем с функции Crud Это создает новые объекты, используемые для представления наших грунтовки. У каждого есть идентификатор, цвет и имя
• Мы импортируем соседний CrudComponent.
• Определение компонента содержит массив Cruds как свойство данных. Я также окрашил методы для каждой операции CRUD, которая будет заполнена в следующем разделе

Ресурсы/Активы/JS/Компоненты/App.vue

Запуск Crud от frontend с ajax

Все операции CRUD в приложении Full-Stack будут выполняться на бэкэнде, поскольку именно здесь база данных. Однако запуск операций CRUD часто случается в интерфейсе.

Таким образом, HTTP-клиент (что-то может общаться между нашими фронтами и брюками через Интернет), здесь будет важно. Axios Это отличный HTTP-клиент, который приходит предварительно установленным с помощью FeateND по умолчанию Laravel.

Давайте снова посмотрим на нашу таблицу ресурсов, так как каждый вызов Ajax должен будет нацелиться на соответствующую конечную точку API:

Читать

Давайте начнем с читать метод. Этот метод отвечает за получение наших грунтовки от бэкэнда и будет нацелен на индекс Действие нашего контроллера Laravel, таким образом, используя конечную точку Get /API/CRUDS Отказ

Мы можем настроить звонок с window.axios.get , поскольку библиотека Axios была псевдонимой как свойство окно Объект в настройке Frestend по умолчанию Laravel.

Методы Axios, такие как получить , пост и т. д. вернуть обещание. Мы цепи о Тогда Способ с обратным вызовом для доступа к ответу. Объект разрешен может быть разрушен, чтобы обеспечить удобный доступ к данные Свойство в обратном вызове, которое является телом ответа AJAX.

Ресурсы/Активы/JS/Компоненты/App.vue

...

methods() {
  read() {
    window.axios.get('/api/cruds').then(({ data }) => {
      // console.log(data)
    });
  },
  ...
}

/*
Sample response:

[
  {
    "id": 0,
    "name": "ijjpfodc",
    "color": "green",
    "created_at": "2018-02-02 09:15:24",
    "updated_at": "2018-02-02 09:24:12"
  },
  {
    "id": 1,
    "name": "wjwxecrf",
    "color": "red",
    "created_at": "2018-02-03 09:26:31",
    "updated_at": "2018-02-03 09:26:31"
  }
]
*/

Как видите, груди возвращаются в массиве JSON. Axios автоматически разобрает JSON и дает нам объекты JavaScript, что приятно. Давайте повторимся через них в обратном вызове, то создайте новые грубые с нашими Crud Функция завода, затем подтолкнуть их к Cruds Array Data Property I.E. this.cruds.push (...) Отказ

Ресурсы/Активы/JS/Компоненты/App.vue

...

methods() {
  read() {
    window.axios.get('/api/cruds').then(({ data }) => {
      data.forEach(crud => {
        this.cruds.push(new Crud(crud));
      });
    });
  },
},
...
created() {
  this.read();
}

Примечание. Нам нужно заставить читать Способ программно, когда приложение нагрузки. Мы делаем это из Создано Крюк, который работает, но не очень эффективен. Было бы намного лучше избавиться от читать Способ в целом и просто включить начальное состояние приложения, свернутое в головку документа, когда первые нагрузки. Я обсуждаю этот рисунок дизайна в глубине статьи Избегайте этого общего анти-образного узора в Pull-Stage Vue/Laravel Apps Если вы хотите реализовать его.

С помощью этого, теперь мы можем увидеть, что в нашем приложении вы сможете увидеть грудисты, отображаемые в нашем приложении.

Обновление (и состояние синхронизации)

Обновить Действие требует от нас, чтобы отправить форму данных, то есть цвет Таким образом, контроллер знает, что обновить. Идентификатор CRUD приведен в конечной точке.

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

В случае Обновить Метод, мы могли бы обновить объект CRUD в приложении Frontend мгновенно до того, как вызов AJAX сделан, поскольку мы уже знаем новое состояние.

Однако мы не выполняем это обновление до завершения вызова AJAX. Почему? Причина в том, что действие может потерпеть неудачу по какой-то причине: подключение к Интернету может упасть, обновленное значение может быть отклонено базой данных или какой-либо другой причиной.

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

Ресурсы/Активы/JS/Компоненты/App.vue

methods: {
  read() {
    ...
  },
  update(id, color) {
    window.axios.put(`/api/cruds/${id}`, { color }).then(() => {
      // Once AJAX resolves we can update the Crud with the new color
      this.cruds.find(crud => crud.id === id).color = color;
    });
  },
  ...
}

Вы можете поспорить свой плохой ux, чтобы дождаться, пока Ajax будет разрешаться, прежде чем показывать измененные данные, когда вам не нужно, но я думаю, что это намного хуже, чтобы ввести в заблуждение пользователя, думая, что изменение сделано, когда на самом деле мы не «Уверен, если это сделано или нет.

Создать и удалять

Теперь, когда вы понимаете ключевые моменты архитектуры, вы сможете понять эти последние две операции без моего комментариев:

Ресурсы/Активы/JS/Компоненты/App.vue

methods: {
  read() {
    ...
  },
  update(id, color) {
    ...
  },
  create() {
    window.axios.get('/api/cruds/create').then(({ data }) => {
      this.cruds.push(new Crud(data));
    });
  },
  del(id) {
    window.axios.delete(`/api/cruds/${id}`).then(() => {
      let index = this.cruds.findIndex(crud => crud.id === id);
      this.cruds.splice(index, 1);
    });
  }
}

Индикатор загрузки и отключение взаимодействия

Как вы знаете, наши трудные операции являются асинхронными, и поэтому есть небольшая задержка, пока мы ждем вызова AJAX для достижения сервера для ответа сервера и для получения ответа.

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

Есть несколько хороших плагинов для состояния Loading Vue.js, но я просто собираюсь сделать что-то быстрое и грязное здесь: пока Ajax продолжается, я накладку на полный экран, полупрозрачный Div над вершиной приложения. Это убьет как упомянутых птиц с одним камнем.

Ресурсы/Просмотры/index.blade.php

Для этого мы перевернум стоимость логического немой От false to true, когда ajax проводится, и используйте это значение, чтобы показать/скрыть Div Отказ

Ресурсы/Активы/JS/Компоненты/App.vue

export default {
  data() {
    return {
      cruds: [],
      mute: false
    }
  },
  ...
}

Вот как мы реализуем переключение немой В Обновить метод. Когда метод называется, немой установлен на правду. Когда обещание решает, ajax делается так, чтобы пользователь был в безопасности, чтобы пользователю снова взаимодействовать с приложением, поэтому мы устанавливаем немой Вернуться к ложе.

Ресурсы/Активы/JS/Компоненты/App.vue

update(id, color) {
  this.mute = true;
  window.axios.put(`/api/cruds/${id}`, { color }).then(() => {
    this.cruds.find(crud => crud.id === id).color = color;
    this.mute = false;
  });
},

Вам нужно будет реализовать одно и то же в каждом из методов CRUD, но я не покажу, что здесь для краткости.

Чтобы сделать нашу нагрузку на индикатор нагрузки и CSS, мы добавляем элемент

Как вы можете видеть из встроенного стиля, когда класс на добавляется в

Ресурсы/Просмотры/index.blade.php

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

export default {
  ...
   watch: {
    mute(val) {
      document.getElementById('mute').className = val ? "on" : "";
    }
  }
}

С этим сделанным, у вас сейчас есть работающий полный All-Stage Vue/Laravel Crud Crud Crud с индикатором загрузки. Вот снова в полной мере:

Не забудьте схватить код В этом Github Repo И оставьте мне комментарий, если у вас есть мысли или вопросы!

Стать старшим Vue Developer в 2020 году.

Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.

Учить больше