【activiti6】设计器的前后端集成与汉化

前言

在使用了官方提供的demo[activiti-app]后,可以考虑将官方的提供的activiti6的设计器集成到springboot项目中使用。网上大多数教程都是activiti6+activit5.22的设计器集成方案,而非activiti6+activiti6设计器。其原因还算因为activiti6设计器新增的新特性使用了新的数据表和新的持久层代码,而这部分新特性不属于官方维护,因此activiti-app中的表单引用、决策表等在纯activiti-engin是没有的,即使在activti7中也找不到这部分代码

区别

先说一下activiti5.22的设计器与activit6设计器的区别:

设计器版本/区别activiti5.22activiti6
模型保存数据表act_re_modelact_de_model
持久层实现方式自己封装的持久层代码使用jpa1.x保存
前端可独立运行不需要登录认证不可独立运行,需要登录权限认证

即使在activiti7中,默认保存模型也是在act_re_model表中,而activiti6的activiti-engin中提供的RepositoryService的保存模型方法也是在act_re_model表中,给人的感觉不是一拨人在维护这个代码,而实际上activiti6中的表单引用和决策表都需要将act_re_model进行扩展,于是就把act_re_model拓展成了act_de_model。所以一般都是使用的5.22的设计器,它集成起来更友好,方便,前端设计器拖进去就能直接使用,只需要实现几个操作模型的接口,并且不需要强行引入jpa作为持久层

集成需要做的事

  1. 将activiti-app中的jpa版本升级到2.x以上,因为jpa1.x中的findOne方法在2.x版本中被移除了,需要将所有jpa在2.x被移除的方法都修改过来(比如findOne),强行依赖上去会出现NoSuchMethodException
  2. 修改activiti6设计器中对登录权限这部分限制代码
  3. 汉化实际上是修改stencilset_bpmn.json文件的内容,将文件中对应titledescription 翻译过来,这个文件不可直接用5.22的设计器替代,因为新增了很多新特性,会导致显示不正常

集成步骤

  1. 升级JPA
    首先将activiti6的源码从gitlab上面拉到本地,进入modules/activiti-ui
    在这里插入图片描述
    编辑activiti-ui-root的pom文件,指定jpa的版本:
      <dependency>
        <groupId>org.springframework.data</groupId>
        <artifactId>spring-data-jpa</artifactId>
        <version>2.2.6.RELEASE</version>
      </dependency>
      <dependency>
        <groupId>org.springframework.data</groupId>
        <artifactId>spring-data-commons</artifactId>
        <version>2.2.6.RELEASE</version>
      </dependency>

这个时候重新打包就会出现编译问题,因为升级过后findOne方法被移除了,需要一个一个的修改过来,比如:
在这里插入图片描述
修改完毕后将activiti-ui-root执行打包命令:mvn install -DskipTests
这个时候就能在自己的springboot项目中放肆的引用它了:

        <dependency>
            <groupId>org.activiti</groupId>
            <artifactId>activiti-app-rest</artifactId>
            <version>6.0.1-SNAPSHOT</version>
            <exclusions>
                <exclusion>
                    <groupId>org.slf4j</groupId>
                    <artifactId>slf4j-log4j12</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>org.jadira.usertype</groupId>
                    <artifactId>usertype.core</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

注意:两个排除项都是必须的,不然会出现依赖冲突
2. 改造前端编辑器代码
进入/modules/actitivi-ui/activiti-app下:
在这里插入图片描述
全局删除angularJS中的权限处理代码,比如:
在这里插入图片描述
移除的字符串为:

resolve: {
     verify: authRouteResolver
}

替换完毕后,将整个webapp下的文件移动到自己项目resource/static下面,最后启动自己的项目,并访问:
http://localhost:8080/app/editor/index.html#/editor/d97598f8-86b1-484e-9c9a-479360f267d9,如果没有被跳转到登录页面,那就是成功了
3. 编写重定向控制层代码
由于编辑器默认就是修改操作,需要先创建已有数据才能进入,因此不能粗暴直接访问编辑器页面,需要新增如下控制层代码做重定向:

@RestController
@RequestMapping("/model")
public class ActivitiController {
    @Autowired
    private ModelsResource modelsResource;

