皮皮网

1.基于 VUE3 可视化低代码表单设计器
2.XRender - 开源之路
3.开源Vue表单设计器
4.activiti在线设计-Activiti6.0中如何设计和关联表单？
5.聊聊低代码的表单表单引擎
6.可能是你见过最专业的表单方案---解密Formily2.0

基于 VUE3 可视化低代码表单设计器

       格子表单/GRID-FORM已在Github开源，如能帮到您麻烦给个星点此查看在线文档及演示

       楔子

       大概4年前，设计我做了一个简单的器源动态表单功能，开发人员通过UI界面配置表单（其实就是码表添加常用的控件，如文本框、单设下拉框等）就能向用户提供数据查询，计器甲醛 网站源码反响不错，源码尤其是表单偏后端开发的小伙伴。

       时至今日，设计上述功能存在以下问题：

       目前书面上已经有不少优秀开源的器源同类产品，这里列出可二次开发的码表，同时具备表单渲染、单设表单设计的计器工具（截止至年底）

       再造个轮子吧

       同类型的开源产品各有千秋，适合不同的源码应用场景，然而跟我想要的表单还不够契合。权衡后，还是觉得自己弄一个。技术选型为vue3 + naive UI，使用pnpm进行包管理（monorepo结构）。

       不同于同类型产品的组件拖拽，我采用栅栏布局来堆积组件（实现起来简单，省事，暂不支持容器嵌套、子表单），通过设置组件占据的格子数可以使其独占一行，故取名GRID-FORM（栅栏表单），源码详见Github。

       表单设计器

       得益于VUE的响应式，设计器所见即所得显得尤为丝滑，不然得自己手撸监听配置项变动事件及界面重绘。

       编辑器分为左中右三个区域（这是业内约定俗成的标准设计），有别于兄弟产品，手指掘金源码我把左区域用作表单整体的参数编辑。为方便用户自定义组件，设计器对外暴露组件库参数，并封装了常用的组件（诸如输入框、单选/多选框、日期选择）。

       组件分为数据型（对应上图中的输入组件、选择组件）及展示型（上图的展示组件）两类，后者不参与表单提交。

       渲染器组件渲染

       每个组件有唯一编号，渲染函数为一个Object（key即为组件编号），需要扩展组件时添加对应的渲染函数即可。渲染时属性分为基本信息（名称我用_开头加以区分）及组件层面两类，分别对应了组件渲染函数的两个参数：attrs、props。

       渲染引擎处理完属性后，调用Render函数（不同UI库各自实现，使用者可根据业务需要自行覆写）得到组件实例。此处以文本输入框INPUT为例：

       默认值

       表单项默认值可以填写常量或占位符（在初始化时被模板引擎赋值），占位符格式为${ code}，用户可自行扩展处理函数。

       校验

       此处校验分为非空、内容格式两种

       当表单项勾选是否必填，则在提交前渲染器会对该值进行非空检测；若设置了校验正则，则对非空值进行正则表达式校验。

       事件&钩子函数

       参数说明

       数据联动

       常规的做法是输入类表单项增加事件（如onChange、onBlur、onFocus等），但是这样操作（实现）繁琐（困难），我的做法只需要填写一处代码（直观简单）

       要启用联动需要满足以下条件：

       渲染器初始化后，会对勾选监听值变动的怎么写好源码表单项开启监听（没错，是每个表单值有独立的监听）从而获取到新旧值。注意，若在回调函数中对form改动会重新触发onChange事件。

       示例

       适配更多UI库

       目前已实现Naive UI、Vant4的渲染器

       我封装了渲染器的基础框架（组合式API），帮助使用者根据需要快速适配心仪的UI库。

       结语

       因个人能力有限，此工具在设计、实现上存在诸多不足，仅作学习交流。

