Эй, ребята! Я надеюсь, что у вас все хорошо, у меня тоже все хорошо, и вот уже несколько месяцев я изучаю React Js. Несколько дней назад один из моих братьев Биджая написал статью о создании динамического компонента с данными с использованием Laravel и Vue Js. Теперь я хочу сделать ту же реализацию, используя Laravel и React Js. Посмотрим, как пойдет.
TL; DR: шаги по созданию динамической таблицы данных с использованием React и Laravel. В этой статье есть фрагмент кода и некоторые пояснения. А демонстрационное приложение можно найти здесь с инструкциями по установке.
Требования:
1. Laravel 5.5+
2. React Js.
Давайте создадим проект Laravel и установим переменные среды и базу данных, изменим файл миграции пользователей, поскольку мы собираемся создать таблицу данных для записей пользователей.
Запустите миграцию с помощью команды: php artisan migrate, которая запускает миграцию для проекта, и в нашей базе данных создается таблица новых пользователей.
Модель пользователя уже существует в Laravel, просто обновите заполняемые поля, поскольку мы добавляем поле адреса в таблицу пользователей.
protected $fillable = ['name', 'email', 'password', 'address'];
Мы создадим, добавив маршрут. Итак, внутри routes/api.php добавьте новый маршрут с запросом на получение:
$this->get('users', 'UsersController@index')->name('users');
Теперь нам нужно создать контроллер, используя commandphp artisan make:controller UserController в методе индекса, чтобы получать разбитые на страницы записи пользователей и возвращать их в формате JSON. Этот контроллер создается внутри app / Http / Контроллеры вносят следующие изменения.
Здесь мы видим, что класс UsersResource используется там, но мы еще не создали его. Классы ресурсов Laravel позволяют легко и выразительно преобразовывать ваши модели и коллекции моделей в JSON. Так что поторопись! Выполните команду php artisan make:resource UserResource Этот класс будет создан внутри app / Http / Resources. Добавьте следующий код в метод toArray, который будет возвращать только поля id, name, email, address и created_at пользователей из API.
Наш API списка пользователей завершен, но мы не добавляем никаких данных в таблицу пользователей, так что давайте сделаем это тоже. Чтобы вставить случайные данные пользователей, сейчас мы можем внести изменения в класс database / factory / UserFactory.php. Следующий метод полезен для генерации случайных данных пользователей с помощью библиотеки Faker.
И создайте файл сидера с помощью команды php artisan make:seed UsersTableSeeder , которая создаст файл UsersTableSeeder.php внутри каталога database / seed. Метод внутреннего запуска добавляет следующее, которое может генерировать 50 случайных пользователей.
factory(App\User::class, 50)->create()
Давайте вставим эти случайные данные 50 пользователей с помощью команды php artisan db:seed.
Запустите свой проект Laravel в локальной среде и откройте свое приложение в любимом браузере, например
Http: //yourappurl.local/api/users/? Per_page = 2 & column = name & order = desc
Вы можете увидеть следующие результаты:
ОК, круто! API листинга серверной части завершен, теперь перейдем к части интерфейса.
Мы собираемся использовать React Js, поэтому сначала сгенерируйте предустановку реакции в проекте Laravel с помощью команды php artisan preset react, которая по умолчанию сгенерирует основу для архитектуры запуска реакции. Давайте создадим файл ReactDataTableApp.js в resources / js, который выглядит следующим образом.
Мы используем компонент DataTable в указанном выше компоненте и передаем URL-адрес реквизита и столбцы, чтобы сделать компонент DataTable динамическим. Итак, давайте создадим файл DataTable.js внутри resources / js / components, который выглядит следующим образом.
Я хочу немного объяснить компонент DataTable. В приведенном выше коде вы можете видеть, что мы инициализируем данные сущностей состояний, и метаинформация будет установлена в состоянии после извлечения данных из API извлечения любой сущности. Для получения данных из API мы используем axios, который определен в файле resources / js / bootstrap.js. Список объектов доступен в this.state.entities.data, а метаинформация для разбивки на страницы и вызовов API находится в this.state.entities.meta. Это список записей сущности, выполненный с разбивкой на страницы. Также мы можем сделать отдельный компонент Pagination и использовать его для нескольких таблиц.
Импортируйте компонент ReactDataTableApp в resources / js / app.js и отобразите этот компонент в файле welcome.blade.php, в котором атрибут datatable id определен в разметке.
А в файле welcome.blade.php просто укажите ссылку на файл js и файл css с соответствующим идентификатором примерно так.
Теперь давайте запустим ваше приложение и посмотрим в браузере. Надеюсь, вы не забыли запустить npm i и npm run dev . Откройте свое приложение в своем любимом браузере, и вы увидите в нем динамические данные.
Да, это все, что касается этого поста, мы создали динамическую базу данных с использованием Laravel и React Js. Вот репозиторий Github. Если у вас есть какие-либо вопросы или предложения по этому поводу, не стесняйтесь добавлять их в раздел комментариев. Мне всегда нравятся твои ответы. Спасибо! До свидания!
