README

一个将 Quasar UI 框架（基于 Vue.js）集成到应用程序烘焙管理脚手架中的 CakePHP 插件。

安装

您可以使用 composer 将此插件安装到您的 CakePHP 应用程序中。

安装 composer 包的推荐方法是

composer require arc2/QuasarAdmin

更新：上面的方法不会工作，因为它尚未在 Packagist 上。要手动安装，请

将 QuasarAdmin 文件夹复制到您的 CakePhp 插件文件夹中
加载插件： bin/cake plugin load QuasarAdmin
按照下面的 如何使用 指令进行操作
更新 composer.json 中的 autoload.psr-4，例如，请参见 https://book.cakephp.com.cn/3.0/en/plugins.html

"autoload": {
    "psr-4": {
        "App\\": "src/",
        "QuasarAdmin\\": "./plugins/QuasarAdmin/src/"
    }
},

运行 composer install 并选择 "Y" 以设置文件夹权限

概述

QuasarAdmin 是 Quasar UI 框架与 CakePHP bake 的集成。Quasar UI 框架是一个基于 VueJS 的跨平台 UI 框架。其目的是提供一个提供多种平台和屏幕尺寸上卓越且一致体验的组件库。

它依赖于 bake 构建的特殊自定义文件夹结构。它与标准的 cake php bake 理念不同。标准是 bake 提供一个起点，该起点为应用程序进行了定制。一旦构建了脚手架，bake 的工作就完成了，这也是它使用的结束。此插件采用不同的前提作为起点。它假设在开发和原型制作过程中，可能会希望更改应用程序的模式。对此的方法是烘焙到文件夹和类，然后扩展以进行定制。这允许 bake 可重新运行，而不会造成破坏。

为什么使用此插件？

在过去的几年里，网络开发范式已从服务器端动态 HTML 网络应用程序转向具有服务器端 REST API 且完全独立的 Javascript、Ajax 应用程序。这种优势是更好的用户体验。这种转变的缺点是原型设计速度较慢。在旧范式中，一切都是服务器端的，并且是数据驱动的，这允许脚手架脚本快速构建原型应用程序，只需查看数据库模式即可提供交互式框架。我们的观点是，这在现代范式中是一个严重缺失的功能。因此，此插件基于在现代范式中促进快速原型设计的愿望。

目标是使构建的脚手架原型允许人们快速尝试数据结构和 UI 元素，而无需投入完整的客户端构建。

我们将 Quasar 集成到 CakePHP 框架中的方式意味着，虽然它将在前端使用 Quasar/VueJS JavaScript 框架，但它通过标准 POST 请求处理所有表单。您将能够生成一个看起来与最终 SPA 前端完全相同的 UI，即使它使用不同的机制。这意味着您可以从一个转换到另一个，或者您可以根据不同的方式构建应用程序的不同部分（例如，管理员应用程序与客户应用程序），同时轻松保持相同的视觉和感觉。

从另一个角度来看，它允许您构建一个看起来和感觉像现代 JavaScript UI 的传统、老式 Web 应用程序。无论哪种方式，都是双赢的局面！

我们是如何做到的

Quasar UI 以一种假定会与服务器进行Ajax（或类似）数据传输的方式实现自身。因此，它放弃了围绕创建表单和表单元素的大部分HTML约定。结果，Quasar生成的表单无法直接与标准HTML表单元素的传输协议一起工作。为了解决这个问题，我们通过bake创建必要的隐藏字段和VueJS模型来为每个元素创建一个无缝链接，从而在HTML表单协议和Quasar UI小部件之间建立联系。

如何使用它

首先安装QuasarAdmin插件（参见上面的安装说明）。然后需要对您的应用程序进行一些小的调整，以便将插件链接到您的应用程序。

将插件中的AppView.php视图复制到您的应用程序中
将插件中的admin-layout.ctp布局模板复制到您的应用程序中
生成您的数据库（理想情况下通过迁移）
从shell中运行 bin/cake bake all --everything --theme QuasarAdmin 以生成QuasarAdmin UI。

将这些用作您应用程序开发的起点。

扩展

要了解表单辅助系统的工作原理，请查看 vendor/cakephp/src/View/Helper/FormHelper.php。注意 $_defaultConfig 属性（数组）。数组的 typeMap 键显示数据库列类型如何映射到FormHelper模板。 templates 键显示模板定义。

您需要更改以下三个位置，以添加任何缺少的Quasar元素集成

QuasarAdmin/config/form_helper_templates.php
QuasarAdmin/config/form_helper_widgets.php
将新的元素组件文件添加为QuasarAdmin/Template/Element/<element_name>.ctp
在 AppView 中注册元素

辅助模板

这覆盖了FormHelper配置中的 templates 数组。例如，复选框的默认模板是 <input type="checkbox" name="{{name}}" value="{{value}}"{{attrs}}>。花括号占位符是从Widget中拉取的，它作为这些模板的控制器。要了解正在使用哪个小部件，您可以看到FormHelper的 $_defaultWidgets 属性。

辅助小部件

这覆盖了FormHelper配置中的 $_defaultWidgets 数组。因此，您可以为准备Quasar小部件所需的数据分配自定义小部件定义。例如，如果您编辑此文件并将 checkbox 的值从 Checkbox 更改为 QuasarAdmin\View\Widget\QuasarCheckboxWidget，那么它将查找QuasarAdmin插件中的小部件定义，而不是使用cakephp默认的CheckboxWidget。您可以使用用作起点的cakephp默认小部件进行复制。

此文件必须执行的一个基本操作是 return $this->_templates->format('<template_name>', [<array of placeholder/val pairs to hydrate>])。它将首先在 QuasarAdmin/form_helper_template.php 模板定义中查找，如果找不到，将回退到cakephp FormHelper的 templates 属性以获取模板名称定义。

它还可以调用 $this->_templates->formatAttributs 来创建要填充的属性字符串，这些属性将填充 {{attr}} 占位符。

元素组件

元素模板文件是您创建Vue组件并与QuasarAdmin布局通过使用scriptBlocks集成的位置。组件必须与 form_helper_templates.php 文件中使用的组件相匹配。

AppView

元素组件必须作为cake Element被拉入您的 View/AppView.php 文件。这然后初始化Vue组件，将其渲染到DOM中。它是通过将表单辅助模板写为HTML来链接的。然后Vue组件解析HTML，寻找与自己的定义匹配的标签。找到后，它将替换该标签为组件模板，并通过表单辅助传递的props进行填充。

geoidesic / cakphp-bake-quasar

维护者

详细信息