不写一行代码就能开发？是真的，试试应用魔方吧

分手后的思念是犯贱 2023-09-30 10:46 10阅读 0赞

### 写在前面 ###

[上一篇博客][Link 1] 在完全脱离文档的情况下了解了 AppCube，对其有了一个基本面的认识，作为一个**尝试者**，本篇博客还是不借助文档，只依赖自己的经验，实现一个小闭环，这个闭环小到模型中只有一个字段，但我们要实现一个闭环，即从前台输入数据，然后在从后台读取数据。

首先我们创建一款空白应用，这样子就能得到一个原汁原味的界面了。

![image.png][]

此时才发现，AppCube 竟然是一个 SAAS 空间，而且好像还在一个地方看到了类似的广告语，翻阅首页发现，原来是 【高效易用的低代码 aPaaS 平台】。

![image.png][image.png 1]

### 对象模型 ###

进入到控制版面之后，直接找到 `Model` 目录，点击右侧的 `+`，添加对象模型。  
![image.png][image.png 2]  
输入对象名，就可以操作对象中的相关字段了，其中 AppCube 给我们内置好了一些默认字段，这些字段在开发中非常重要。

![image.png][image.png 3]  
切换到自定义字段选项卡之后，就可以创建自己的字段了，AppCube 非常合理的预备好了前缀和后缀。  
在自定义字段时，还可以选择字段的数据类型，这里创建了一个名称为 `info_name` 的字段，然后 AppCube 按照驼峰命名规则对其进行了格式化操作。标准名称为 `hys__infoName__CST`。

![image.png][image.png 4]

对象字段的各个属性也可以单独配置。

![image.png][image.png 5]

### 编写页面 ###

在 `Page` 目录中直接添加一个【标准页面】，然后拖拽一个表单组件到窗口中，这里 AppCube 会自动等待我们选择一个对象，将其绑定到表单组件上，如下图所示。

![image.png][image.png 6]  
这里数据绑定的模型是 `对象`，因为它能**由后台对象模型映射创建，支持选择字段**，这里的后台对象模型就是上文我们创建的模型。

![image.png][image.png 7]

其它表单组件的配置都非常简单，例如文本标签，占位符，鼠标移动显示，是否可清空，基于需求配置即可。

![image.png][image.png 8]

输入页面最后一个步骤是，按钮操作，也就是我们需要给提交按钮绑定事件，让其可以提交数据到后台，选中按钮之后，发现 AppCube 这一步骤也已经考虑到，已经初始化好相关事件了。

![image.png][image.png 9]

点击【提交表单】后面的铅笔图标，得到【内置动作】编辑窗口，可以自行调整逻辑，非常方便。

![image.png][image.png 10]

**接下来实现数据呈现部分**

在 `Page` 目录中创建一个名称为 `Show` 的标准页面，然后直接拖拽一个表格到窗口中。

后续的步骤与上文基本一致，绑定模型，修改显示相关字段。

![image.png][image.png 11]

而且想要添加筛选条件也非常容易，直接在属性面板操作即可。

![image.png][image.png 12]

### 预览最终效果 c ###

在预览之前，需要修改一下相关菜单，这个步骤也是失败一次之后发现的，AppCube 默认打开的页面，并不是咱们创建的页面。

配置非常简单，直接参考下图操作区域即可实现。

![image.png][image.png 13]

保存上述所有操作，然后点击左侧的 APP 预览。当出现如下所示页面时，本次案例的全部工作已经完成。

> 数据输入界面

![image.png][image.png 14]

> 数据预览界面

![image.png][image.png 15]

由于没有删除按钮，我回到了 `Show` 设计页面，添加了工具栏，这样选择与删除功能就被启用了。

![image.png][image.png 16]

最后开启表格的选择列，如下所示。  
![image.png][image.png 17]

### 写在后面 ###

虽然本例只涉及了一个字段，但这足够精彩了，有这一个小闭环的实现，就可以将其扩展开了，任何表单收集与呈现的工作，都可以在无代码的情况下编写。真的符合了**应用魔方**的神奇之处在于，你把它拖拉拽操作一番就能实现快速应用开发和应用构建。

[Link 1]: https://bbs.huaweicloud.com/blogs/308456
[image.png]: https://img-blog.csdnimg.cn/img_convert/3d59684d2a6a8cd9c586399b35b3ccef.png
[image.png 1]: https://img-blog.csdnimg.cn/img_convert/0ea5d21023048b7db7b1bb599cb53a86.png
[image.png 2]: https://img-blog.csdnimg.cn/img_convert/0f99b6b2fcfb2a75c2411f33aec19544.png
[image.png 3]: https://img-blog.csdnimg.cn/img_convert/4a9436763f6b7148f919da194ae51e31.png
[image.png 4]: https://img-blog.csdnimg.cn/img_convert/272f14e339b1f96f957ff55385001cfb.png
[image.png 5]: https://img-blog.csdnimg.cn/img_convert/382f0512ef5e5541b7b6313177c51ae0.png
[image.png 6]: https://img-blog.csdnimg.cn/img_convert/ba9bb1d782f51c303ea8e0c91f666b26.png
[image.png 7]: https://img-blog.csdnimg.cn/img_convert/513d90418b93f81a88d9558357492367.png
[image.png 8]: https://img-blog.csdnimg.cn/img_convert/db7aad4261111165f83ddba3c15c771f.png
[image.png 9]: https://img-blog.csdnimg.cn/img_convert/2fb52f98462da106f9bff58647cdf6c3.png
[image.png 10]: https://img-blog.csdnimg.cn/img_convert/46eafe73095cb554e9a8292d9c9ddb60.png
[image.png 11]: https://img-blog.csdnimg.cn/img_convert/3b2f5ea08e879c11016b121a24e640bd.png
[image.png 12]: https://img-blog.csdnimg.cn/img_convert/89e53ea77e2d37e95730d0162e8f06d3.png
[image.png 13]: https://img-blog.csdnimg.cn/img_convert/648fbe3d05113d272df1fc715e92b78f.png
[image.png 14]: https://img-blog.csdnimg.cn/img_convert/dab11c3fcd2e8b16c3a5d889d26c28c8.png
[image.png 15]: https://img-blog.csdnimg.cn/img_convert/0a4307e79c32d513535eec1066c8094d.png
[image.png 16]: https://img-blog.csdnimg.cn/img_convert/9a5edee24253212b9c503dbfb90c2da4.png
[image.png 17]: https://img-blog.csdnimg.cn/img_convert/51f7ea83314e77c0003250974173e502.png