springboot实现activiti的modeler流程设计器（整合版）

最新推荐文章于 2024-09-20 21:13:17 发布

原创最新推荐文章于 2024-09-20 21:13:17 发布 · 2.3w 阅读

89 ·

CC 4.0 BY-SA版权

文章标签：

#springboot #activiti

本文详细介绍如何将Activiti的modeler流程设计器整合到项目中，包括下载源码、创建数据库、导入静态文件、配置后台服务等步骤，解决过程中遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今日公司想把activiti的modeler流程设计器整合到页面上来，半天时间，参考并整理了挺多博主的csdn博客，终于算是把流程设计器搬到自己的项目当中来了（坑还不是一般的多！）。

以下代码，参考了很多博主文章作为备份：
首先话不多说，先来上一个最终效果

在这里插入图片描述

**1.下载activiti5.22的源码包（这里附上我自己的网盘文件下载地址）

链接：https://pan.baidu.com/s/1Aashjs67-L1ytT9jRcPzoA
提取码：k23l
复制这段内容后打开百度网盘手机App，操作更方便哦
解压可得：
在这里插入图片描述

2.创建数据库

在activiti-5.22.0/database/create 文件夹中找到对应数据库的sql文件然后创建相关数据库。这里主要是以activiti.mysql前缀的三个sql前缀

**3. 导入静态文件*

将activiti-5.22.0/war/activiti-explorer.war解压
将文件夹内 diagram-viewer,editor-app,modeler.html拷贝到项目中resource/public目录下如图
在这里插入图片描述
其中的editor-app就是编辑器，modeler.html是编辑器的入口页面。
diagram-viewer是流程跟踪插件，虽然这次用不着，但之后会用到。
还有一个界面组件文件，在resource下，名称叫stencilset.json。本身是英文的，可以通过替换它来达到汉化的效果。但现在还是先把它放到项目中去。

在editor-app/app-cfg.js中配置一下项目url。这个url是编辑器相关的后台服务的url。

在这里插入图片描述

4.后台部分（这部分这里面的坑就比较多了）

附上我自己pom文件

<?xml version="1.0" encoding="UTF-8"?>
<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>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.4.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.zhetang</groupId>
    <artifactId>acitiviti-modeler</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>acitiviti-modeler</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
        <activiti.version>5.22.0</activiti.version>
    </properties>

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

        <!--引入第三方数据源-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.6</version>
        </dependency>
        <!-- Activiti 启动器 -->
        <dependency>
            <groupId>org.activiti</groupId>
            <artifactId>activiti-spring-boot-starter-basic</artifactId>
            <version>${activiti.version}</version>
        </dependency>
        <!-- Activiti 流程图 -->
        <dependency>
            <groupId>org.activiti</groupId>
            <artifactId>activiti-diagram-rest</artifactId>
            <version>${activiti.version}</version>
        </dependency>
        <!-- Activiti 在线设计 -->
        <dependency>
            <groupId>org.activiti</groupId>
            <artifactId>activiti-modeler</artifactId>
            <version>${activiti.version}</version>
        </dependency>





        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.1</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

接下来，解压activiti-5.22.0\libs\activiti-modeler-5.22.0-sources.jar，将StencilsetRestResource.java，
ModelEditorJsonRestResource.java，ModelSaveRestResource.java三个文件拷贝到controller目录

如图
在这里插入图片描述

并在每在Controller类上加上@RequestMapping注解，并指定值为"service"（对应前台app-cfg.js中配置的url）。

大部分的博主的博客到了这里基本上就结束了，但是我好像貌似根据他们的到了这里，死活起不来代码，老是报一个processEngine注入不到spring当中的错误，所以我们这里根据这个错误，得另外新增一个数据源的配置。上代码

@Configuration
public class ActivitiDataSourceConfig extends AbstractProcessEngineAutoConfiguration {
    @Resource
    private ActivitiDataSourceProperties activitiDataSourceProperties;

    @Bean
    @Primary
    public DataSource activitiDataSource() {
        DruidDataSource DruiddataSource = new DruidDataSource();
        DruiddataSource.setUrl(activitiDataSourceProperties.getUrl());
        DruiddataSource.setDriverClassName(activitiDataSourceProperties.getDriverClassName());
        DruiddataSource.setPassword(activitiDataSourceProperties.getPassword());
        DruiddataSource.setUsername(activitiDataSourceProperties.getUsername());
        return DruiddataSource;
    }

