Рубрики
Uncategorized

Создайте одностраничное приложение Vue с помощью laravel (5)

Автор оригинала: David Wong.

Статья была переслана из профессионального сообщества разработчиков laravel. Оригинальная ссылка: https://learnku.com/laravel/t

В части 4 мы закончили редактирование пользователей и узнали, как их использовать v-модель Чтобы отслеживать изменения в информации о пользователе в компоненте просмотра. Теперь мы можем начать думать о том, как удалить пользовательскую функцию и как с ней бороться после успешного удаления Пользовательский интерфейс Изменение.

В этом процессе мы рассмотрим возможность создания Axios Экземпляр клиента, чтобы мы могли настроить API Большая гибкость на стороне клиента.

Чтобы обновить API, Добавьте и удалите пользователя особенности

Первое, что нам нужно сделать, это определить маршрут API . Выгода от Ларавель Нам нужно только Пользовательский контроллер Добавьте несколько строк кода для удаления одного пользователя:

public function destroy(User $user)
{
    $user->delete();

    return response(null, 204);
}

Далее вам нужно маршруты/api. php Документация Api Определите новый маршрут в нижней части группы маршрутизации.

Route::namespace('Api')->group(function () {
    Route::get('/users', '[email protected]');
    Route::get('/users/{user}', '[email protected]');
    Route::put('/users/{user}', '[email protected]');
    Route::delete('/users/{user}', '[email protected]');
});

Удаление пользователей на интерфейсе

Мы будем редактировать Пользователи редактируют.vue Компонент, в Обновление Добавьте новый под кнопкой Удалить Режим кнопки, чтобы /пользователи/:идентификатор/редактировать Добавьте функцию удаления в компонент просмотра.

Мы из Обновить Кнопка “Копировать” : отключено Атрибут для Удаления Кнопка для предотвращения случайного обновления или удаления при выполнении операции.

Далее мы Удалим Привязка к кнопке OnDelete() Обратный вызов для удаления пользователя.

onDelete() {
  this.saving = true;

  api.delete(this.user.id)
     .then((response) => {
        console.log(response);
     });
}

Мы API Вызов клиента удалить() Метод, а затем свяжите функцию обратного вызова, чтобы отменить регистрацию объекта ответа в консоли. Если вы нажмете кнопку удалить, кнопки обновить и удалить будут отключены, потому что в настоящее время мы установили это это.сохранение Мы обсудим это через минуту. Если вы включите консоль, вы увидите сообщение 204 Нет Содержимое , которое указывает на то, что удаление было успешным.

Как дать соответствующий отзыв об успешном удалении пользователей

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

В нашем СПА В одностраничном приложении мы также можем программно переходить от пользователей к /пользователям Страница для достижения этой цели:

this.$router.push({ name: 'users.index' })

Применить в нашем событии удаления this.$router.push() Функция, событие удаления исходной версии должно выглядеть следующим образом:

onDelete() {
  this.saving = true;
  api.delete(this.user.id)
     .then((response) => {
        this.$router.push({ name: 'users.index' });
     });
}

Если вы обновите приложение и удалите пользователя, вы заметите короткое мигание кнопки “Отключить”, после чего браузер перейдет к без какой-либо обратной связи /пользователи Страница.

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

onDelete() {
  this.saving = true;
  api.delete(this.user.id)
     .then((response) => {
        this.message = 'User Deleted';
        setTimeout(() => this.$router.push({ name: 'users.index' }), 2000);
     });
}

Приведенный выше код задает this.message Свойства данных и переход к /пользователям Подождите 2 секунды перед страницей.

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

404

Возможно, вы заметили, что даже наши Vue Маршрутизация и /пользователи/:идентификатор/редактировать Шаблон совпадает, но когда идентификатор пользователя не существует, мы все равно можем получить 404 Ответ.

