Front-end в фреймворке Laravel пример локализации скриптов JS


Содержание материала:

Front-end в фреймворке Laravel: как передать маршруты в скрипты JS

Просмотров: 2 776

The Cult Of Myself

Не знаю зачем копировать массив, а затем шифтить, реиндексируя каждый раз элементы(а роутов может быть несколько сотен), но в строке «return args.shift();» ошибка.
Вторым параметром в route(по недосмотру автора) приходит массив, его и возвращает shift из хендлера, а не элементы, как вам бодро рассказывают.

Этот раз*байский код сработал по стечению случайностей. Если url будет с несколькими вычисляемыми секциями или передать больше 1 элемента в массив значений, то произойдет индийский болт.

Yevhen Zapievalov

Спасибо за полезный урок! Очень интересны уроки по Ларе + JS

Some Some

protected защищенное свойство, а не закрытое

Вася Васильев

Вы не упомянули, что команду еще нужно зарегистрировать в app/Console/Kernel.php. Иначе ничего не заработает как у меня.

Ярослав Стригун

Спасибо за полезную информацию. Просто я раньше всегда передавал данные на шаблоне через:

Front-end в фреймворке Laravel: локализация JS-скриптов

Смотреть видео Front-end в фреймворке Laravel: локализация JS-скриптов онлайн, скачать на мобильный.

32 | 1
WebForMySelf | 12 мес. назад

Современные тенденции веб-разработки:
https://webformyself.com/minikurs/webdevtrends/free.html

Продолжаем разбираться в особенностях разработки front-end в фреймворке Laravel. На прошлом уроке была рассмотрена передача информации по описанным маршрутам во front-end приложение. Казалось бы, этого достаточно. Но есть еще немаловажные параметры, которые также желательно передать — это локализация или статические данные, отображаемые в представлениях как фреймворка, так и front-end приложений. Поэтому с помощью данной статьи давайте научимся локализовать отображаемую информацию в скриптах JavaScript.

Вообще, задача сегодняшнего урока довольно типична и встречается весьма часто при разработке веб-проектов. А это значит, что, скорее всего, есть готовое расширение с неким встроенным функционалом. И это действительно так — более того, подобных «помощников» написано очень много, поэтому сегодня рассмотрим один из них.

Конечно, поставленную задачу можно реализовать и без использования сторонних пакетов. Но хороший разработчик должен уметь как написать что-то с нуля, так и работать с уже готовыми решениями.

Front-end в фреймворке Laravel: пример локализации скриптов JS

Simple, ease-to-use and flexible package for the Laravel web framework. Allows you to use localized messages of the Laravel webapp (see resources/lang directory) in your Javascript code. You may easily configure which messages you need to export.

⚠️ Looking for a new maintainer. Please contact me if you are interested.

Laravel Branch
6 laravel-6
5.8 laravel-5.8
5.0 — 5.7 laravel-5 (end of life)

Add the following line to the require section of your Laravel webapp’s composer.json file:

Run composer update to install the package.

Finally add the following line to the providers array of your app/config/app.php file:

Run php artisan vendor:publish first. This command copies the package’s default configuration to config/js-localization.php .

You may now edit this file to define the messages you need in your Javascript code. Just edit the messages array in the config file.

Example (exports all reminder messages):

Important:

The messages configuration will be cached when the JsLocalizationController is used for the first time. After changing the messages configuration you will need to call php artisan js-localization:refresh to refresh that cache. That also affects the config properties you export to javascript, since they are cached, too.

The translation resources for JavaScript can either be served by your Laravel app at run-time or they can be pre-generated as static JavaScript files, allowing you to serve them straight from your web server or CDN or to be included in your build process.

You just need to add the necessary tags to your layout. Here is an example blade view:

Remember it’s best to not put the @yield(‘js-localization.head’) in the as it contains the tag shipping the frontend part of this package. It’s best practice to put it at the end of the , but before other tags. The example above simply includes it in the head, since it’s the simplest form to use it.

For increased performance it is possible to generate static JavaScript files with all of your generated strings. These files can either be served directly as static files, or included as a part of your frontend asset build process.

To specify the output directory for the assets, just set the $storage_path string in your config/js-localization.php file accordingly (see Configuration).

The files can then be generated using the artisan command:

php artisan js-localization:export

This will generate two files in your target directory:

  • messages.js contains your translation strings
  • config.js contains your exported config values

If you want to automatically split up the messages.js file into separate .js files for each locale, you can set the following to true in your config/js-localization.php config file:

This will in turn also generate the following file(s) in your target directory:

  • lang-.js contains one language’s translation strings, if the split_export_files config option is set to true

Remember that the files needs to be regenerated using php artisan js-localization:export every time any translation strings are edited, added or removed.

