首页 » 软件开发 » 低代码平台/零代码平台自主开发技术实现方案(表单可视化代码开发流程)

低代码平台/零代码平台自主开发技术实现方案(表单可视化代码开发流程)

雨夜梧桐 2024-07-24 01:59:46 0

扫一扫用手机浏览

文章目录 [+]

目前市场上主流的低代码平台产品,大家可以学习参考:

国内国外主流的低代码平台/零代码平台有哪些?

低代码平台至少包含表单建模、流程设计、报表可视化、代码生成器、系统管理、前端UI等组件,我们没必要重新造轮子,市场上已经有大量的成熟组件,选择合适的组件进行集成和二次开发,即可自主开发一个低代码平台。
以下是以java + vue为开发技术的选型参考。

低代码平台/零代码平台自主开发技术实现方案(表单可视化代码开发流程) 软件开发
(图片来自网络侵删)
一、流程引擎选型

市场上比较有名的开源流程引擎有osworkflow、jbpm、activiti、flowable、camunda。
其中:Jbpm4、Activiti、Flowable、camunda四个框架同宗同源,祖先都是Jbpm4,开发者只要用过其中一个框架,基本上就会用其它三个。
开发低代码平台、OA系统、BPM软件均需要流程可视化功能,而流程可视化核心是流程引擎和流程设计器,对于市场上如此多的开源流程引擎,哪个功能和性能好,该如何选型呢?

1、Osworkflow

Osworkflow是一个轻量化的流程引擎,基于状态机机制,数据库表很少,Osworkflow提供的工作流构成元素有:步骤(step)、条件(conditions)、循环(loops)、分支(spilts)、合并(joins)等,但不支持会签、跳转、退回、加签等这些操作,需要自己扩展开发,有一定难度,如果流程比较简单,osworkflow是很号的选择,性能很高。
官方网站:http://www.opensymphony.com/osworkflow/

2、JBPM

JBPM由JBoss公司开发,目前最高版本JPBM7,不过从JBPM5开始已经跟之前不是同一个产品了,JBPM5的代码基础不是JBPM4,而是从Drools Flow重新开始,基于Drools Flow技术在国内市场上用的很少,所有不建议选择jBPM5以后版本,jBPM4诞生的比较早,后来JBPM4创建者Tom Baeyens离开JBoss后,加入Alfresco后很快推出了新的基于jBPM4的开源工作流系统Activiti, 另外JBPM以hibernate作为数据持久化ORM也已不是主流技术。
现在时间节点选择流程引擎,JBPM不是最佳选择。
官方网站:https://www.jbpm.org/

3、Activiti

activiti由Alfresco软件开发,目前最高版本activiti 7。
activiti的版本比较复杂,有activiti5、activiti6、activiti7几个主流版本,选型时让人晕头转向,有必要先了解一下activiti这几个版本的发展历史。
activiti5和activiti6的核心leader是Tijs Rademakers,由于团队内部分歧,在2017年时Tijs Rademakers离开团队,创建了后来的flowable, activiti6以及activiti5代码已经交接给了 Salaboy团队, activiti6以及activiti5的代码官方已经暂停维护了, Salaboy团队目前在开发activiti7框架,activiti7内核使用的还是activiti6,并没有为引擎注入更多的新特性,只是在activiti之外的上层封装了一些应用。
结论是activiti谨慎选择。
官方网站:https://www.activiti.org/

4、flowable