XRender - 开源之路

       XRender，阿里飞猪孵化的开源产品，目前在GitHub上获得4.2k star。本文旨在分享XRender在过去一年内的发展和变革，以及它如何成为更多前端开发者的朋友。

       一、前言

       1. 什么是 XRender？XRender 是一套基于React.js框架的轻量、易用、易上手的中后台「表单 / 表格 / 图表」解决方案，已经在阿里飞猪内部服务三年，未来将持续为用户提供服务。

       2. 为什么需要 XRender？对于中后台业务而言，表单+表格能覆盖%的业务场景，且大部分场景重复度高。开发人员无需浪费时间在切图上，XRender这类工具能有效提升开发效率。

       二、XRender 的自我革新

       三年前，FormRender作为表单解决方案在GitHub上开源，成为XRender家族的首成员。面对复杂业务场景，红杉源码代码FormRender的旧技术方案面临挑战，内部决定升级FormRender，并增加更多Render方案，以提升内部前端开发者的效率。

       现在的XRender包括FormRender、FRGenetator、TableRender和ChartRender四个组件，统称为XRender。

       1.「FormRender」：协议驱动的表单解决方案。代码示例展示其核心功能不变，遵循「协议驱动渲染」原则。

       代码重构，面向未来：FormRender 1.x 对内核进行彻底重构，全面拥抱React Hooks和Antd Design 4.x，增加Typescript类型定义，简化编写方式。新增beforeFinish、onFinish钩子，用于表单提交前的校验和数据提交，以及onMount方法，类似于React的componentDidMount。引入userForm方法，方便操作表单和schema，提供动态修改功能。新增watch变量，用于数据监听，增加组件丰富度，如rate、treeSelect等内置支持，以及通过JSON Schema的format属性自定义组件。

       2.「表单设计器」：中后台表单可视化搭建工具，无锡源码开发提供可拖拽、可搭建能力，并支持导出schema。

       3.「TableRender」：表格解决方案，内置搜索、重置、分页功能，简化开发流程。

       4.「ChartRender」：基于@ant-design/charts的图表解决方案，提供快速生成图表的能力。

       三、适合场景

       XRender广泛应用于阿里飞猪的中后台业务，同时被阿里云、高德、淘宝、蚂蚁等BU的开发者使用。对于面向运营的搭建平台，推荐使用XRender。

       四、未来规划

       1. 内置组件支持自定义：开放List、Array类型的嵌套组件样式定制化，满足不同业务需求。

       2. XRender 2.0开发：计划于年中旬完成，支持移动端渲染引擎Rax和Ant Design Mobile v5。

       五、结尾

       感谢XRender的开发者，特别制作视频以致敬社区。如果你希望在项目中使用XRender，可访问文档站点快速上手。若对源代码感兴趣或有建议，欢迎访问GitHub仓库。如XRender对你有帮助，请在GitHub上给予支持。

开源Vue表单设计器

       开源Vue表单设计器详解

       Vue表单设计器是一个开源的创新项目，旨在简化前端开发者在构建动态表单时的开发过程。它提供了一种直观且灵活的方式来设计和定制各种复杂的表单，无需深入编码即可实现高效开发。

       项目的首要功能是生成高度可定制的表单，用户可以根据需求选择字段类型、布局和验证规则，轻松构建出符合业务需求的表单界面。设计师和开发者可以在此基础上进行扩展，满足不同场景的复杂需求。

       在技术选型上，Vue表单设计器充分利用了Vue.js的强大组件化能力，结合HTML、CSS和Vue的指令，实现了组件化的设计和开发模式。此外，它还可能采用了现代前端框架的最佳实践，如Vuex进行状态管理，Webpack进行模块打包和优化，确保了项目的高效运行和稳定性能。

       界面展示方面，设计者注重用户体验，界面简洁直观，易于上手。无论是表单的预览还是实际应用，都能让用户在轻松愉快的环境中完成设计。丰富的可视化工具和实时预览功能，使得设计过程更加直观和高效。

       如果你对这个开源项目感兴趣，可以直接访问源码地址，查看代码、贡献或获取帮助。源码地址提供了项目的最新进展和开发者社区支持，是深入学习和参与该项目的绝佳入口。

