2

Slim 是一个 PHP 微框架，可帮助您快速编写简单而强大的 Web 应用程序和 API。Twig 是一个快速、安全、灵活的 PHP 模板引擎。挑战在于使用这两个组件并同时使用 Quasar Framework。

挑战

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

贝娄是您如何创建所有三个工作环境的方法。

4

1 回答 1

2

类星体，SlimPhp，树枝

该存储库将为您提供以下工作实现：

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

它旨在解释如何将它们三者结合使用，以在后端拥有 SlimPHP 的强大功能，为 PHP gui 模板提供 Twig 的安全灵活性，以及​​用于 GUI 的 Quasar 的大量组件集合。

要求和安装

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

SlimPhp

我不打算解释 SlimPHP 的安装。相反，我指向此处的在线文档。在这个解释的存储库中，您会发现一个更基于 MVC 的结构（没有集成到数据库）。简而言之，这就是您打开 url 时发生的情况http://localhost:8080/index.php。这可能在编程上不正确，但可以解释。

  • 该文件..\config\routes.php告诉去controllerHome
  • 在..\config\dependencies.php底部，有一个定义，controllerHome它将 aview和传递给命名空间logger中的类HomeControllerSample\Controllers
  • composer.json表示Sample应用程序文件位于 中..\src\Sample，因此控制器类位于..\src\Sample\Controlles名为HomeController.php

枝条

上面解释了网址的去向。下一步是调用来自 Twig 的模板来显示某些内容。SlimPHP 的文档中描述了 Twig 的安装。可以在此处找到 Twig 的文档。接下来的步骤已经完成，继续我们离开的地方，显示一些东西。

  • 在控制器类文件中，可以看到有一个invoke函数。这将调用renderfor twig 模板并传递响应、模板名称以及一些参数（如果需要）
  • ..\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 用于 GUI。该示例并没有真正展示任何漂亮的样式等，但可以在此处找到有关组件的所有文档。该存储库正在使用 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。如果您只这样做，您将获得样式，但不会获得对象。所以你需要启动 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 使用[[and]]代替，所以这就是你在main.twig.

于 2018-11-04T20:56:45.127 回答