写在前面

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

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

image.png

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

image.png

对象模型

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

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

image.png

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

image.png

编写页面

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

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

image.png

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

image.png

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

image.png

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

image.png

接下来实现数据呈现部分

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

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

image.png

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

image.png

预览最终效果 c

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

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

image.png

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

数据输入界面

image.png

数据预览界面

image.png

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

image.png

最后开启表格的选择列,如下所示。
image.png

写在后面

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

本内容为合法授权发布,文章内容为作者独立观点,不代表开发云立场,未经允许不得转载。

CSDN开发云