flowable基于activiti6衍生出来的版本,flowable目前最新版本是v6.6.0,开发团队是从activiti中分裂出来的,修复了一众activiti6的bug,并在其基础上研发了DMN支持,BPEL支持等等,相对开源版,其商业版的功能会更强大。
以flowable6.4.1版本为分水岭,大力发展其商业版产品,开源版本维护不及时,部分功能已经不再开源版发布,比如表单生成器(表单引擎)、历史数据同步至其他数据源、ES等。
Flowable 是一个使用 Java 编写的轻量级业务流程引擎,使用 Apache V2 license 协议开源。
2016 年 10 月,Activiti 工作流引擎的主要开发者离开 Alfresco 公司并在 Activiti 分支基础上开启了 Flowable 开源项目。
基于 Activiti v6 beta4 发布的第一个 Flowable release 版本为6.0。
Flowable 项目中包括 BPMN(Business Process Model and Notation)引擎、CMMN(Case Management Model and Notation)引擎、DMN(Decision Model and Notation)引擎、表单引擎(Form Engine)等模块。
官方网站:https://flowable.com/open-source/

5、Camunda

Camunda基于activiti5,所以其保留了PVM,最新版本Camunda7.15,保持每年发布2个小版本的节奏,开发团队也是从activiti中分裂出来的,发展轨迹与flowable相似,同时也提供了商业版,不过对于一般企业应用,开源版本也足够了。
官方网站:https://docs.camunda.org/manual/7.15/。

开源流程引擎该选择哪一个呢,见该文章详细分析:开源流程引擎activiti、flowable、camunda哪个好

二、流程设计器选型

对于低代码平台中的流程可视化,流程设计器是重要的支撑工具,目前市场上比较主流的流程设计器有bpmn-js、mxGraph、Activiti-Modeler、flowable-modeler、easy-flow、bpmn2-modeler插件等。

1、bpmn-js

bpmn-js 是 BPMN 2.0 渲染工具包和 Web 模型。
bpmn-js 正在努力成为 Camunda BPM 的一部分。
bpmn-js 使用 Web 建模工具可以很方便的构建 BPMN 图表,可以把 BPMN 图表嵌入到你的项目中,容易扩展。
bpmn-js是基于原生js开发,支持集成到vue、react等开源框架中。

官方网站:https://bpmn.io/

2、mxGraph

mxGraph是一个强大的JavaScript流程图前端库,可以快速创建交互式图表和图表应用程序,国内外著名的ProcessOne和draw.io都是使用该库创建的强大的在线流程图绘制网站. 由于mxGraph是一个开放的js绘图开发框架,我们可以开发出很炫的样式,或者完全按照项目需求定制。
官方网站:http://jgraph.github.io/mxgraph/

3、Activiti-Modeler

Activiti 开源版本中带了web版流程设计器,在Activiti-explorer项目中有Activiti-Modeler,优点是集成简单,开发工作量小,缺点是界面不美观,用户体验差。

4、flowable-modeler

flowable开源版本中带了web版流程设计器,展示风格和功能基本跟Activiti-Modeler一样,优点是集成简单,开发工作量小,缺点是界面不美观,用户体验差。

5、Eclipse插件bpmn2-modeler

C/S版本的流程设计器,如果没有强调基于浏览器设计流程图,也可以考虑Eclipse插件版流程设计器bpmn2-modeler。
官方地址:http://www.eclipse.org/bpmn2-modeler/

推荐大家使用camunda(流程引擎)+bpmn-js(流程设计器)组合,功能比flowable、activiti流程引擎强大,性能和稳定性更好。

三、表单设计器选型

1、form-generator

form-generator 是基于Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中;也可导出JSON表单,使用配套的解析器将JSON解析成真实的表单。

官方地址:https://gitee.com/mrhj/form-generator?_from=gitee_search

2、vue-form-making

vue-form-making基于 vue 和 element-ui 实现的可视化表单设计器,使用了最新的前端技术栈,内置了 i18n 国际化解决方案,可以让表单开发简单而高效。

https://gitee.com/gavinzhulei/vue-form-making?_from=gitee_search

3 、k-form-design

k-form-design设计器布局参考form-generator项目,基于vue和ant-design-vue实现的表单设计器,样式使用less作为开发语言,主要功能是能通过简单操作来生成配置表单,生成可保存的JSON数据,并能将JSON还原成表单,使表单开发更简单更快速

