Как использовать Quasar с SlimPHP и Twig

Slim — это микрофреймворк PHP, который помогает быстро писать простые, но мощные веб-приложения и API. Twig — это быстрый, безопасный и гибкий шаблонизатор PHP. Задача состоит в том, чтобы использовать эти два компонента, а также использовать Quasar Framework.

Вызов

Quasar использует фреймворк Vue. Это означает, что он использует {{ и }}, поэтому вы можете, например, получить определенные параметры данных в своем макете. Однако twig также использует этот синтаксис.

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


php vuejs2 quasar-framework twig slim-3
person Edgar Koster    schedule 04.11.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Quasar, SlimPhp, Twig

Этот репозиторий предоставит вам рабочую реализацию:

  • SlimPhp
  • Шаблонизатор Twig
  • Фреймворк Quasar (на базе Vue)

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

Требования и установка

Для этого репозитория вам необходимо установить как минимум PHP7 и композитор. Чтобы запустить этот «сайт», клонируйте репозиторий GIT. Затем перейдите в базовый каталог и выполните команду composer install. Это создаст папку «Vender». Когда это будет сделано, вы можете запустить встроенный php-сервер с помощью php -S localhost:8080 -t public. Откройте браузер и перейдите по этому URL-адресу, чтобы просмотреть результат.

SlimPhp

Я не буду объяснять установку SlimPHP. Вместо этого я указываю на онлайн-документацию, которую можно найти здесь. В репозитории этого объяснения вы найдете структуру, больше основанную на MVC (без интеграции с базой данных). Короче говоря, вот что происходит, когда вы открываете URL-адрес http://localhost:8080/index.php. Это может быть некорректно программно, но работает для объяснения.

  • файл ..\config\routes.php говорит перейти к controllerHome
  • в ..\config\dependencies.php внизу есть определение для controllerHome, которое передает view и logger классу HomeController в пространстве имен Sample\Controllers
  • composer.json говорит, что файлы приложения Sample находятся в ..\src\Sample, поэтому класс контроллера находится в ..\src\Sample\Controlles в файле с именем HomeController.php

Веточка

Выше было объяснено, куда идет URL. Следующим шагом является вызов шаблона из Twig для отображения чего-либо. Установка Twig описана в документации SlimPHP. Документацию по Twig можно найти здесь. Следующие шаги сделаны, продолжая с того места, где мы остановились, чтобы отобразить что-то.

  • в файле класса контроллера вы можете видеть, что есть функция invoke. Это вызывает шаблон render для ветки и передает ответ, имя шаблона и, при желании, некоторые параметры.
  • расположение шаблона настроено на ..\src\Sample\Views в соответствии с файлом ..\config\bootstrap.php, в котором определен каталог. Это определение используется в ..\config\dependencies.php
  • когда вы смотрите на ..\src\Sample\Views\home\main.twig, вы видите строку {% extends 'layout.twig' %}, которая означает, что этот файл включен в ..\src\Sample\Views\layout.twig. Если вы посмотрите внимательно, вы увидите, что он добавлен в место, отмеченное как {% block blMainContent %}{% endblock %}.
  • {{ strMessage }} в этом файле заменяется содержимым переменной 'strMessage', которая передается в шаблон

Квазар

Наконец, Quasar используется для графического интерфейса. В этом примере не очень красивое оформление и тому подобное, но всю документацию по компонентам можно найти здесь. Этот репозиторий использует реализацию CDN. Это также описано в документации Quasar на этой странице. Короче так и делается.

  • в ..\src\Sample\Views\layout.twig добавлена ​​ссылка на набор иконок
  • в ..\src\Sample\Views\layout.twig добавлена ​​ссылка на анимацию
  • в ..\src\Sample\Views\layout.twig добавлена ​​ссылка на квазар CSS (в данном случае MAT)
  • в ..\src\Sample\Views\layout.twig добавлена ​​ссылка на vue (в теле!)
  • в ..\src\Sample\Views\layout.twig добавлена ​​ссылка на quasar (в теле, после vue!)

Эти шаги позволяют использовать Quasar. Если вы сделаете только это, вы получите стиль, но не объекты. Итак, вам нужно инициировать quasar и vue, что здесь делается с помощью этого кода.

<div id='q-app'>
<q-layout>
    <q-layout-header>
        header
    </q-layout-header>
    <q-page-container>
        {% block blMainContent %}{%  endblock %}
    </q-page-content>
    <q-layout-footer>
        footer
    </q-layout-container>
</q-layout>
</div>

<script>
new Vue({
    el: '#q-app',
    delimiters: ['[[', ']]'],
    data: function () {
        return {}
    },
    methods: {}
})
</script>

магия

Теперь волшебство начинает завершать реализацию, поэтому свойство данных strMessage2, найденное в main.twig, также можно использовать. Как упоминалось ранее, Vue также использует {{ и }}, так что это проблема. Чтобы обойти это, в определение Vue, показанное выше, добавлена ​​строка. delimiters: ['[[', ']]'] говорит Vue использовать вместо этого [[ и ]], так что это то, что вы видите в main.twig.

person Edgar Koster    schedule 04.11.2018