You may use Lang.get(), Lang.has(), Lang.choice(), Lang.locale() and trans() (alias for Lang.get()) in your Javascript code. They work just like Laravel’s Lang facade. Additionally, you are able to pass configuration properties to your Javascript code as well. There is Config.get() in Javascript, too. Configure which config properties to pass to the client using the config field in config/js-localization.php . Attention: Do not export any security-critical properties like DB credentials or similar, since they would be visible to anyone using your application!

Variables in messages are supported. For instance: «This is my test string for :name.» .

Pluralization is also supported, but does not care about the locale. It only uses the English pluralization rule ( «singular text|plural text» ). More complex pluralization quantifiers are not yet supported.

Assume you are developing a laravel package that depends on this javascript localization features and you want to configure which messages of your package have to be visible to the JS code.

Fortunately that’s pretty easy. Just listen to the JsLocalization.registerMessages event and use the JsLocalization\Facades\JsLocalizationHelper::addMessagesToExport() method. Like so:

This software is released under the MIT license. See license.

Front-end в фреймворке Laravel: локализация JS-скриптов

Современные тенденции веб-разработки:
webformyself.com/minikurs/webdevtrends/free.html
Продолжаем разбираться в особенностях разработки front-end в фреймворке Laravel. На прошлом уроке была рассмотрена передача информации по описанным маршрутам во front-end приложение. Казалось бы, этого достаточно. Но есть еще немаловажные параметры, которые также желательно передать — это локализация или статические данные, отображаемые в представлениях как фреймворка, так и front-end приложений. Поэтому с помощью данной статьи давайте научимся локализовать отображаемую информацию в скриптах JavaScript.
Вообще, задача сегодняшнего урока довольно типична и встречается весьма часто при разработке веб-проектов. А это значит, что, скорее всего, есть готовое расширение с неким встроенным функционалом. И это действительно так — более того, подобных «помощников» написано очень много, поэтому сегодня рассмотрим один из них.
Конечно, поставленную задачу можно реализовать и без использования сторонних пакетов. Но хороший разработчик должен уметь как написать что-то с нуля, так и работать с уже готовыми решениями.

WebForMySelf Year ago

Современные тенденции веб-разработки: webformyself.com/minikurs/webdevtrends/free.html

Юра Загоруйко Month ago

Это все хорошо, но что делать, если переводы хранятся в базе данных, причем зачем тащить все переводы, если надо пара фраз. Сайт не Spa а перевод нужен только для vue компонентов

Евгений Запевалов 3 months ago

Изящное решение! Очень надо было, спасибо! 🙂

Рома Самойленко 11 months ago

какой-то не такой урок как обычно — ничего не понятно.

Muhammed 5 months ago

Кому как, мне урок понравился, не понимаю только почему так мало просмотров

Miras Nassipkaliyev 9 months ago

То что Вам не понятно не значит что урок «какой-то не такой». Вы просто не созрели для этого видео а так очень полезные видео у автора и с подачей все в порядке

Front-end в фреймворке Laravel: как передать маршруты в скрипты JS

Смотреть видео Front-end в фреймворке Laravel: как передать маршруты в скрипты JS онлайн, скачать видео.

83 | 6
WebForMySelf | 12 мес. назад

Современные тенденции веб-разработки:
https://webformyself.com/minikurs/webdevtrends/free.html

Так сложилось, что в данное время очень большую популярность набрала и продолжает набирать разработка 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 информацию обо всех объявленных маршрутах.

Front-end в фреймворке Laravel: как передать маршруты в скрипты JS

Смотреть видео Front-end в фреймворке Laravel: как передать маршруты в скрипты JS онлайн, скачать на мобильный.

83 | 6
WebForMySelf | 12 мес. назад

Современные тенденции веб-разработки:
https://webformyself.com/minikurs/webdevtrends/free.html

Так сложилось, что в данное время очень большую популярность набрала и продолжает набирать разработка 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 информацию обо всех объявленных маршрутах.

Front-end в фреймворке Laravel: локализация JS-скриптов

Смотреть видео Front-end в фреймворке Laravel: локализация JS-скриптов онлайн, скачать на мобильный.

32 | 1
WebForMySelf | 12 мес. назад

Современные тенденции веб-разработки:
https://webformyself.com/minikurs/webdevtrends/free.html

Продолжаем разбираться в особенностях разработки front-end в фреймворке Laravel. На прошлом уроке была рассмотрена передача информации по описанным маршрутам во front-end приложение. Казалось бы, этого достаточно. Но есть еще немаловажные параметры, которые также желательно передать — это локализация или статические данные, отображаемые в представлениях как фреймворка, так и front-end приложений. Поэтому с помощью данной статьи давайте научимся локализовать отображаемую информацию в скриптах JavaScript.

Вообще, задача сегодняшнего урока довольно типична и встречается весьма часто при разработке веб-проектов. А это значит, что, скорее всего, есть готовое расширение с неким встроенным функционалом. И это действительно так — более того, подобных «помощников» написано очень много, поэтому сегодня рассмотрим один из них.

