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

Quasar, SlimPhp, Twig

это хранилище предоставит вам рабочую реализацию:

• SlimPhp
• Шаблонный движок Twig
• Квазар каркас (работает на Vue)

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

Требования & Монтаж

Для этого репозитория у вас должен быть установлен как минимум PHP7 и composer. Чтобы запустить этот «сайт», клонируйте 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 ссылка добавлена ​​в квазар (в теле, после vue!)

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