![99aa2f06840544a241b828a18ffbcfa6.png](https://img-blog.csdnimg.cn/img_convert/99aa2f06840544a241b828a18ffbcfa6.png)
在上一篇文章有提到对白码平台的探索会以类似学习笔记的形式写下来分享(有兴趣可以看看原文)
冰糖炖杨梅:初探低代码开发工具——有点意思?zhuanlan.zhihu.com![e29c1eab6af5a259a7b5c48b3861c0c2.png](https://img-blog.csdnimg.cn/img_convert/e29c1eab6af5a259a7b5c48b3861c0c2.png)
本次主要分享实现一个包含前端界面的产品信息增删改功能。
创建产品表存储产品数据
产品表包含属性:品名、规格描述、单价、图片
具体实现:
在“快速开发”中新建菜单“产品”,然后在弹出窗中添加属性。
![b278d79b98d21064fa221b82fbff2a7e.png](https://img-blog.csdnimg.cn/img_convert/b278d79b98d21064fa221b82fbff2a7e.png)
![c33c88ca79ed2353f30b010eddf2a060.png](https://img-blog.csdnimg.cn/img_convert/c33c88ca79ed2353f30b010eddf2a060.png)
![5bf8629f490132c8baabd1e5a0be1146.png](https://img-blog.csdnimg.cn/img_convert/5bf8629f490132c8baabd1e5a0be1146.png)
一个简单的产品表就建好了,到用户端中看看效果。
![4eb1297e779e2ec7173b273707a89fe8.png](https://img-blog.csdnimg.cn/img_convert/4eb1297e779e2ec7173b273707a89fe8.png)
实现增删改功能
回到刚才的工作台界面,在“功能配置”一栏中点击配置,新建一个“新增”功能按钮实现添加一条产品数据的功能,只需要填写功能名称,功能类型选择“新增”就可以了,“修改”、“删除”功能同理,他不能一次性同时选择新增、修改、删除类型,希望官方能够改进。
![ed1551b2013f1df97c0c183c03c44994.png](https://img-blog.csdnimg.cn/img_convert/ed1551b2013f1df97c0c183c03c44994.png)
添加完后,将状态改为上线就可以了。
![647407aeb4bc1ff13bede096cd003369.png](https://img-blog.csdnimg.cn/img_convert/647407aeb4bc1ff13bede096cd003369.png)
到用户端检查效果
![2a66d7b3efb6fe4e7a0bd326b1ef20d2.png](https://img-blog.csdnimg.cn/img_convert/2a66d7b3efb6fe4e7a0bd326b1ef20d2.png)
![34354c799577d10dc038be74b80d8066.png](https://img-blog.csdnimg.cn/img_convert/34354c799577d10dc038be74b80d8066.png)
在功能配置中单击功能,可以看到里面的具体实现,我理解为一个流程引擎工具,他提供了挺多类型的步骤,这部分内容等我研究多点后,再另开一篇笔记专门记录介绍。
![fbdd84aed5ac6d61960151f0af5ca502.png](https://img-blog.csdnimg.cn/img_convert/fbdd84aed5ac6d61960151f0af5ca502.png)
![70ecd145ac5b76b4e3696db97e926cad.png](https://img-blog.csdnimg.cn/img_convert/70ecd145ac5b76b4e3696db97e926cad.png)
实现前端界面
前面实现的只是一个类似后台数据管理界面,对用户来说不是特别友好。下面用平台提供的前端界面(官方说法是自定义页)模板简单实现一下。
1、新建“自定义页”类型菜单,选择一个数据列表模板。
![fe0f1a416ed50e7f7abb93c3868b4d62.png](https://img-blog.csdnimg.cn/img_convert/fe0f1a416ed50e7f7abb93c3868b4d62.png)
![110d8743071b1de8d2d66ab104d1b10e.png](https://img-blog.csdnimg.cn/img_convert/110d8743071b1de8d2d66ab104d1b10e.png)
2、点击编辑页面,对接产品数据(界面感觉有点像原型工具):选中列表,将数据源设为产品列表(其实前面创建表的过程平台会给我生成一个数据集的流程,当做数据视图就行)。并将产品表的属性映射。
![c0626914c991c37b99ed030c6dce7e21.png](https://img-blog.csdnimg.cn/img_convert/c0626914c991c37b99ed030c6dce7e21.png)
3、映射完列表后,还有将列表中的其他图层的数值对应上(感觉有点重复操作了),比如品名图层,对应列表中的品名,其他我就不一一说了。
![20d8cedae5e7f234cf99aa63acee86bf.png](https://img-blog.csdnimg.cn/img_convert/20d8cedae5e7f234cf99aa63acee86bf.png)
4、将增删改的功能对接上按钮:在对应按钮上的触发中选择点击执行功能就可以了。
![bb8feff548044228eca82fc34c90c85d.png](https://img-blog.csdnimg.cn/img_convert/bb8feff548044228eca82fc34c90c85d.png)
弄完后点击保存,在客户端中查看效果。
![bcd3a575183bfa6658b5ccb2fe7c5d37.png](https://img-blog.csdnimg.cn/img_convert/bcd3a575183bfa6658b5ccb2fe7c5d37.png)
![b3595f9d2d88b765554b831dc4197797.png](https://img-blog.csdnimg.cn/img_convert/b3595f9d2d88b765554b831dc4197797.png)
![313c6abe6521e55c8f22dca995667f39.png](https://img-blog.csdnimg.cn/img_convert/313c6abe6521e55c8f22dca995667f39.png)
总结
整体上算是实现了一个具有前端页面的产品管理表单应用,时间上也花费不到10分钟(前提得学会一点怎么玩这个平台)。
这个平台在功能上应该说挺强大的了,也比较容易上手,不过还有挺多坑,我从零开始靠翻官方的帮助文档翻了一个下午学习才会上手(没错,仅仅是上手)。
包括他的流程步骤类型、自定义页的组件、编程、API等,我能想到后面还有很多坑等着我踩......