如何将类星体与纤细的PHP和细枝一起使用

Slim是一个PHP微框架，可帮助您快速编写简单但功能强大的web应用程序和API。Twig是一个快速、安全、灵活的PHP模板引擎。挑战在于使用这两个组件，同时也使用类星体框架

挑战

类星体使用Vue框架。这意味着它使用

{

和

}

，因此您可以在布局中获得定义的数据参数。然而，twig也使用这种语法

下面是如何创建这三个方面的工作环境。

Quasar、SlimPhp、Twig 这将为您提供以下工作实现：

• SlimPhp
• 细枝模板引擎
• 类星体框架（由Vue提供动力）

本文旨在解释如何将这三个组件结合使用，以使后端具有SlimPHP的强大功能、PHP gui模板中Twig的安全灵活性，以及gui中Quasar的大量组件集合

要求和安装 对于此存储库，至少需要安装PHP7和composer。要启动并运行此“站点”，请克隆GIT存储库。然后转到基本目录并执行命令

composer install

。这将创建一个“供应商”文件夹。完成后，可以使用

php-S localhost:8080-t public

启动嵌入式php服务器。打开浏览器并浏览到该URL以查看结果

SlimPhp 我不打算解释SlimPHP的安装。相反，我指向在线找到的文档。在这个解释的存储库中，您将发现一个更基于MVC的结构（没有与数据库集成）。简而言之，这就是打开url

http://localhost:8080/index.php

。这在编程上可能不正确，但可以用于解释

• 文件

  。\config\routes.php

  指示转到

  controllerHome

• 在底部的

  。\config\dependencies.php

  中，有一个

  controllerHome

  的定义，它将

  视图

  和

  记录器

  传递给命名空间

  Sample\Controllers

  中的类

  HomeController

• composer.json

  表示

  Sample

  应用程序文件位于

  。\src\Sample

  中，因此控制器类位于

  中。\src\Sample\Controlles

  位于名为

  HomeController.php

  的文件中

细枝 上面解释了url指向的位置。下一步是调用来自Twig的模板来显示某些内容。Twig的安装在SlimPHP的文档中进行了描述。可以找到Twig的文档。接下来的步骤已经完成，在我们离开的地方继续，以显示一些内容

• 在控制器类文件中，您可以看到有一个

  invoke

  函数。这将调用twig模板的

  render

  ，并传递响应、模板名称以及一些参数（如果需要）
• 根据定义目录的文件

  。\config\bootstrap.php

  ，模板位置配置为

  。\src\Sample\Views

  。此定义用于

  。\config\dependencies.php

• 当您查看

  。\src\Sample\Views\home\main.twig

  时，有一行

  {%extends'layout.twig%}

  ，这意味着此文件包含在

  中。\src\Sample\Views\layout.twig

  中。如果仔细查看，您将看到它被添加到标记为

  {%block blMainContent%}{%endblock%}

• {{strMessage}}

  此文件中的内容将替换为传递给模板的变量“strMessage”的内容

类星体 最后，Quasar用于GUI。这个示例并没有显示任何好的样式等等，但是可以找到关于组件的所有文档。此存储库正在使用CDN实现。这在类星体文档中也有描述。简言之，就是这样做的

• 在

  。\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和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>

标题
{%block blMainContent%}{%endblock%}
页脚
新Vue({
el:“#q-app”，
分隔符：['['，']]']，
数据：函数（）{
返回{}
},
方法：{}
})

魔法 现在magic开始完成实现，因此也可以使用

main.twig

中的数据属性

strMessage2

。如前所述，Vue还使用

{{

和

}

，因此这是一个问题。为了绕过这一点，在如上所示的Vue定义中，添加了一行<代码>分隔符：['['，']]']告诉Vue使用

[[[

和

]]

，因此这是您在

main.twig

中看到的内容