vue集成流程设计引擎

Posted 2023-05-04

参考技术A 相关阅读： 开源流程引擎选择

教程： bpmnjs教程

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

官方网站

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

官方网站

37Springboot集成Flowable

喜欢关注公众号： java乐园

工作流是OA系统不可或缺的一部分，今天介绍一款新的工作流引擎flowable。flowable 是著名 Java 工作流引擎 Activiti 的原作者从 Activiti 分支创建的新工作流引擎。flowable 是一个业务流程管理(BPM)和工作流系统，适用于开发人员和系统管理员。其核心是超快速，稳定的BPMN2流程引；易于与 Spring集成使用。

1、Flowable 设计器Flowable Designer安装
下载地址：

https://blog.flowable.org/2016/11/01/flowable-eclipse-designer-5-22-0-release/

在线安装地址：

http://flowable.org/designer/update

离线安装包地址：

http://www.flowable.org/designer/archived/flowable-designer-5.22.0.zip

2、 新建项目sc-flowable，对应的pom.xml文件如下

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.flowable</groupId>
    <artifactId>sc-flowable</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>sc-flowable</name>
    <url>http://maven.apache.org</url>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.4.RELEASE</version>
    </parent>

    <dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <exclusions>
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-logging</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <!-- HikariCP 连接池依赖 -->
        <dependency>
            <groupId>com.zaxxer</groupId>
            <artifactId>HikariCP</artifactId>
        </dependency>
        <dependency>
            <groupId>org.flowable</groupId>
            <artifactId>flowable-spring-boot-starter-basic</artifactId>
            <version>6.4.0</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-log4j2</artifactId>
        </dependency>
    </dependencies>
</project>

3、新建配置文件application.yml

spring:
    datasource:
        driver-class-name : com.mysql.jdbc.Driver
        url: jdbc:mysql://127.0.0.1:3306/flowable?characterEncoding=UTF-8
        username: root
        password: root
logging:
    level:
        ROOT: info
flowable:
    #关闭定时任务JOB
    async-executor-activate: false
    #将databaseSchemaUpdate设置为true。当Flowable发现库与数据库表结构不一致时，会自动将数据库表结构升级至新版本。
    database-schema-update: true

配置文件中主要配置数据库的地址、用户名及密码

4、新建springboot启动类

package com.flowable;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class FlowableApplication {

    public static void main(String[] args) {
        SpringApplication.run(FlowableApplication.class, args);
    }

}

5、验证是否集成flowable成功
运行后FlowableApplication.java，期间没有任何异常信息；查看数据库，已经自动生成了flowable相关的表结构