activiti在线设计-Activiti6.0中如何设计和关联表单？

       activiti6的流程编辑器怎么整合进自己的项目中

       å»ºè®®ä½ å¯ä»¥çœ‹ä¸€ä¸‹å’–啡兔的相关技术博文:

       ç½‘页链接

       ,

       activiti6和activiti5整合方式一致

       1.为什么要整合

       Activiti5.版本把原本独立的ActivitiModeler模块整合到了ActivitiExplorer中,两者相结合使用起来很方便,通过Modeler设计的流程模型可以直接部署到引擎,也可以把已经部署的流程转换为Model从而在Modeler中编辑。

       åœ¨å®žé™…应用中也有这样的需求,把Modeler整合到业务系统中可以供管理员使用,或者作为BPM平台的一部分存在,很遗憾官方没有给出如何整合Modeler的文档。

       2.整合工作

       2.1下载源码

       é¦–先需要从Github下载源码:

       2.2复制文件

       å¤åˆ¶çš„所有文件均在activiti-webapp-explorer2目录中。

       src/main/resources中的、、到项目源码的源码根目录,保证编译之后在classes根目录

       src/main/webapp中的api、editor、explorer、libs到项目的webapp目录(与WEB-INF目录同级)

       2.3添加依赖

       

       <dependency>__<groupid></groupid>__<artifactid>activiti-explorer</artifactid>__<version>5.</version>__<exclusions>____<exclusion>______<artifactid>vaadin</artifactid>______<groupid></groupid>____</exclusion>____<exclusion>______<artifactid>dcharts-widget</artifactid>______<groupid></groupid>____</exclusion>____<exclusion>______<artifactid>activiti-simple-workflow</artifactid>______<groupid></groupid>____</exclusion>__</exclusions></dependency><dependency>__<groupid></groupid>__<artifactid>activiti-modeler</artifactid>__<version>5.</version></dependency>

       2.4添加Javaç±»

       æ·»åŠ ä¸€ä¸ªç±»ä¿å­˜åˆ°é¡¹ç›®ä¸­,注册了一些REST路由。

       

       package;

       import;import;import;import;import;import;

       publicclassExplorerRestApplicationextendsActivitiRestApplication{

       publicExplorerRestApplication(){ __super();_}_/**_*CreatesarootRestletthatwillreceiveallincomingcalls._*/_@Override_publicsynchronizedRestletcreateInboundRoot(){ __Routerrouter=newRouter(getContext());__();__(router);__(router);__JsonpFilterjsonpFilter=newJsonpFilter(getContext());__(router);__returnjsonpFilter;_}

       }

       2.5配置

       åœ¨æ–‡ä»¶ä¸­æ·»åŠ å¦‚下配置:

       

       <!--Restletadapter,usedtoexposemodelerfunctionalitythroughREST--><servlet>__<servlet-name>RestletServlet</servlet-name>__<servlet-class></servlet-class>__<init-param>____<!--Applicationclassname-->____<param-name></param-name>____<param-value></param-value>__</init-param></servlet>

       <!--Catchallservicerequests--><servlet-mapping>__<servlet-name>RestletServlet</servlet-name>__<url-pattern>/service/*</url-pattern></servlet-mapping>

       2.6控制器

       ä½¿ç”¨SpringMVC做了一个简单的封装,也可以使用其他的MVC实现。

       

       package;

       import;import;

       import;import;

       import;import;import;import;import;import;import;import;import;import;import;import;import;import;import;import;import;import;import;import;import;

       /***流程模型控制器**@authorhenryyan*/@Controller@RequestMapping(value="/workflow/model")publicclassModelController{

       protectedLoggerlogger=(getClass());

       @Autowired_RepositoryServicerepositoryService;

       /**_*模型列表_*/_@RequestMapping(value="list")_publicModelAndViewmodelList(){ __ModelAndViewmav=newModelAndView("workflow/model-list");__List<model>list=().list();__("list",list);__returnmav;_}

       /**_*创建模型_*/_@RequestMapping(value="create")_publicvoidcreate(@RequestParam("name")Stringname,@RequestParam("key")Stringkey,@RequestParam("description")Stringdescription,_____HttpServletRequestrequest,HttpServletResponseresponse){ __try{ ___ObjectMapperobjectMapper=newObjectMapper();___ObjectNodeeditorNode=();___("id","canvas");___("resourceId","canvas");___ObjectNodestencilSetNode=();___("namespace","#");___("stencilset",stencilSetNode);___ModelmodelData=();

       ObjectNodemodelObjectNode=();___(_NAME,name);___(_REVISION,1);___description=(description);___(_DESCRIPTION,description);___(());___(name);___((key));

       (modelData);___((),().getBytes("utf-8"));

       (()+"/service/editor?id="+());__}catch(Exceptione){ ___("创建模型失败:",e);__}_}

       /**_*根据Model部署流程_*/_@RequestMapping(value="deploy/{ modelId}")_publicStringdeploy(@PathVariable("modelId")StringmodelId,RedirectAttributesredirectAttributes){ __try{ ___ModelmodelData=(modelId);___ObjectNodemodelNode=(ObjectNode)newObjectMapper().readTree((()));___byte[]bpmnBytes=null;

       BpmnModelmodel=newBpmnJsonConverter().convertToBpmnModel(modelNode);___bpmnBytes=newBpmnXMLConverter().convertToXML(model);

       StringprocessName=()+".";___Deploymentdeployment=().name(()).addString(processName,newString(bpmnBytes)).deploy();___("message","部署成功,部署ID="+());__}catch(Exceptione){ ___("根据模型部署流程失败:modelId={ }",modelId,e);__}__return"redirect:/workflow/model/list";_}

       /**_*导出model的xml文件_*/_@RequestMapping(value="export/{ modelId}")_publicvoidexport(@PathVariable("modelId")StringmodelId,HttpServletResponseresponse){ __try{ ___ModelmodelData=(modelId);___BpmnJsonConverterjsonConverter=newBpmnJsonConverter();___JsonNodeeditorNode=newObjectMapper().readTree((()));___BpmnModelbpmnModel=(editorNode);___BpmnXMLConverterxmlConverter=newBpmnXMLConverter();___byte[]bpmnBytes=(bpmnModel);

       ByteArrayInputStreamin=newByteArrayInputStream(bpmnBytes);___(in,());___Stringfilename=().getId()+".";___("Content-Disposition","attachment;filename="+filename);___();__}catch(Exceptione){ ___("导出model的xml文件失败:modelId={ }",modelId,e);__}_}

       }</pre>

       ###2.7注意事项

       å¦‚果使用Spring代理引擎,并且在项目中同时有文件(不管在main/resources还是test/resources目录),在里面的引擎中添加下面的配置参数,否则会导致打开Modeler的编辑页面时读取数据返回****状态码。

       <preclass="brush:xml"><propertyname="processEngineName"value="test"></property></pre>

       å¼•æ“Žé»˜è®¤åç§°ä¸ºdefault,()查询时会先检索main/resources,然后再检索test/resources的和文件,所以当main/resources监测不到指定文件时就会导致该引擎被当做web应用的引擎对象,这样会导致有两个引擎,所以把引擎的名称改为非默认的“default”。

       ##3.中文乱码问题解决办法

       åœ¨JVM参数中添加参数:

       >-=UTF-8-=UTF-8

       **参考**:[在ActivitiModeler中设计的流程包含奇数个中文时不能部署问题](

       ##4.效果截图

       åœ¨æœ€æ–°çš„kft-activiti-demo版本(1.7.0)中已经集成了ActivitiModeler,可以在线访问,也可以下载源码学习如何配置。

       ç™»å½•[

       </model>

Activiti6.0中如何设计和关联表单？

       æ–°å¢žäº†çŽ¯èŠ‚用户任务,这时紧跟着新增一个表单即可,以及脚本、样式、WebAPI;删除了环节用户任务,这时可以不用管,为顾及旧版本的流程定义,其对应的表单还需要保留,并不能删除;修改了环节用户任务,比如在A环节新增了两个字段,同时在B环节减少了两个字段,这时就要为A、B两个环节各自重新创建表单、重新创建脚本、样式、以及重新创建WebAPI,因为表单变了,那么业务也就变了,SQL(表)也都跟着变了。

《Activiti实战》epub下载在线阅读全文，求百度网盘云资源

       ã€ŠActiviti实战》(闫洪磊)电子书网盘下载免费在线阅读

       é“¾æŽ¥:

       æå–码:xdni

       ä¹¦å:Activiti实战

       è±†ç“£è¯„分:7.2

       ä½œè€…:闫洪磊

       å‡ºç‰ˆç¤¾:_倒ひ党霭嫔

       å‡ºç‰ˆå¹´:-1-1

       é¡µæ•°:

       å†…容简介:

       ã€ŠActiviti实战》立足于实践,不仅让读者知其然,全面掌握Activiti架构、功能、用法、技巧和最佳实践,广度足够;而且让读者知其所以然,深入理解Activiti的源代码实现、设计模式和PVM,深度也足够。

       ã€ŠActiviti实战》一共四个部分:准备篇(1~2ç« )介绍了Activiti的概念、特点、应用、体系结构,以及开发环境的搭建和配置;基础篇(3~4ç« )首先讲解了ActivitiModeler、ActivitiDesigner两种流程设计工具的详细使用,然后详细讲解了BPMN2.0规范;实战篇(5~ç« )系统讲解了Activiti的用法、技巧和最佳实践,包含流程定义、流程实例、任务、子流程、多实例、事件以及监听器等;高级篇(~)通过集成WebService、规则引擎、JPA、ESB等各种服务和中间件来阐述了Activiti不仅仅是引擎,实际上是一个BPM平台,最后还通过源代码对它的设计模式及PVM进行了分析。

       ä½œè€…简介:

       é—«æ´ªç£Š(咖啡兔)资深软件开发工程师和架构师,为Activiti贡献了大量代码,为Activiti在中国的推广与普及做了大量的工作,在社群中有很高的威望和知名度,被称为中国Activiti领域的第一人。多年来一直从事OA、ERP等系统的开发与架构设计工作,持续关注并深入研究工作流引擎,目前就职于小马购车,担任架构师一职,并负责公司内部工作流平台的建设工作。

聊聊低代码的表单引擎

       表单在数字化世界的基石作用不容忽视，无论是构建企业服务、内部工具还是面向消费者的C端应用，它的设计直接影响用户体验和业务效率。随着低代码平台的兴起，表单设计成为了创新的重要推动力。

       表单可能看似平凡，实则无处不在。从商场会员注册、后台数据录入到各类办公单据、统计调查问卷，甚至是财务报销和税务报表，表单扮演着至关重要的信息收集角色。它的核心目标是用户便捷地提交信息，无论产品类型如何，表单都是构建其功能不可或缺的组成部分。

       特别提到的是JNPF表单设计，作为低代码平台的核心功能，它提供了可视化建模工具，如电子表单或表单引擎，让用户能够轻松创建和定制表单。JNPF以Vue低代码表单为基石，通过一键生成源码，释放开发者的创新时间。

       尽管JNPF以直观的“拖拽”操作为主，但它也针对专业前端开发者优化，不仅提供全面的配置解决方案，还能简化重复性工作，让开发者专注于高级交互设计。其开放的架构允许开发者深度定制，即使初学者也能在短时间内上手，掌握诸如联动、格式验证等复杂功能。

       总结来说，低代码中的表单设计并非易事，但它带来的挑战与深度思考的乐趣并存。深入理解并实践低代码，不仅有助于提升产品设计，也是提升业务洞察力的过程。不妨尝试一下，探索低代码表单设计的无限可能吧。

可能是你见过最专业的表单方案---解密Formily2.0

       Formily2.0官网：v2.formilyjs.org/，源码地址：github.com/alibaba/formilyjs。项目由笔者发起，特别感谢阿里数字供应链事业部对Formily项目的重视与支持，以及宋思辰为Formily2.0贡献了高性能的@formily/vue组件，潇泽贡献了智能网格布局组件FormGrid。

       如果你是初次接触Formily，可以阅读介绍以了解其如何解决表单问题。对于已有使用经验的用户，你会发现Formily2.0的定位从复杂场景扩展到了企业级表单的专业解决方案，专业性体现在以下几个方面：

       Formily2.0自信地表示它足够专业，并且在性能优化、依赖关系管理、包设计、答疑成本控制等方面进行了深入改进。

       关于性能优化，解决性能问题的关键在于减少初次渲染的阻塞式计算，通过引入Reactive模式并采用类似Mobx的解决方案，优化了性能，同时减少了props脏检查的副作用。此外，引入被动联动模式，借助@formily/reactive，实现了响应式领域模型，大大提高了性能。

       依赖关系问题上，移除了styled-components、immerjs和rxjs的依赖，改用组件库自身的样式体系，如antd，或替代方案，如less和scss。这不仅减少了体积，还提高了可控性和稳定性。

       在包设计方面，统一组件包到@formily/antd，抽离了@formily/json-schema包，移除了@formily/react-shared-components，确保每个包的职责明确。

       答疑成本问题得到缓解，通过定义新Schema Type Void、引入x-decorator/x-decorator-props描述包装器、维护dataSource状态、定义x-reactions响应器概念，以及废弃自动删值的默认行为，使答疑更加清晰。

       自定义组件扩展机制采用工厂式注册，使用@formily/reactive实现更优雅的开发方式，引入readPretty模式，使自定义组件更加灵活。

       文档体系的完善使得查找文档变得容易，便于维护和使用者查找。

       发量问题得到了解决，通过解决所有之前的问题，确保了系统更加高效稳定。

       Formily2.0的亮点包括独立的响应式解决方案@formily/reactive，更优雅的开发方式，支持Vue2/Vue3，以及Effects局部状态、智能网格布局、响应式并发渲染等特性。

       总结来说，Formily2.0在多个方面进行了全面改进，旨在提供专业级的企业级表单解决方案，通过引入Reactive响应式编程模式，解决了性能、依赖、包设计、答疑成本等核心问题，为开发者提供了一个高效、灵活且易于维护的表单框架。