    @Bean
    public PlatformTransactionManager transactionManager() {
        return new DataSourceTransactionManager(activitiDataSource());
    }

    @Bean
    public SpringProcessEngineConfiguration springProcessEngineConfiguration() {
        SpringProcessEngineConfiguration configuration = new SpringProcessEngineConfiguration();
        configuration.setDataSource(activitiDataSource());
        configuration.setDatabaseSchemaUpdate(ProcessEngineConfiguration.DB_SCHEMA_UPDATE_TRUE);
        configuration.setJobExecutorActivate(true);
        configuration.setTransactionManager(transactionManager());
        return configuration;
    }


}

@Component
public class ActivitiDataSourceProperties {

    @Value("${spring.datasource.url}")
    private String url;

    @Value("${spring.datasource.username}")
    private String username;

    @Value("${spring.datasource.password}")
    private String password;

    @Value("${spring.datasource.driver-class-name}")
    private String driverClassName;

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getDriverClassName() {
        return driverClassName;
    }

    public void setDriverClassName(String driverClassName) {
        this.driverClassName = driverClassName;
    }
}

还有禁用activiti中自动集成的security的权限验证，当我们访问接口的时候会弹出登录界面，所以我们需要禁用掉登录验证
在启动类中添加注解

@EnableAutoConfiguration(exclude = {org.springframework.boot.autoconfigure.security.servlet.SecurityAutoConfiguration.class,
        org.activiti.spring.boot.SecurityAutoConfiguration.class})

在这里插入图片描述
另外创建空mode即跳转到modeler编辑页面的代码如下

@RestController
@RequestMapping("/activiti")
public class ActivitiController {
    /**
     * 创建模型
     */
    @RequestMapping("/create")
    public void create(HttpServletRequest request, HttpServletResponse response) {
        try {
            ProcessEngine processEngine = ProcessEngines.getDefaultProcessEngine();

            RepositoryService repositoryService = processEngine.getRepositoryService();

            ObjectMapper objectMapper = new ObjectMapper();
            ObjectNode editorNode = objectMapper.createObjectNode();
            editorNode.put("id", "canvas");
            editorNode.put("resourceId", "canvas");
            ObjectNode stencilSetNode = objectMapper.createObjectNode();
            stencilSetNode.put("namespace", "http://b3mn.org/stencilset/bpmn2.0#");
            editorNode.put("stencilset", stencilSetNode);
            Model modelData = repositoryService.newModel();

            ObjectNode modelObjectNode = objectMapper.createObjectNode();
            modelObjectNode.put(ModelDataJsonConstants.MODEL_NAME, "hello1111");
            modelObjectNode.put(ModelDataJsonConstants.MODEL_REVISION, 1);
            String description = "hello1111";
            modelObjectNode.put(ModelDataJsonConstants.MODEL_DESCRIPTION, description);
            modelData.setMetaInfo(modelObjectNode.toString());
            modelData.setName("hello1111");
            modelData.setKey("12313123");

            //保存模型
            repositoryService.saveModel(modelData);
            repositoryService.addModelEditorSource(modelData.getId(), editorNode.toString().getBytes("utf-8"));
            response.sendRedirect(request.getContextPath() + "/modeler.html?modelId=" + modelData.getId());
        } catch (Exception e) {
            System.out.println("创建模型失败：");
        }
    }

}

到此位置，我们的集成工作就基本完成了，我们可以通过浏览器访问
http://localhost:8080/model/create
就可以新建一个模型了如图
在这里插入图片描述
汉化的代码网上有很多，鉴于时间关系，暂不在这里贴出来了
后续待完善

这里附上stencliset.json的地址
链接：https://pan.baidu.com/s/1j180dHglRSasIm10Wuzq6w
提取码：msbd
复制这段内容后打开百度网盘手机App，操作更方便哦

这里说过期了，重新上传下json，失效的朋友们可以再试下
链接：https://pan.baidu.com/s/1cLbgbDq8Z13A2rW8ITvEeQ
提取码：khq0
复制这段内容后打开百度网盘手机App，操作更方便哦