Конечно, поставленную задачу можно реализовать и без использования сторонних пакетов. Но хороший разработчик должен уметь как написать что-то с нуля, так и работать с уже готовыми решениями.

Front-end в фреймворке Laravel: локализация JS-скриптов

  • Published on: 21 November 2020
  • Современные тенденции веб-разработки:
    https://webformyself.com/minikurs/webdevtrends/free.html

Продолжаем разбираться в особенностях разработки front-end в фреймворке Laravel. На прошлом уроке была рассмотрена передача информации по описанным маршрутам во front-end приложение. Казалось бы, этого достаточно. Но есть еще немаловажные параметры, которые также желательно передать — это локализация или статические данные, отображаемые в представлениях как фреймворка, так и front-end приложений. Поэтому с помощью данной статьи давайте научимся локализовать отображаемую информацию в скриптах JavaScript.

Вообще, задача сегодняшнего урока довольно типична и встречается весьма часто при разработке веб-проектов. А это значит, что, скорее всего, есть готовое расширение с неким встроенным функционалом. И это действительно так — более того, подобных «помощников» написано очень много, поэтому сегодня рассмотрим один из них.

Конечно, поставленную задачу можно реализовать и без использования сторонних пакетов. Но хороший разработчик должен уметь как написать что-то с нуля, так и работать с уже готовыми решениями.

  • Runtime : 29:52
  • локализация скриптов laravel laravel front end фреймворк laravel маршрутизация маршрутизация фреймворк php javascript
  • Front-end в фреймворке Laravel: локализация JS-скриптов

    Современные тенденции веб-разработки:
    webformyself.com/minikurs/webdevtrends/free.html
    Продолжаем разбираться в особенностях разработки front-end в фреймворке Laravel. На прошлом уроке была рассмотрена передача информации по описанным маршрутам во front-end приложение. Казалось бы, этого достаточно. Но есть еще немаловажные параметры, которые также желательно передать — это локализация или статические данные, отображаемые в представлениях как фреймворка, так и front-end приложений. Поэтому с помощью данной статьи давайте научимся локализовать отображаемую информацию в скриптах JavaScript.
    Вообще, задача сегодняшнего урока довольно типична и встречается весьма часто при разработке веб-проектов. А это значит, что, скорее всего, есть готовое расширение с неким встроенным функционалом. И это действительно так — более того, подобных «помощников» написано очень много, поэтому сегодня рассмотрим один из них.
    Конечно, поставленную задачу можно реализовать и без использования сторонних пакетов. Но хороший разработчик должен уметь как написать что-то с нуля, так и работать с уже готовыми решениями.

    WebForMySelf Year ago

    Современные тенденции веб-разработки: webformyself.com/minikurs/webdevtrends/free.html

    Юра Загоруйко Month ago

    Это все хорошо, но что делать, если переводы хранятся в базе данных, причем зачем тащить все переводы, если надо пара фраз. Сайт не Spa а перевод нужен только для vue компонентов

    Евгений Запевалов 3 months ago

    Изящное решение! Очень надо было, спасибо! 🙂

    Рома Самойленко 11 months ago

    какой-то не такой урок как обычно — ничего не понятно.

    Muhammed 5 months ago

    Кому как, мне урок понравился, не понимаю только почему так мало просмотров

    Miras Nassipkaliyev 9 months ago

    То что Вам не понятно не значит что урок «какой-то не такой». Вы просто не созрели для этого видео а так очень полезные видео у автора и с подачей все в порядке

    Front-end в фреймворке Laravel: локализация JS-скриптов

    Смотреть видео Front-end в фреймворке Laravel: локализация JS-скриптов онлайн, скачать на мобильный.

    32 | 1
    WebForMySelf | 12 мес. назад

    Современные тенденции веб-разработки:
    https://webformyself.com/minikurs/webdevtrends/free.html

    Продолжаем разбираться в особенностях разработки front-end в фреймворке Laravel. На прошлом уроке была рассмотрена передача информации по описанным маршрутам во front-end приложение. Казалось бы, этого достаточно. Но есть еще немаловажные параметры, которые также желательно передать — это локализация или статические данные, отображаемые в представлениях как фреймворка, так и front-end приложений. Поэтому с помощью данной статьи давайте научимся локализовать отображаемую информацию в скриптах JavaScript.

    Вообще, задача сегодняшнего урока довольно типична и встречается весьма часто при разработке веб-проектов. А это значит, что, скорее всего, есть готовое расширение с неким встроенным функционалом. И это действительно так — более того, подобных «помощников» написано очень много, поэтому сегодня рассмотрим один из них.

    Конечно, поставленную задачу можно реализовать и без использования сторонних пакетов. Но хороший разработчик должен уметь как написать что-то с нуля, так и работать с уже готовыми решениями.

    Топ-пост этого месяца:  Angular CLI история развития, последние новости и прогноз на будущее
    Добавить комментарий