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

今日公司想把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文件

    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.1.4.RELEASE
         
    
    com.zhetang
    acitiviti-modeler
    0.0.1-SNAPSHOT
    war
    acitiviti-modeler
    Demo project for Spring Boot

    
        1.8
        5.22.0
    

    
        
            org.activiti
            activiti-spring
            ${activiti.version}
        

        
        
            com.alibaba
            druid
            1.1.6
        
        
        
            org.activiti
            activiti-spring-boot-starter-basic
            ${activiti.version}
        
        
        
            org.activiti
            activiti-diagram-rest
            ${activiti.version}
        
        
        
            org.activiti
            activiti-modeler
            ${activiti.version}
        





        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            2.0.1
        

        
            mysql
            mysql-connector-java
            runtime
        
        
            org.projectlombok
            lombok
            true
        
        
            org.springframework.boot
            spring-boot-starter-tomcat
            provided
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

接下来，解压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，操作更方便哦