一、概述

  网上有很多关于Eclipse、IDEA等IDE插件通过拖拽的方式来画工作流程图,个人觉得还是不够好,所以花点时间研究了一下Activiti在线设计器,并与SpringBoot整合。

二、实现效果

  

三、实现过程

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

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

  

2.设计器前端部分

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

  

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

  

  注:

    ①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)。

③主类添加扫描

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

⑤绘画HelloWorld业务流程图

⑥首页查看和部署

⑤通过SQLyog查看数据库二进制表:刚刚绘制部署完成的二进制表已经存入数据库

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

  在画完流程图并发布部署以后,接下来就是在实战中使用SpringBoot项目结合Activiti实现员工请假的流程,如下:Activiti+Shiro实战

参考:http://jmysql.com/activiti/126.html(如有侵权,请联系删除)

Activiti工作流学习之SpringBoot整合Activiti5.22.0实现在线设计器(二)的更多相关文章

  1. Activiti工作流学习之概述(一)

    一.工作流介绍 我第一次听到这个词,是蒙逼的,再看百度百度,更傻眼了,完全说的不像人话啊,举几个生活中的例子,就明白多了比如:请假.报销等等,如果文字太过抽象,请看图: 二.工作流引擎 Process ...

  2. Activiti工作流学习之流程图应用详解

    Activiti工作流学习之流程图应用详解 1.目的  了解Activiti工作流是怎样应用流程图的. 2.环境准备2.1.相关软件及版本    jdk版本:Jdk1.7及以上 IDE:eclipse ...

  3. Activiti(二) springBoot2集成activiti,集成activiti在线设计器

    摘要 本篇随笔主要记录springBoot2集成activiti流程引擎,并且嵌入activiti的在线设计器,可以通过浏览器直接编辑出我们需要的流程,不需要通过eclipse或者IDEA的actiB ...

  4. SSH框架集成Activiti Modeler在线设计器页面出现问号及乱码的解决办法

    文·原创/朱季谦 工作流是一个针对企业用户.开发人员.系统管理员的轻量级工作流业务管理平台,其核心是使用Java开发的快速.稳定的BPMN2.0流程引擎.在我们日常开发当中,例如oa系统里的请假功能, ...

  5. Activiti工作流学习笔记(三)——自动生成28张数据库表的底层原理分析

    原创/朱季谦 我接触工作流引擎Activiti已有两年之久,但一直都只限于熟悉其各类API的使用,对底层的实现,则存在较大的盲区. Activiti这个开源框架在设计上,其实存在不少值得学习和思考的地 ...

  6. Activiti工作流学习(三)Activiti工作流与spring集成

    一.前言 前面Activiti工作流的学习,说明了Activiti的基本应用,在我们开发中可以根据实际的业务参考Activiti的API去更好的理解以及巩固.我们实际的开发中我们基本上都使用sprin ...

  7. Activiti工作流学习(一)部署对象和流程定义

    一.前言 前一段时间在工作中,使用了流程审批,对api的调用非常不熟悉,都是调用别人写好的接口在界面上进行显示,基本了解了流程审批的主要步骤,现对流程审批进行学习,主要是调用api进行CRUD操作,感 ...

  8. Activiti工作流学习笔记一

    Activiti工作流 一:Activiti第一天 1:工作流的概念 说明: 假设:这两张图就是华谊兄弟的请假流程图 图的组成部分: 人物:范冰冰冯小刚王中军 事件(动作):请假.批准.不批准 工作流 ...

  9. Activiti工作流学习笔记(四)——工作流引擎中责任链模式的建立与应用原理

    原创/朱季谦 本文需要一定责任链模式的基础,主要分成三部分讲解: 一.简单理解责任链模式概念 二.Activiti工作流里责任链模式的建立 三.Activiti工作流里责任链模式的应用 一.简单理解责 ...

随机推荐

  1. npm常用命令和脚手架使用

    最近前端同学使用最多的莫过于vue,angualr,react等热门前端框架了.那么就避免不掉的使用npm命令,本人就经常因为这三个脚手架的使用而不得不百度相应的npm命令,不胜其烦,,,因此就整理一 ...

  2. 用Python制作酷炫词云图,原来这么简单!

    一.简介词云图是文本挖掘中用来表征词频的数据可视化图像,通过它可以很直观地展现文本数据中地高频词:! 图1 词云图示例 在Python中有很多可视化框架可以用来制作词云图,如pyecharts,但这些 ...

  3. c# 关于抓取网页源码后中文显示乱码的原因分析和解决方法

    原因分析:首先,目前大多数网站为了提升网页浏览传输速率都会对网站内容在传输前进行压缩,最常用的是GZIP压缩解压解压算法,也是支持最广的一种. 因为网站传输时采用的是GZIP压缩传输,如果我们接受we ...

  4. Uderstanding and using Pointers 读书笔记

    如何阅读指针? 从右向左读. 比如 const int *pci; 虚拟内存和虚拟内存地址是什么? 一个应用程序,在虚拟内存地址里也许是连续的,但是在物理内存里也许是分隔开来的. 虚拟内存和物理内存的 ...

  5. Python学习笔记———递归遍历多层目录

    import os #得到当前目录下所有的文件 def getALLDir(path,sp = ""): filesList = os.listdir(path) #处理每一个文件 ...

  6. 优酷爱奇艺视频转换为MP4格式工具

    本君今天分享两个免费的视频格式转换工具,分别是爱奇艺和优酷的(腾讯的有点复杂,等整理完再分享).教程都是一步步亲手操作的,每一步都有配图.希望各位老板多转发分享,谢谢! 一爱奇艺QSV转MP4格式 解 ...

  7. 一种使用SOC精确控制脉冲的方法

    在emfi测试中需要精确的控制脉冲时间.控制器产生的脉冲信号会经过控压的MOS管,这些组件会造成很严重的延时,但是尽管如此,控制系统的高精度也是必须的,因为控制系统的误差会逐级下延,引起更大的误差. ...

  8. 分享10个免费或便宜的Photoshop替代工具

    说到编辑照片和图像文件,一般很多人都使用photoshop软件.然而,使用现在的最新版本Photoshop CC每月最低也要支付980日元,感觉使用门槛有点高的人应该不少吧. 有一篇文章,推荐了10个 ...

  9. Codeforces Round #622(Div 2) C1. Skyscrapers (easy version)

    题目链接: C1. Skyscrapers (easy version) 题目描述: 有一行数,使得整个序列满足 先递增在递减(或者只递增,或者只递减) ,每个位置上的数可以改变,但是最大不能超过原来 ...

  10. java线程池之synchronized锁

    //Object 定义了一个引用类型的对象用于加锁 static Object Lock = new Object(); //定义一个int类型变量0做初始值 static int iCheck = ...