https://gitee.com/kcz66/k-form-design?_from=gitee_search

表单可视化不单单是表单设计器,更重要的是表单引擎,详细见文章:表单开发可视化(电子表单)技术方案

四、vue框架选型

1、ElementUI

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

https://element.eleme.cn/#/zh-CN

2、Ant Design Vue

蚂蚁金服出品,Ant Design 作为一门设计语言面世,经历过多年的迭代和积累,它对 UI 的设计思想已经成为一套事实标准,受到众多前端开发者及企业的追捧和喜爱,也是 React 开发者手中的神兵利器。
希望 ant-design-vue 能够让 Vue 开发者也享受到 Ant Design 的优秀设计。

ant-design-vue 是 Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步,组件的 html 结构和 css 样式也保持一致,真正做到了样式 0 修改,组件 API 也尽量保持了一致。
Ant Design Vue 致力于提供给程序员愉悦的开发体验。

https://www.antdv.com/docs/vue/introduce-cn/

3、Vue Antd Admin

Ant Design Pro 的 Vue 实现版本,开箱即用的中后台前端/设计解决方案。
开源免费用。

https://gitee.com/iczer/vue-antd-admin#https://iczer.gitee.io/vue-antd-admin

4、Vue-Vben-Admin

Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。
包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。
项目会使用前端较新的技术栈,可以作为项目的启动模版,以帮助你快速搭建企业级中后台产品原型。
也可以作为一个示例,用于学习 vue3、vite、ts 等主流技术。
该项目会持续跟进最新技术,并将其应用在项目中。

https://vvbin.cn/doc-next/guide/introduction.html

5、vue-admin-beautiful

采用vue + element-ui 前后端分离开发模式、面向全屏幕尺寸的响应式适配能力(兼容电脑、手机、平板),有vue2和vue3两个版本,分开源版本和付费版,适合正在以及想使用 element-ui/element-plus 开发,前端开发经验 1 年+,熟悉 Vue.js 技术栈,使用它开发过几个实际项目的团队。

官方地址:https://github.com/chuzhixin/vue-admin-beautiful

6、Avue.js

Avue.js2.0是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,容易维护和扩展的框架,同时内置了丰富了数据展示组件,让开发变得更加容易,avue-cli是后台模版。
企业版本收费。

官方网站:https://avuejs.com

五、系统管理组件选型

1、若依RuoYi-Vue

基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统,目前是码云开源里很火的一个框架,优点是提供了系统管理常用的功能,比如:组织管理、角色管理、日志管理等,设计比较简单,功能比较聚焦,代码好读懂,缺点是电子表单、流程引擎收费。

https://gitee.com/y_project/RuoYi-Vue

2、jeecg-boot

JeecgBoot 是一款基于代码生成器的低代码开发平台!
前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue,Mybatis-plus,Shiro,JWT,支持微服务。
优点是提供了组织管理、角色管理、日志管理等系统管理常用的功能,组件比ruoyi多,涉及面比较广,代码生成器功能比较强大,但代码比ruoyi复杂,完全读懂可维护有难度,缺点是电子表单、流程引擎收费。

https://gitee.com/jeecg/jeecg-boot

3、OPSLI

该平台自带了菜单管理、角色管理、组织机构、租户管理、字典管理、配置管理、系统设置等系统管理常用模块。

官方地址:http://demo.opsli.arcinbj.com/#/index

六、可视化图表选型

相比于传统手工定制的图表与数据仪表盘,图表可视化制作平台的出现,可以打破抵消的定制开发, 数据分散的问题,通过数据采集、清洗、分析到直观实时的数据可视化展现,能够多方位、多角度、全景展现各项指标,实时监控,动态一目了然。

可视化图表库技术选型,目前笔者调研的已知主流可视化库有:

• echart 一个基于 JavaScript 的老牌开源可视化图表库