Используйте серверную часть Laravel Применение, мы можем легко ModelNotFoundException Сделать один 404.blade.php 。 Однако СПА Это немного по-другому. Приведенный выше маршрут действителен, поэтому нам нужен рендеринг нашего компонента ошибка Компонент или перенаправить пользователя на выделенный маршрут 404.

Мы будем resources/assets/js/app.js в Vue В конфигурацию маршрута добавлены некоторые новые маршруты. Эти маршруты обеспечивают специальное представление 404 и могут перенаправлять все несопоставимые маршруты на 404 маршрута Универсальная маршрутизация :

{ path: '/404', name: '404', component: NotFound },
{ path: '*', redirect: '/404' },

Мы будем ресурсы/активы/js/просмотры/Не найдено.vue Создайте простой Не найдено Компоненты:

Потому что на заднем конце Laravel В программе есть универсальный маршрут, а это значит, что интерфейсу также нужен такой универсальный маршрут. Если путь доступа не соответствует определенному маршруту, в качестве ответа будет использована страница 404. Вот фоновый маршрут для обновления, который захватывает всю информацию о маршруте и отображает SPA Шаблон:

Route::get('/{any}', '[email protected]')
    ->where('any', '.*');

Если вы указали неверный URL Например /не существует , вы увидите что-то вроде этого:

Vue Маршрутизатор запускает перенаправление браузера на /404 Правила маршрутизации с подстановочными знаками для.

В примере с недопустимым идентификатором пользователя, о котором мы упоминали ранее, установленные нами правила по-прежнему не работают должным образом, поскольку технически этот маршрут эффективен. Для того, чтобы захватить создать() Нам нужно обновить информацию о неудачном запросе в обратном вызове и перенаправить запрос пользователя на маршрут 404 Пользователи редактируют :

created() {
  api.find(this.$route.params.id)
     .then((response) => {
         this.loaded = true;
         this.user = response.data.data;
     })
     .catch((err) => {
       this.$router.push({ name: '404' });
     });
}

Теперь, если вы перейдете непосредственно в /пользователи/2000/редактировать Если такой URI делает запрос, вы должны увидеть, что приложение перенаправляет на страницу 404 вместо того, чтобы зависать на Редактирование пользователей На “погрузке…” Пользовательский интерфейс компонента.

Параметры клиента API

Несмотря на нашу самоотверженность users.js В небольших приложениях HTTP-клиент может показаться немного суетливым. Я думаю, что разделение предоставило нам хороший сервис, потому что мы используем модули API в нескольких компонентах. Если вы хотите знать все подробности, которые предоставляют гибкие клиенты, я подробно обсудил эту идею в своей статье “Создание гибких клиентов Axios”. Без изменения внешнего API клиента мы можем изменить способ работы клиента в фоновом режиме. Например, мы можем создать экземпляр клиента Axios с пользовательской конфигурацией и значениями по умолчанию:

import axios from 'axios';

const client = axios.create({
  baseURL: '/api',
});

export default {
  all(params) {
    return client.get('users', params);
  },
  find(id) {
    return client.get(`users/${id}`);
  },
  update(id, data) {
    return client.put(`users/${id}`, data);
  },
  delete(id) {
    return client.delete(`users/${id}`);
  },
};

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

Что будет дальше

Мы узнали, как удалять пользователей в интерфейсе через маршрутизатор Vue и реагировать на успешное удаление. Мы проходим app.js Использование в документах vue.использование(маршрутизатор vue) Зарегистрируйте маршрутизатор Vue и введите свойство this.$router .

Затем мы перейдем к созданию создания пользователя, чтобы кратко описать, как выполнять базовое создание, чтение, обновление и удаление( CRUD Операция. На данный момент у вас должны быть все инструменты, необходимые для завершения создания новых пользователей, поэтому вы можете попытаться создать эту функцию до публикации следующей статьи из этой серии.

Когда вы будете готовы, просмотрите часть 6 – создание нового пользователя

Читайте ещё по теме: