Activiti工作流学习之SpringBoot整合Activiti5.22.0实现在线设计器(二)

一、概述

  网上有很多关于Eclipse、IDEA等IDE插件通过拖拽的方式来画工作流程图,个人觉得还是不够好,所以花点时间研究了一下Activiti在线设计器,并与SpringBoot整合,期间也遇到了很多问题,看了很多资料,例如b站视频:https://www.bilibili.com/video/av36668918?from=search&seid=8976141060328773015(个人觉得讲的挺详细的),以及这篇博客:http://jmysql.com/activiti/126.html,学习了大牛们的视频和文章以后,自己也该做一些记录。

二、实现效果

  Activiti工作流学习之SpringBoot整合Activiti5.22.0实现在线设计器(二)

 三、实现过程

1.Activiti官网下载:https://www.activiti.org/get-started(我这里使用的是5.22.0版本)

  解压:activiti-5.22.0\wars\activiti-explorer,如下图

  Activiti工作流学习之SpringBoot整合Activiti5.22.0实现在线设计器(二)

2.设计器前端部分

  仅保留一些静态资源就行了,将这些文件放入项目的web目录下。

  Activiti工作流学习之SpringBoot整合Activiti5.22.0实现在线设计器(二)

  在editor-app/app-cfg.js中配置一下项目url。这个url是编辑器相关的后台服务的url。(当然你也可以根据你的需求改动)

  Activiti工作流学习之SpringBoot整合Activiti5.22.0实现在线设计器(二)

   注:

    ①editor-app就是编辑器、modeler.html就是编辑器的入口页面

    ②diagram-viewer是流程跟踪插件

    ③界面组件:stencilset.json。本身是英文的,可以通过替换它来实现汉化的效果

3.设计器后端部分

  下载Acitiviti源码:https://github.com/Activiti/Activiti/releases/tag/activiti-5.22.0

①添加pom依赖

        <dependency>
            <groupId>org.activiti</groupId>
            <artifactId>activiti-modeler</artifactId>
            <version>${activiti.version}</version>
        </dependency>

        <dependency>
            <groupId>org.activiti</groupId>
            <artifactId>activiti-diagram-rest</artifactId>
            <version>${activiti.version}</version>
        </dependency>

②其中需要将modeler模块的源代码放到src中,因为需要在其中做部分修改,主要是url的映射。

其中有3个类,都是Controller:

①ModelSaveRestResource:#编辑器制图之后,将节点信息以json的形式提交给这个Controller,然后由其进行持久化操作。(所在源码位置:Activiti-activiti-5.22.0\modules\activiti-modeler\src\main\java\org\activiti\rest\editor\model)

②ModelEditorJsonRestResource:#根据modelId获取model的节点信息,编辑器根据返回的json进行绘图。(源码所在位置:Activiti-activiti-5.22.0\modules\activiti-modeler\src\main\java\org\activiti\rest\editor\model)

③StencilsetRestResource #获取编辑器组件及配置项信息(源码所在位置:Activiti-activiti-5.22.0\modules\activiti-modeler\src\main\java\org\activiti\rest\editor\main)

需要修改的地方就三个,在每个Controller类上加上@RequestMapping注解,并指定值为"service"(对应前台app-cfg.js中配置的url)。

③主类添加扫描

Activiti工作流学习之SpringBoot整合Activiti5.22.0实现在线设计器(二)

 ④浏览器访问:http://localhost/model-list.html

Activiti工作流学习之SpringBoot整合Activiti5.22.0实现在线设计器(二)

 ⑤绘画HelloWorld业务流程图

Activiti工作流学习之SpringBoot整合Activiti5.22.0实现在线设计器(二)

 ⑥首页查看和部署

Activiti工作流学习之SpringBoot整合Activiti5.22.0实现在线设计器(二)

   至此、SpringBoot整合Activiti在线设计器已经完成,大家有问题可以一起讨论下,说不定你现在出现的问题就是我已经出现过的呢,哈,另外该代码地址:

 

上一篇:springcloud vue 微服务分布式 activiti工作流 前后分离 集成代码生成器


下一篇:springcloud vue.js 前后分离 activiti工作流