От автора: здравствуйте, дорогие читатели! Так сложилось, что в данное время очень большую популярность набрала и продолжает набирать разработка front-end. А значит, back-end разработчикам так или иначе необходимо вникать в указанную технологию. Ведь очень часто оба подхода работают в паре, в результате чего практически все современные фреймворки содержат в комплекте определенные инструменты для работы с front-end приложениями: к примеру, сборщики проектов, различные библиотеки и даже полноценные фреймворки.
В этом смысле один из наиболее популярных фреймворков во всем мире — Laravel — не стал исключением, он тоже содержит определенный набор указанных инструментов. Для успешной работы с ним необходимо разбираться в том, как всем этим пользоваться. Поэтому данной статьей открываем небольшой цикл уроков по особенностям разработки front-end в фреймворке Laravel.
И первое, о чем хотелось бы поговорить — это маршрутизация. Как вы знаете, Laravel имеет достаточно мощный маршрутизатор, благодаря которому при разработке приложения формируется гибкая система адресов и обработчиков определенных запросов. При этом каждый создаваемый маршрут, как правило, имеет URL — то есть путь запроса — и некое уникальное имя, которое используется для его идентификации и получения ранее указанного URL. Это позволяет разработчикам менять ранее описанные URL без каких-либо изменений кода и обработчиков.
Но как быть с front-end частью в том случае, когда необходимо отправить AJAX запрос на сервер для получения конкретных данных? Вы можете сказать, что, по большому счету, трудностей никаких нет, ведь достаточно в методе по отправке данных прописать путь требуемого обработчика. Но правила хорошего тона при работе с фреймворком не рекомендуют вручную прописывать пути, так как для этого есть имена маршрутов, используя которые, всегда можно получить требуемый URL. И это оправдано, о чем было сказано выше. Но проблема заключается в том, что для получения пути маршрута по его имени необходимо вызвать на исполнение специальный хелпер фреймворка, который, как минимум, не доступен во front-end части. Поэтому давайте исправим данную проблему.
Собственно, если невозможно получить информацию по маршрутам в JS-скриптах (интерпретор PHP работает только с файлами расширения .php), используя PHP и инструменты самого фреймворка, то на этапе загрузки приложения или на финальной стадии разработки можно передать определенные данные обо всех маршрутах в JS-приложение. Либо сохранить их в любом удобном виде для чтения из JS-скрипта, что и реализуем.
Для этого создадим собственную пользовательскую команду консоли artisan фреймворка Laravel, которая запишет в файл json информацию обо всех объявленных маршрутах. Код класса команды выглядит следующим образом:
<?php namespace App\Console\Commands; use Illuminate\Console\Command;
use Illuminate\Routing\Router;
use File; class GenerateRoutesJson extends Command
{ /** * The name and signature of the console command. * * @var string */ protected $signature = 'route:json'; protected $router; /** * The console command description. * * @var string */ protected $description = 'Command description'; /** * Create a new command instance. * * @return void */ public function __construct(Router $router) { parent::__construct(); $this->router = $router; } /** * Execute the console command. * * @return mixed */ public function handle() { $routes = []; foreach($this->router->getRoutes() as $route) { $routes[$route->getName()] = $route->uri(); } File::put('resources/js/routes.json',json_encode($routes,JSON_PRETTY_PRINT)); }
}Также напишем несложный front-end модуль, который будет считывать содержимое json-файла и предоставит удобный интерфейс для работы с маршрутами. Его код представлен ниже:
var routes = require('./routes.json'); ///route('home',['1'])
export default function () { var args = Array.prototype.slice.call(arguments); var name = args.shift(); if(routes[name] === undefined) { console.log('Error'); } else { return '/' + routes[name] .split('/') .map(str => str[0] == "{" ? args.shift() : str) .join('/'); ; }
}Собственно, на этом текстовая часть урока завершена. В видеоверсии вы найдете более подробную информацию по указанной теме. Затем представленный код напишем с нуля. Поэтому ждем вас в видео. Всего вам доброго и удачного кодирования!