如何将Quasar与SlimPHP和Twig一起使用

Question

Slim是一个PHP微框架，可帮助您快速编写简单但功能强大的Web应用程序和API。 Twig是一个快速，安全和灵活的PHP模板引擎。面临的挑战是使用这两个组件以及使用Quasar Framework。

挑战

Quasar使用Vue框架。这意味着它使用{{和}}，因此您可以例如在布局中获取已定义的数据参数。但是，twig也使用该语法。

以下是您创建三个工作环境的方法。

Answer 1

类星体，SlimPhp，嫩枝

此repository将为您提供以下实现：

• SlimPhp
• Twig模板引擎
• Quasar框架（由Vue提供支持）

旨在说明如何将它们三个一起使用，以具有后端SlimPHP的功能，PHP gui模板的Twig的安全灵活性以及GUI的Quasar大量组件。

要求和安装

对于此存储库，您至少需要安装PHP7和composer。要启动并运行此“站点”，请克隆GIT存储库。然后转到基本目录并执行命令composer install。这将创建一个“供应商”文件夹。完成后，您可以使用php -S localhost:8080 -t public启动嵌入式php服务器。打开浏览器并浏览到该URL以查看结果。

SlimPhp

我不会解释SlimPHP的安装。相反，我指向在线找到的here文档。在此植入物的存储库中，您将找到更多基于MVC的结构（不集成到数据库）。简而言之，当您打开网址http://localhost:8080/index.php时会发生这种情况。这在编程上可能不是正确的，但可以用于解释。

• 文件..\config\routes.php告诉您转到controllerHome
• 在底部的..\config\dependencies.php中，有一个controllerHome的定义，该定义将view和logger传递给命名空间{{ 1}}
• HomeController说，Sample\Controllers应用程序文件位于composer.json中，因此控制器类位于Sample中名为..\src\Sample的文件中

嫩枝

上面已经解释了URL的位置。下一步是调用来自Twig的模板来显示内容。 Twig的安装在SlimPHP文档中进行了描述。可以在here中找到Twig的文档。下一步完成了，继续我们剩下的地方，以显示内容。

• 在控制器类文件中，您可以看到有一个..\src\Sample\Controlles函数。这将调用HomeController.php for细枝模板，并传递响应，模板名称以及（如果需要）一些参数
• 根据定义目录的文件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被传递给模板的变量'strMessage'的内容替换

类星体

最后，Quasar用于GUI。该示例实际上并没有显示出任何不错的样式，但是可以在here上找到有关组件的所有文档。该存储库正在使用CDN实现。 Quasar文档中也对此page进行了描述。简而言之，就是这样做了。

• 在{% block blMainContent %}{% endblock %}中，链接已添加到图标集
• 在{{ strMessage }}的链接中添加了动画
• 在..\src\Sample\Views\layout.twig中，将一个链接添加到准CSS（在本例中为MAT）
• 在..\src\Sample\Views\layout.twig中，链接被添加到vue中（在主体中！）
• 在..\src\Sample\Views\layout.twig中，一个链接被添加到类星体（在vue之后，在体内！）

这些步骤使您能够使用Quasar。如果仅执行此操作，则将获得样式，而不是对象。因此，您需要启动类星体和vue，这是使用此代码完成的。

..\src\Sample\Views\layout.twig

魔术

现在魔术开始完成实现，因此也可以使用在..\src\Sample\Views\layout.twig中找到的数据属性<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> 。如前所述，Vue还使用strMessage2和main.twig，所以这是一个问题。为了绕过这个问题，在上面显示的Vue定义中，添加了一行。 {{告诉Vue使用}}和delimiters: ['[[', ']]']，所以这就是您在[[中看到的。