Activiti-5.22.0——web页面整合activiti-modeler可视化设计器

目录

1、下载activiti源码包：

2、创建数据库：

3、前端导入静态文件：

4、设计器页面中文化：

5、后台引入依赖包：

（1）activiti依赖：

（2）Mysql依赖：

（3）数据源依赖：

6、后台复制源码代码：

（1）增加数据源实体类：

（2）增加数据源配置类：

（3）复制源码：

（4）修改源码：

A、添加requestMapping注解：

B、修改模型save方法传参：

7、后台禁用activiti权限验证：

8、后台跳转设计器页面：

9、测试使用设计器页面：

（1）创建流程：

（2）修改流程：

---

1、下载activiti源码包：

下载地址：https://www.activiti.org/get-started

2、创建数据库：

在activiti-5.22.0/database/create 文件夹中找到对应数据库的sql文件 然后创建相关数据库。这里主要是以activiti.mysql前缀的三个sql文件，然后使用navicate等工具导入到自己创建的数据库中。

3、前端导入静态文件：

将activiti-5.22.0/war/activiti-explorer.war解压

将文件夹内 diagram-viewer,editor-app,modeler.html拷贝到项目中resource/static目录下如图：

说明：editor-app就是编辑器，modeler.html是编辑器的入口页面。

diagram-viewer是流程跟踪插件，虽然这次用不着，但之后会用到。

还有一个界面组件文件，在resource下，名称叫stencilset.json。本身是英文的，可以通过替换它来达到汉化的效果。但现在还是先把它放到项目中去。

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

4、设计器页面中文化：

汉化步骤参照：

https://blog.csdn.net/II_bat/article/details/51405160?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

en.json汉化参照：

https://blog.csdn.net/II_bat/article/details/51405184

stencilset.json汉化参照：

https://blog.csdn.net/II_bat/article/details/51405180

其余的汉化例如保存、弹窗等页面的汉化，如果在项目中使用到并且需要汉化，再找对应的页面或者配置文件进行研究汉化吧。

5、后台引入依赖包：

（1）activiti依赖：

<!-- activiti依赖包 开始 -->
		<dependency>
			<groupId>org.activiti</groupId>
			<artifactId>activiti-spring</artifactId>
			<version>${activiti.version}</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>
		<!-- activiti依赖包 结束 -->

（2）Mysql依赖：

<!-- mysql依赖包 -->
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<version>5.1.40</version>
		</dependency>

（3）数据源依赖：

<!--引入第三方数据源-->
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>druid</artifactId>
			<version>1.1.6</version>
		</dependency>

6、后台复制源码代码：

（1）增加数据源实体类：

如果是新创建的项目，那么就自己可以结合spring配置信息，在配置文件中配置好项目数据库连接信息，并创建好对应的实体类；

package com.example.test.activiti.testActiviti.config;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

@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;
    }

}

如果是已有框架项目，那么肯定已经有数据库连接信息配置和对应的实体类了，这样就不需要再重新配置了。

（2）增加数据源配置类：

增加一个数据源配置类，并继承AbstractProcessEngineAutoConfiguration类，重写启动的方法，主要的核心就是将项目中的数据库传递给activiti，以实现以后通过web页面的设计器设计的流程直接存入到数据库中去。具体代码见详情。

package com.example.test.activiti.testActiviti.config;

import org.activiti.engine.ProcessEngineConfiguration;
import org.activiti.spring.SpringProcessEngineConfiguration;
import org.activiti.spring.boot.AbstractProcessEngineAutoConfiguration;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Primary;
import org.springframework.jdbc.datasource.DataSourceTransactionManager;
import org.springframework.jdbc.datasource.DriverManagerDataSource;
import org.springframework.transaction.PlatformTransactionManager;

import javax.annotation.Resource;
import javax.sql.DataSource;

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

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

    @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;
    }


}

（3）复制源码：

解压activiti-5.22.0\libs\activiti-modeler-5.22.0-sources.jar，将StencilsetRestResource.java，

ModelEditorJsonRestResource.java，ModelSaveRestResource.java三个文件拷贝到自己项目的controller目录下，如下图：

（4）修改源码：

A、添加requestMapping注解：

在复制的三个java文件中，在类上均添加RequestMapping注解，并统一设置一个访问根路径，这三个文件中访问的根路径要一致。

B、修改模型save方法传参：

默认的模型后台save方法传参如下：

修改传递的参数为如下图，方法体中用到参数的地方对应进行修改，默认的save方法无法正确保存流程。

7、后台禁用activiti权限验证：

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

8、后台跳转设计器页面：

新创建一个controller中的方法，并设置好对应的访问地址，通过访问该地址，可新创建一个空流程，并在activiti的model设计网页中打开，用户可以在该页面中进行设计流程。具体代码见自己总结。

9、测试使用设计器页面：

（1）创建流程：

通过访问地址：http://localhost:8080/activiti/create（该地址根据自己controller设置的访问路径访问即可），即可打开一个新设计器页面，可以设计流程图，然后保存。

（2）修改流程：

通过访问地址：http://localhost:8080/modeler.html?modelId=10004（该地址就是默认的访问地址，不需要修改），地址中有模型ID，修改好后，然后保存，就可以实现修改流程图。