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

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

Статья была отправлена профессиональному сообществу разработчиков Laravel с оригинальной ссылкой: https://learnku.com/ларавель/т…

Мы покажем вам, как vue-маршрутизатор Введите маршрут до Как продолжить использование асинхронно загруженных данных Ларавель Постройте наш Vue SPA 。

Ранее было завершено создание одностраничного приложения Vue с помощью Laravel (2) Пользователи индексируют Компоненты асинхронно следуют API Загружают пользователей. Упростите создание реального бэкэнда из базы данных API Выберите для передачи Laravel Из фабрики() Метод в API В ответ имитируются ложные данные.

Если вы еще не дочитали до конца Laravel структура Vue В первой и второй частях одностраничного приложения я предлагаю вам сначала зайти и вернуться сюда. Я буду ждать тебя здесь.

В этом уроке мы смоделируем это. /пользователи Верните и замените его реальной поддержкой базы данных. Я к этому привык. MySQL Но вы можете использовать любой драйвер базы данных, какой захотите!

Индекс пользователей.vue Компонент маршрутизации в жизненном цикле создан() Пройти через API Загрузить данные. Вот и конец второй части fetchData() Примеры методов:

created() {
    this.fetchData();
},
methods: {
    fetchData() {
        this.error = this.users = null;
        this.loading = true;
        axios
            .get('/api/users')
            .then(response => {
                this.loading = false;
                this.users = response.data;
            }).catch(error => {
                this.loading = false;
                this.error = error.response.data.message || error.message;
            });
    }
}

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

Создайте реальную конечную точку пользователя

Мы создадим Пользовательский контроллер Используйте новые ресурсы API Laravel 5.5 для возврата данных JSON.

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

Заполнение Пользовательских Данных

Мы используем команду make:seeder для создания пользовательского заполнения:

php artisan make:seeder UsersTableSeeder

UsersTableSeeder Очень просто. Мы использовали фабрику моделей для создания 50 пользователей:

create();
    }
}

Далее мы будем UsersTableSeeder Добавление database/seeds/DatabaseSeeder.php В документе:

call([
            UsersTableSeeder::class,
        ]);
    }
}

Если мы сначала не создадим и не настроим базу данных, мы не сможем заполнить ее данными.

Настройка базы данных

Пришло время подключить наше приложение Vue SPA Laravel к реальной базе данных. Вы можете использовать SQLite или MySQL с помощью графических инструментов, таких как Table Plus. Если вы новичок в Laravel, вы можете ознакомиться со множеством документов по введению в базы данных.

Если на вашем устройстве запущен экземпляр MySQL, вы можете довольно быстро создать новую базу данных, используя следующую командную строку (при условии, что в вашей локальной среде нет пароля).:

mysql -u root -e"create database vue_spa;"

# Or enter the password with the - P parameter
mysql -u root -e"create database vue_spa;" -p

Когда у вас есть база данных, в .env Конфигурация добавления файла DB_DATABASE= vue_spa 。 Если у вас возникнут проблемы, следуйте документации, чтобы ваша база данных могла работать проще.

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

# Ensure that database seeders are loaded automatically
composer dump-autoload
php artisan migrate:fresh --seed

Если вы хотите, вы также можете использовать отдельные. база данных ремесленников:семена Заказ! Вот так; у вас должна быть база данных из 50 пользователей, которую мы можем запрашивать и возвращать через api.

Контроллер пользователей

Глава 2, Имитация /пользователи В маршруты/В маршруты/

Route::get('/users', function () {
    return factory('App\User', 10)->make();
});

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

php artisan make:controller Api/UsersController
php artisan make:resource UserResource

Первый порядок: приложение/Http/Контроллеры/Api Создать каталог Пользователь Контроллер, вторая команда приложение/Http/Ресурсы Создать в каталоге Пользовательский ресурс 。

Следующие контроллеры и Api Новое соответствие пространству имен routes/api.php Код:

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

Управление простое; возвращайте разбитый на страницы Красноречивый API :

Вот один JSON Примеры ответов и предыдущий Пользовательский ресурс Из API Формат аналогичен:

{
   "data":[
      {
         "name":"Francis Marquardt",
         "email":"[email protected]"
      },
      {
         "name":"Dr. Florine Beatty",
         "email":"[email protected]"
      },
      ...
   ],
   "links":{
      "first":"http:\/\/vue-router.test\/api\/users?page=1",
      "last":"http:\/\/vue-router.test\/api\/users?page=5",
      "prev":null,
      "next":"http:\/\/vue-router.test\/api\/users?page=2"
   },
   "meta":{
      "current_page":1,
      "from":1,
      "last_page":5,
      "path":"http:\/\/vue-router.test\/api\/users",
      "per_page":10,
      "to":10,
      "total":50
   }
}

Это потрясающе. Ларавель Данные подкачки добавляются автоматически, и информация о пользователе присваивается данным Атрибут!

Ниже приведен Пользовательский ресурс Класс:

 $this->name,
            'email' => $this->email,
        ];
    }
}

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

К настоящему времени у тебя уже должен быть один. /api/пользователи Интерфейсы можно использовать в одностраничных приложениях, и если вы продолжите их просматривать, то заметите, что новые возвраты не удовлетворяют текущим компонентам.

Измените компонент Индекса пользователей

Мы можем это исправить. затем() Чтобы вызвать пользовательские данные данные Клавиатуру, давайте сделаем это быстро. UsersIndex.vue Доработка компонентов. Сначала это выглядело немного по-новому, но response.data Это объект ответа, поэтому мы можем задать пользовательские данные таким образом:

this.users = response.data.data;

fetchData() В связи с новым API вносятся следующие изменения:

fetchData() {
    this.error = this.users = null;
    this.loading = true;
    axios
        .get('/api/users')
        .then(response => {
            this.loading = false;
            this.users = response.data.data;
        }).catch(error => {
            this.loading = false;
            this.error = error.response.data.message || error.message;
        });
}

Считывание данных перед навигацией

Наши компоненты работают через наш новый API, и теперь мы демонстрируем, как перейти к компонентам. до Идеальное время для получения информации о пользователе. Используя этот метод, мы можем получить данные. после Перейдите к новому маршруту. Мы можем это использовать. перед Входом в Маршрут Защита реализуется перед входом в компонент. Пример документа маршрутизации Vue выглядит следующим образом:

beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },

Есть полные примеры консультационных документов, но только в том случае, если мы скажем, что будем получать пользовательские данные асинхронно, и мы запустим их только после того, как закончим. далее( ) И установка данных (переменных) в компонентах vm )

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

Ниже приведен getUsers Функции могут выглядеть как асинхронная выборка пользователей из API, а затем запуск обратных вызовов компонентов:

const getUsers = (page, callback) => {
    const params = { page };

    axios
        .get('/api/users', { params })
        .then(response => {
            callback(null, response.data);
        }).catch(error => {
            callback(error, error.response.data);
        });
};

Обратите внимание, что этот метод не возвращает обещание, но запускает обратный вызов, когда он завершается или завершается неудачно. Обратный вызов передает два параметра: ошибку и ответ на вызов API.

Наш getUsers() Прием метода ___________ метод страница Переменная, которая в конечном итоге появляется в запросе в качестве параметра строки запроса. Если он пуст (номер страницы в маршрутизации не передается), API по умолчанию будет иметь значение страница=1 .

Наконец, я хотел бы отметить, что постоянные параметры Значение. На самом деле это так:

{
    params: {
        page: 1
    }
}

Вот наш перед входом в маршрут Как пользоваться охранниками getUsers Функция для получения асинхронных данных и вызова компонента next() Настройте его:

beforeRouteEnter (to, from, next) {
    const params = {
        page: to.query.page
    };

    getUsers(to.query.page, (err, data) => {
        next(vm => vm.setData(err, data));
    });
},

Это происходит после того, как данные возвращаются из API. Получатели() Вызов обратный вызов Параметры:

(err, data) => {
    next(vm => vm.setData(err, data));
}

Затем, когда API успешно ответит, get Users() Таким образом:

callback(null, response.data);

перед Обновлением Маршрута

Когда компонент уже отрисован и маршрут изменяется, он вызывается перед обновлением маршрута И Vue повторно использует компоненты в новой маршрутизации. Например, когда наши пользователи из /пользователи?страница=2 Перейти к /пользователи?страница=3 。

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

// When the routing changes and the component has been rendered,
// Logic will be slightly different.
beforeRouteUpdate (to, from, next) {
    this.users = this.links = this.meta = null
    getUsers(to.query.page, (err, data) => {
        this.setData(err, data);
        next();
    });
},

Поскольку компоненты визуализируются, нам необходимо сбросить некоторые атрибуты данных, прежде чем извлекать следующий набор пользователей из API. Мы можем получить доступ к компонентам. Итак, мы можем позвонить ему первыми. this.setData() (Я вам еще не показывал), а затем позвоните без обратного вызова далее() 。

Наконец, это находится в индексе Пользователей Компоненте setData Методе:

setData(err, { data: users, links, meta }) {
    if (err) {
        this.error = err.toString();
    } else {
        this.users = users;
        this.links = links;
        this.meta = meta;
    }
},

setData() Метод получается с помощью деструктора объекта. данные , связи Сумма мета Ключ приходит из ответа API. Мы используем его четко. данные: пользователи Воля данные Присвоение новым переменным пользователи 。

Объедините Индекс Пользователей Вместе

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

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

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

Если это легче понять, вот Индекс пользователей. Vue как суть GitHub.

Здесь много нового, поэтому я отмечу еще несколько важных моментов. Метод getnext() и getprev() демонстрирует, как использовать навигацию vue-маршрутизатор Используйте this.$router.push :

this.$router.push({
    query: {
        page: `${this.nextPage}`,
    },
});

Мы помещаем новую страницу в инициированную строку запроса перед обновлением маршрута 。 Я также хотел бы отметить, что я покажу вам <кнопка> Элементы предыдущего и следующего действий в основном предназначены для демонстрации процесса навигации программно. vue-маршрутизатор Вы, вероятно, будете использовать его /> />

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

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

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

Не забудьте убедиться, что вы создали последнюю версию JavaScript, запустив Laravel Mix:

# NPM
npm run dev

# Watch to update automatically while developing
npm run watch

# Yarn
yarn dev

# Watch to update automatically while developing
yarn watch

Наконец, это наше обновление. Индекс пользователей.vue

Каков следующий шаг?

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

Далее мы сосредоточимся на создании, редактировании и удалении пользователей. Один /пользователи Ресурсы будут заблокированы в реальном приложении, но на данный момент мы просто создаем возможности CRUD, чтобы научиться работать с vue-маршрутизатором , Используемым совместно для асинхронной навигации и извлечения данных.

Мы также можем абстрагировать клиентский код Axios от компонентов, но теперь это просто, поэтому мы сохраняем его в компонентах до части 4. Как только будут добавлены дополнительные функции API, мы захотим создать специальный клиентский модуль HTTP.

Вы можете продолжить Часть 4 – Редактирование существующих пользователей