Как использовать Quasar с SlimPHP и Twig - PullRequest
Новая
       20

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

0 голосов
/ 04 ноября 2018

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

Вызов

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

Ниже вы можете создать рабочую среду для всех трех.

1 Ответ

0 голосов
/ 04 ноября 2018

Квазар, SlimPhp, веточка

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

  • 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

Наконец, 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!)

Эти шаги позволяют использовать 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.

...