Статьи

Избегайте этого распространенного анти-паттерна в приложениях Full-Stack Vue / Laravel

Если вы хотите, чтобы ваше одностраничное приложение Vue.js связывалось с бэкэндом Laravel , вы вполне разумно подумаете об использовании AJAX. Действительно, Laravel поставляется с библиотекой Axios, загруженной по умолчанию.

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

Я вижу много приложений с полным стеком Vue / Laravel, созданных таким образом. Альтернативой этому анти-шаблону является введение начального состояния приложения в заголовок HTML-страницы, чтобы оно было доступно приложению, как только оно понадобится. Затем AJAX можно использовать более подходящим образом для последующих выборок данных.

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

Как вы вскоре увидите, созданный мной пример приложения интерактивнее на 25% быстрее при реализации этого шаблона проектирования.


Вам также может понравиться:
Восемь самых больших ошибок разработки Laravel, которых вы можете легко избежать .

Передача данных в Vue из Laravel

Вот пример полнофункционального приложения Vue / Laravel, которое я создал для Oldtime Cars, вымышленного продавца старинных автомобилей. Приложение имеет титульную страницу, которая показывает доступные автомобили, и общую страницу с подробностями, которая показывает специфику конкретной модели.

Передача данных между клиентом и сервером

Передача данных между клиентом и сервером

Это приложение использует Vue Router для обработки навигации по страницам. Каждая страница нуждается в данных из бэкэнда (например, название модели автомобиля, цена и т. Д.), Поэтому требуется механизм для передачи их между Vue и Laravel. Стандартный шаблон проектирования — это настройка конечных точек API для каждой страницы в Laravel, а затем использование beforeRouteEnterловушки Vue Router для асинхронной загрузки данных через AJAX перед переходом страницы.

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

рабочий процесс beforeRouterEnter

рабочий процесс beforeRouterEnter

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

Ввод начального состояния приложения

Если мы введем начальное состояние приложения в HTML-страницу, Vue Router не потребуется запрашивать его с сервера, поскольку он уже будет доступен на клиенте.

Мы можем реализовать это путем JSON-кодирования состояния на стороне сервера и присвоения его глобальной переменной:

index.html


HTML