OctoberCMS - 如何使用自定义表单创建自定义数据类型

Question

我最近开始使用 October CMS。 我在互联网上找到了一种解决我的问题的方法link 但我不明白如何使解决方案适应我自己的

我的表单实际上是一个 Mapbox 地图，用户在其中绘制多边形，向多边形添加任何信息，例如多边形的颜色和描述。在保存之前，我对多边形执行了一些操作。

类似：p_id：[从选择中选择]，polygons_json：[0：[geo]，1：[geo]，2：[geo]]，descriptions_json：[0：[desc]，1：[desc]，2 ：[描述]] .

我注意到为此他们使用隐藏字段来保存数据。我也对JS的使用感到困惑

我使用了Builder插件并手动编辑了它，

Answer 1

要在 October CMS 中使用自定义表单创建自定义数据类型，特别是对于您拥有 Mapbox 地图（用户可以在其中绘制多边形并向其添加信息）的用例，您需要执行以下步骤：

1. 创建自定义插件:

   • 如果您还没有为您的功能创建自定义插件。您可以使用 October CMS Builder 插件来搭建插件的基础结构。

2. 定义数据库字段:

   • 在插件的

     fields.yaml

     文件中定义数据库字段以匹配您的数据结构。例如：

   fields:
       p_id:
           label: Polygon ID
           type: dropdown
           options:
               option1: Option 1
               option2: Option 2
           required: true
       polygons_json:
           label: Polygons JSON
           type: textarea
           size: small
           span: full
       descriptions_json:
           label: Descriptions JSON
           type: textarea
           size: small
           span: full
   

3. 创建模型:

   • 为您的数据结构创建一个模型，它将处理数据库交互。您可以使用Builder插件来生成模型文件。

4. 创建表单小部件:

   • 创建自定义表单小部件来处理 Mapbox 地图和多边形绘制。您需要编写 JavaScript 代码来集成 Mapbox 功能。您可以在小部件类中使用

     backendFormRender

     方法来呈现自定义表单字段并包含必要的 JavaScript 库。

5. 使用 AJAX 保存数据:

   • 在您的自定义表单小部件中，当用户与 Mapbox 地图交互时，使用 AJAX 将数据保存到插件的数据库表中。您可以监听多边形创建、删除或修改等事件，然后使用 AJAX 请求将数据发送到服务器。

6. 加载数据进行编辑:

   • 编辑记录时，从数据库加载数据并使用保存的数据填充 Mapbox 地图和表单字段。

7. 实现后端和前端组件:

   • 使用 October CMS 后端和前端组件创建页面或部分用于管理和显示您的自定义数据类型。

8. 样式和用户界面：

   • 设置您的自定义表单和地图的样式，以匹配您的 October CMS 网站的外观和风格。

9. 测试：

   • 彻底测试您的自定义数据类型和表单，以确保其按预期工作。特别注意数据验证、错误处理和边缘情况。

10. 文档：

    • 不要忘记记录您的自定义数据类型及其用法，特别是如果您打算与其他人共享此插件。

请记住，这是一个高级概述，实施细节将取决于您的具体要求以及您构建 October CMS 插件的方式。此外，您可能需要参阅官方 10 月 CMS 文档和资源，以获取有关创建自定义插件和表单小部件的更深入信息。