Компоненты - одна из самых мощных функций Vue. Они помогают расширить базовые элементы HTML для инкапсуляции кода многократного использования. На высоком уровне компоненты - это настраиваемые элементы, к которым компилятор Vue прикрепляет поведение.
В этой статье я собираюсь описать, как мы можем создать компонент нумерации страниц с помощью Laravel5.3 и Vue js 2. Приступим.
Сначала загрузите приложение Fresh Laravel, создайте базу данных в mysql и отредактируйте учетные данные базы данных в файле .env, затем перейдите в каталог проекта с помощью командной строки, запустите файлы миграции с помощью команды php artisan migrate.
Теперь база данных создана, и таблица пользователей также создана, давайте запустим команду php artisan tinker и factory ('App \ User', 100) - >Создайте(); это сгенерирует 100 случайных записей для таблицы пользователей. Теперь мы разберем эти 100 записей таблицы пользователей.
Хорошо, создайте два маршрута внутри routes / web.php
В вышеупомянутых маршрутах первый полезен для возврата записей пользователей в формате json, второй отправляет в файл представления индекса пользователей.
Давайте создадим один UserApiController внутри каталога Controllers / API и добавим метод индекса для возврата записей пользователей, разбитых на страницы.
Чтобы просмотреть записи с разбивкой на страницы, просто нажмите URL-адрес http: // yourbaseurl / user / api? Page = 1, и вы увидите что-то вроде этих данных в формате json.
Давайте создадим UserController, создадим функцию index, а затем вернемся в представление users / index.blade.php.
Каталог внутренних представлений создайте один каталог макетов и создайте файл app.blade.php для главного шаблона. Который содержит ссылки css и javascript.
Мастер-файл готов, так что пришло время создать файл index.blade.php внутри представлений / пользователей, и файл должен быть таким.
В этом файле index.blade.php вы можете увидеть одну таблицу со столбцами name, email и created_at, записи пользователей берутся из базы данных. Сначала мы извлекаем эти данные с помощью ajax и назначаем эти записи переменной пользователя в основном экземпляре vue.
Laravel5.3 уже настроил среду vue js, вам просто нужно npm install и запустить gulp. Давайте создадим файл pagination.vue внутри resources / assets / js / components, и файл будет содержать следующий код. После изменения страницы он изменяет значение current_page и отправляет событие paginate родительскому компоненту.
Теперь создайте assets / js / app.js, в котором находится основной экземпляр Vue, импортируйте компонент VuePagination из ./components/Pagination.vue и определите его в разделе компонентов экземпляра Vue. Чтобы получить записи из базы данных, мы можем использовать axios, это HTTP-клиент на основе Promise для браузера и node.js. Файл app.js выглядит так:
В gulpfile.js просто используйте webpack для компиляции файла javascript
Запустите gulp, он может сработать, и будет создан компонент разбивки на страницы, который можно повторно использовать для всего вашего приложения. Вот слушатель разбиения на страницы, когда компонент разбиения на страницы генерирует событие разбиения на страницы, тогда будет вызван метод getUsers (). Для этого вы можете использовать вот так
Здесь метод getUsers находится в основном экземпляре vue, если мы создаем другую разбивку на страницы для другой таблицы, мы должны создать отдельный экземпляр vue, но мы можем использовать тот же компонент, метод getUsers также может отличаться.
Теперь запустите свой проект laravel и посмотрите в браузере, результат такой:
Если вы хотите, чтобы функции многократного использования также извлекали данные, вы можете использовать миксины в vue js, что почти так же, как trait в php.
Вот ссылка на github для разбивки на страницы записей пользователей. Спасибо !
Ссылки