• D3.js 一个数据驱动的可视化库, 可以不需要其他任何框架独立运行在现代浏览器中,它结合强大的可视化组件来驱动 DOM 操作

• antv 包含一套完整的可视化组件体系

• Chart.js 基于 HTML5 的 简单易用的 JavaScript 图表库

• metrics-graphics 建立在D3之上的可视化库, 针对可视化和布置时间序列数据进行了优化

• C3.js 通过包装构造整个图表所需的代码,使生成基于D3的图表变得容易

我们使用以上任何一个库都可以实现我们的可视化大屏搭建的需求, 各位可以根据喜好来选择.

七、主流技术栈推荐

前端采用vue.js,后端采用springboot,基于前后端分离、微服务、云原生架构。

后端技术栈:

Java EE 8+ (开发语言、软件构建、运行需要)

Spring Boot 2.6.5 (Springboot主框架)

Spring Framework 5.3.17.RELEASE (Spring主框架)

Spring Cloud 2021.0.1 (SpringCloud主框架)

Mybatis-plus 3.5.1 (持久化框架)

Druid 1.2.9(数据库连接池)

Apache Shiro 1.7.1 (权限组件)

JWT 3.19.1 (登录验证加密token)

Quartz 2.3.x(定时任务)

Springfox-swagger 3.0.0(在线API)

Logback 1.2.11 (日志接口)

minio 8.3.x (分布式文件存储)

Redis 3.2+ (缓存,软件运行需要)

Mysql 5.7+ (数据库,软件运行需要)

前端技术栈:

vue 2.6.x (vue主框架)

ant-design-vue 1.7.2 (vue组件)

vxe-table 3.0.0 (vue表格组件)

less 3.9.x (css管理工具)

AntV 1.1.5 (图表组件)

uni-app (小程序框架)

八、技术架构要求

1、云原生架构(满足云原生12要素)

2、微服务架构(支持跟Spring Cloud、Istio集成)

3、容器云部署(支持kubernetes、docker部署)

4、移动互联支持(支持移动APP、小程序)

5、前后端分离、服务化架构(前端vue、后端springboot,restful服务交互)

6、国产化适配(信创服务器、数据库、中间件等适配)

7、可视化低代码开发(数据建模、表单建模、流程建模、报表建模等)

8、技术体系开放(要用良好生态的主流成熟组件,不要封闭自研)

相关文章

语言中的借用,文化交融的桥梁

自古以来,人类社会的交流与发展离不开语言的传播。在漫长的历史长河中,各民族、各地区之间的文化相互碰撞、交融,产生了许多独特的语言现...

软件开发 2025-01-01 阅读1 评论0

机顶盒协议,守护数字生活的新卫士

随着科技的飞速发展,数字家庭逐渐走进千家万户。在这个时代,机顶盒成为了连接我们与丰富多彩的数字世界的重要桥梁。而机顶盒协议,作为保...

软件开发 2025-01-01 阅读1 评论0

语言基础在现代社会的重要性及方法步骤

语言是人类沟通的桥梁,是社会发展的基础。语言基础作为语言学习的基石,对于个人、社会乃至国家的发展具有重要意义。本文将从语言基础在现...

软件开发 2025-01-01 阅读2 评论0

粤语电影,传承文化,点亮时代之光

粤语电影,作为中国电影产业的一朵奇葩,以其独特的地域特色、丰富的文化内涵和鲜明的艺术风格,赢得了广大观众的喜爱。本文将从粤语电影的...

软件开发 2025-01-01 阅读3 评论0

苹果游戏语言,塑造未来娱乐体验的基石

随着科技的飞速发展,游戏产业逐渐成为全球娱乐市场的重要支柱。在我国,游戏产业更是蓬勃发展,吸引了无数玩家和投资者的目光。而在这其中...

软件开发 2025-01-01 阅读1 评论0