    @RequestMapping("/create")
    public void createModelNew(HttpServletRequest request, HttpServletResponse response){
        try{
            String modelName = "modelName"+ LocalDateTime.now();
            String modelKey = "modelKey"+ LocalDateTime.now();
            String description = "description";
            ModelRepresentation modelRepresentation = new ModelRepresentation();
            modelRepresentation.setName(modelName);
            modelRepresentation.setKey(modelKey);
            modelRepresentation.setDescription(description);
            modelRepresentation.setModelType(AbstractModel.MODEL_TYPE_BPMN);
            ModelRepresentation model = modelsResource.createModel(modelRepresentation);
            response.sendRedirect(request.getContextPath() + "/app/editor/index.html#/editor/" + model.getId());
        }catch (Exception e){
        }
    }
}

再将项目地址修改为/app,因为设计器所有请求都是app开头,然而activiti-app-rest的代码是以rest开头的,不加app会导致所有请求404,而他原来代码中通过springMVC的配置类,指定了不同请求的处理规则(org.activiti.app.servlet.WebConfigurer):

    /**
     * Initializes Spring and Spring MVC.
     */
    private void initSpring(ServletContext servletContext, AnnotationConfigWebApplicationContext rootContext) {
        log.debug("Configuring Spring Web application context");
        AnnotationConfigWebApplicationContext appDispatcherServletConfiguration = new AnnotationConfigWebApplicationContext();
        appDispatcherServletConfiguration.setParent(rootContext);
        appDispatcherServletConfiguration.register(AppDispatcherServletConfiguration.class);

        log.debug("Registering Spring MVC Servlet");
        ServletRegistration.Dynamic appDispatcherServlet = servletContext.addServlet("appDispatcher", 
                new DispatcherServlet(appDispatcherServletConfiguration));
        appDispatcherServlet.addMapping("/app/*");
        appDispatcherServlet.setLoadOnStartup(1);
        appDispatcherServlet.setAsyncSupported(true);

        log.debug("Registering Activiti public REST API");
        AnnotationConfigWebApplicationContext apiDispatcherServletConfiguration = new AnnotationConfigWebApplicationContext();
        apiDispatcherServletConfiguration.setParent(rootContext);
        apiDispatcherServletConfiguration.register(ApiDispatcherServletConfiguration.class);

        ServletRegistration.Dynamic apiDispatcherServlet = servletContext.addServlet("apiDispatcher",
                new DispatcherServlet(apiDispatcherServletConfiguration));
        apiDispatcherServlet.addMapping("/api/*");
        apiDispatcherServlet.setLoadOnStartup(1);
        apiDispatcherServlet.setAsyncSupported(true);
    }
  1. 汉化处理
    直接将stencilset_bpmn.json添加到resource目录即可

完整项目地址已上传到github:https://github.com/Siwash/activiti6-start

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3 Vite 是一个用于构建Web界面的渐进式JavaScript框架,而 Activiti 是一个流程引擎和业务流程管理(BPM)解决方案。要将 Activiti 前端设计集成到 Vue3 Vite 中,需要进行一些步骤。 首先,需要下载并安装 Activiti 前端设计的相关文件。可以从 Activiti 官方网站下载设计的压缩包,然后将其解压到项目的特定目录中。 然后,在 Vue3 Vite 项目中创建一个新的组件,用于加载 Activiti 前端设计。可以使用 Vue 的 `import` 来引入设计的相关文件,然后在组件中使用 `import` 或者 `require` 来引入设计的样式和脚本文件。 接下来,可以在 Vue3 Vite 项目的路由配置中添加一个新的路由,用于展示 Activiti 前端设计的页面。可以将这个路由配置为一个独立的路由路径,比如 `/activiti-designer`。 在创建的路由页面中,可以使用设计的接口或者组件来渲染设计的界面。可以通过本地或者远程的方式加载设计的配置文件,并将设计的相关属性和方法绑定到 Vue 组件的数据和方法中。 最后,可以通过修改 Vue3 Vite 项目的打包配置,将 Activiti 前端设计的相关文件打包到最终的项目中。可以使用 Vite 的插件或者配置项来实现这个功能。 总的来说,要将 Activiti 前端设计集成到 Vue3 Vite 中,需要下载和解压设计的文件,创建一个新的组件用于加载设计,配置一个新的路由来展示设计的界面,并通过数据绑定和方法绑定将设计的功能集成到 Vue3 Vite 项目中。最后,调整打包配置,将设计文件打包到最终项目中。这样就可以在 Vue3 Vite 中使用 Activiti 前端设计设计和管理业务流程。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值