阿里低代码引擎|阿里低代码引擎 | LowCodeEngine - 多页面管理(提供完善 github 代码示例)
前言
自阿里低代码引擎 lowcode-engine 发布后,经常能看到钉钉社区、github issue、掘金等博客有多页面管理的需求。
我们在基于阿里低代码引擎 lowcode-engine 二开低代码平台的时候也遇到了这个问题,并付诸了实践。
其实阿里低代码引擎 lowcode-engine 本身是支持该功能,提供了 openDocument、documents、removeDocument、exportSchema 的 API,在《低代码引擎搭建协议规范》中有所体现。同时在钉钉社区、github、哔哩哔哩中,金蝉大佬也点明了实现多页面管理功能的关键点及 API。
接下来,我将简单阐述一下我们的阿里低代码引擎 lowcode-engine 多页面管理功能实践,并提供代码示例。
实现方式
① 纯前端实现,手动保存
逻辑
阿里低代码引擎 lowcode-engine 提供多页面管理列表(documents)及相应 API,我们可以
- 通过 project.documents 获取到;
- 通过 createDocument 创建新页面;
- 通过 removeDocument 删除指定页面;
- 通过 project.exportSchema 获取项目 Schema;
- 通过 project.documents[x].exportSchema 获取指定页面的页面 Schema;
- 通过 project.currentDocument 获取到指定页面;
- ......
代码
在公司电脑里,不太方便提供,重新实现较麻烦(至于为什么继续往下看),后续有空重新实现了再提供,TODO
结论 整体开发及使用下来,感觉较为复杂麻烦。
同时由于阿里低代码引擎 lowcode-engine 插件生态(如:数据源面板、源代码面板、Schema 面板)的源码中取当前页 Schema 逻辑使用的是 projectSchema.componentsTree[0],如果需要实现该功能,需要一并修改插件生态中的源码。
② 配合后台服务,实时保存
本次提供的代码示例就是这种实现方式【阿里低代码引擎|阿里低代码引擎 | LowCodeEngine - 多页面管理(提供完善 github 代码示例)】
逻辑 还是 ① 中的那些 API,但是稍微有些区别:
- 创建页面,可以直接 openDocument,不需要像 ① 中需要 createDocument 手动开辟新页面等更便捷一点的操作。
- 不需要修改插件生态源码中部分鲁棒性不足的逻辑
- 实时保存,心智负担小,不用太担心前端崩溃导致已配置的数据丢失
- 为了防止接口响应慢及失败等导致的体验性问题(如切换页面需先确保上一页面保存成功、多页面菜单选中高亮项),需要做一些缓存优化及回滚
- 需要考虑实时保存异步请求与后续画布操作的执行顺序问题(毕竟实时保存请求没有 localStorage.setItem 快)
代码(欢迎??,谢谢~)https://github.com/blueju/lowcode-multi-page-demo
结论整体开发和使用下来,感觉更舒适及方便。(哈哈或者也是金蝉大佬选择这种方式的原因吧)
由于 lowcode-demo 甚至 lowcode-engine 及生态已经根据 提供等一系列完整操作闭环,而我们剩下的操作,就是在恰当的时机去 removeDocument 和 openDocument
project.importSchema 方法会重置 project.currentDocument,要特别注意 importSchema 前后的 currentDocument 是否一致,以免错误获取、更新、保存当前页 Schema。
参考
你还可以在以下地址找到本文:
- 语雀@blueju
- 掘金@blueju
- https://lowcode-engine.cn
- https://github.com/mark-ck
- https://github.com/alibaba/lowcode-engine
推荐阅读
- 跨平台代码编辑器工具sublime text
- 软件测试|自动化测试也可以不写代码(今天就教你)
- CI与开源代码安全篇 | 龙智邀您共赴GOPS全球运维大会,探索大规模、敏捷、安全、开放式的软件研发与运营之路
- 阿里云认证的优势是什么(考试注意事项是什么?)
- 数据增强|细粒度识别 DCL 论文及代码学习笔记
- JEECG低代码平台|JeecgBoot 3.4.0 版本发布,微服务重构版本
- 阿里巴巴达摩院(自然语言处理技术有哪些进展和趋势())
- 服务器与GIT仓库代码保持同步
- 被人低估的虎山长城
- C语言实现静态版通讯录的示例代码