Интеграция Laravel 5.5 с React JS

Многим разработчикам Laravel интересно как иcпользовать ReactJs в качестве библиотеки для frontend задач. Также frontend разработчикам интересно как интегрировать из приложение в Laravel. Пройдем путь от установки чистой версии фреймворка до полноценной рабочей версии.

  1. Как подключить API Laravel к ReactJS
  2. Структуру проекта Laravel и ReactJS.
  3. Как использовать Laravel Mix для создания ReactJS Scaffold.

Шаг 1: Установка Laravel

Ну первым шагом нам нужно установить Laravel:

Затем после установки нам нужно запустить команду:

После завершения установки нам нужно установить зависимости JavaScript для нашего проекта. Файл package.json существует, поэтому нам просто нужно ввести следующую команду для получения зависимостей NPM.

Подключаемся к БД

И запускаем миграции

Шаг 2: Установка ReactJS в качестве Frontend для бэкэнда Laravel.

Как мы уже говорили ранее, введите следующую команду для React Preset.

В терминале вы должны увидеть следующее:

Затем переходим в каталог.
ReactJSLaravelTutorial >> resources >> assets >> js .

Папка содержит следующее:

  • каталог компонентов
  • файл app.js — точка входа в приложение
  • файл bootstrap.js

В папке resources > views > есть файл welcome.blade.php в который мы должны добавить следующий код

И запустим следующие комманды

В результате должен заработать локальный север по адресу http://localhost:8080

И после перехода на него мы увидем следующее:


Шаг 3: Установим некоторые зависимости, касающиеся reactjs.

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

Для лучшего удобства я установил старую версию react-router. Затем запустите в терминале следующую команду.

Команда будет следить за изменениями в папке с ресурсами и автоматически перекомпилировать их в javascript.

Далее создаем структуру проекта для наших нужд.

Сначала скопируйте следующий код и вставьте его в файл App.js.

Затем изменяем Example.js

После сохранения файла, Laravel Mix перекомпилирует все наши компоненты и создаст пакетный файл app.js.

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

Теперь нам нужно создать еще один компонент под именем Master.js внутри папки компонентов.

Теперь измените файл app.js и поместите этот компонент в качестве корневого компонента.


Шаг 4: Конфигурация React-router

Создадим еще 3 компонента в папке components

  1. CreateItem.js
  2. DisplayItem.js
  3. EditItem.js

и добавим его в App.js

Если вы все сделали правильно и сохраните файл, Laravel Mix перекомпилирует его, и если вы еще не запустили сервер разработки Laravel, пожалуйста, запустите его с помощью php artisan serve

И после того как зайдем на страницу увидем следующее:

и при переходе на http://localhost:8000/add-item

Другие компоненты мы опишем позднее.


Шаг 5: Используйте axios для отправки AJAX запроса на сервер разработки Laravel 5.5.

Добавьте события, чтобы получить данные из формы и отправить запрос на сервер.

И так мы можем отправлять запрос на наш сервер, но у нас еще нет ни моделей ни путей для приема запроса.


Шаг 6: Конфигурируем наш backend

Следующим шагом будет переход от ReactJS к Laravel и создание бэкэнда для нашего проекта. Мы будем использовать web routes для этого проекта, поэтому нам нужно поместить все наши маршруты в routes >> web.php файл.

Мы будем выполнять операции CRUD c данной сущностью. Итак, сначала давайте определим схему для нее. Затем создадим контроллер и маршруты.

Команда создаст два файла.

  • Файл модели.
  • Файл миграции.

Перейдите к файлу миграции database >> migrations >> create_items_table и скопируйте в него следующий код.

И после етого запустите комманду  php artisan migrate

Он создает таблицу Item в базе данных.

Теперь нам нужен контроллер:

ItemController содержит все функции для CRUD-операций. Нам просто нужно добавить в него код.

Нам также необходимо создать защищенное поле $ fillable в файле Item.php, иначе будет получим исключение ‘mass assignment exception‘ .

И добавим путь к нашему ресурсу в routes

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

Возможные ошибки: XMLHttpRequest не может загрузить http: //localhost:8000/items. В запрошенном ресурсе нет заголовка «Access-Control-Allow-Origin». Потому что исходный адрес http://localhost:3000. В ответе код статуса HTTP 500.

Эта ошибка вызвана CORS безопасностью. Когда браузер отправляет запрос другому домену, тот по умолчанию отклоняет запрос.

Варианты решения

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

Загрузите пакет CORS для Laravel, чтобы избежать проблемы.

Добавьте Cors \ ServiceProvider в массив serviceProviders в config / app.php

Чтобы разрешить CORS для всех маршрутов, добавьте HandleCors в свойство $middleware класса app / Http / Kernel.php:

Вы можете опубликовать конфигурацию, используя следующую команду:

Теперь попробуйте еще раз, сохранить данные в базе. Я не установил перенаправление после сохранения данных.

Шаг 7. Отображение данных в ReactJS Frontend

Сделайте компонент DisplayItem.js внутри папки компонентов.

Теперь сделайте компонент TableRow.js.

Зарегистрируйте этот маршрут в нашем приложении.

После сохранения данных нам нужно перенаправить пользователя на другой адерс. Поэтому в файле CreateItem.js нам нужно немного изменить код.

Шаг 8: Редактирование и обновление данных.

Сделайте компонент EditItem.js внутри папки компонентов.

Теперь зарегистрируйте этот маршрут в файле app.js.

И также обновим TableRow.js

Шаг 9: Удаление данных.

Исходный код на GitHub https://github.com/KrunalLathiya/ReactJSLaravel5.5

Leave a Reply

Добавить комментарий