常规开发-》json配置式页面开发-> 可视化搭建
可视化搭建可先只涉及页面布局跟页面交互,暂不涉及业务逻辑处理,因为中后台产品的业务逻辑处理一般比较复杂;
实现方式:
1, 自定义组件 方式 (目前第三方开源多为这种方式)
2. 框架源码注入。这种方式对代码侵入最小,在框架生命周期内将配置转换为真实组件,不影响性能,针对不同框架vue和react需要分别实现,
3. webpack 打包工具
第三方开源 ncform 基于vue 实现了基于element ui的自定义组件 实现配置form表单以及简单table,表单的校验,也支持自定义组件以及自定义校验规则,5分钟实现一个页面不再是梦想
缺点:配置数据全部挂载在data上面,感觉对性能是一个负担,经实际验证,配置数据10000条,会产生400-500ms左右延迟(结果还是可以接受)。
另外,对第三方ui支持不太好,虽然可以使用自定义组件去封装一下,但这样对代码的侵入性较大
ams 基于vue 可以看做是ncform 高级版,同是唯品会前端团队开源出来的,但这玩意经实际测试有严重的性能问题,不推荐 JSON Schema
基于react amis 基于react 目前体验最好,周边还有提供有一个可视化搭建的编辑器(设计得不太好用),可以一键生成配置文件。