一、新建Web项目

二、下载前端文件

三、添加Flowable-ui-modeler依赖

四、添加数据源相关配置

五、配置idm

六、绕过Flowable授权

七、配置账号信息接口

一、新建Web项目

1、使用idea创建一个Maven项目，然后添加"spring-boot-starter-web"依赖。整合代码下载地址：https://download.csdn.net/download/wangdaoyin2010/85146346

        <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency>

注意：使用“spring-boot-starter”进行包版本控制，因此需要添加“spring-boot-starter-parent”作为父包

    <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.6.6</version><relativePath/></parent>

二、下载前端文件

1、下载flowable-engine-main源码文件

下载地址：https://github.com/flowable/flowable-engine/releases/tag/flowable-6.7.2

2、找到前端文件

解压下载后的文件，找到“flowable-engine-main\modules\flowable-ui\flowable-ui-modeler-frontend\src\main\resources\static”文件夹。将整个”static”文件夹拷贝到自己项目下“resources”目录中。

注意："static"文件夹中有“modeler”子文件夹，所以要访问页面url路径需要加上“/modeler”,以前的一些版本没有该文件夹。

3、测试前端页面访问

在浏览器中输入“http://localhost:8182/modeler/index.html”进行查看，得到如下图

到此前端页面已经添加完成

三、添加Flowable-ui-modeler依赖

1、添加Flowable-ui-modeler相关依赖如下

       <!-- 添加flowable-ui-modeler核心依赖项--><dependency><groupId>org.flowable</groupId><artifactId>flowable-ui-modeler-rest</artifactId><version>${flowable.version}</version></dependency><!--添加flowable-ui-modeler配置依赖项--><dependency><groupId>org.flowable</groupId><artifactId>flowable-ui-modeler-conf</artifactId><version>${flowable.version}</version></dependency>

2、flowable-ui-modeler-rest说明

该依赖项中包含flowableUI对模型的增删查改等所有模型维护接口

3、flowable-ui-modeler-conf说明

该依赖项中包含了一些ui-modeler的自动化配置项，主要又ApplicationConfiguration自动化配置类进行配置；在该配置类中设置了modeler的基础包扫描路径和一些bean的配置。

其中个人认为比较重要的配置进行说明一下

    @Beanpublic ServletRegistrationBean<DispatcherServlet> modelerAppServlet(ApplicationContext applicationContext, ObjectProvider<MultipartConfigElement> multipartConfig) {AnnotationConfigWebApplicationContext dispatcherServletConfiguration = new AnnotationConfigWebApplicationContext();dispatcherServletConfiguration.setParent(applicationContext);dispatcherServletConfiguration.register(AppDispatcherServletConfiguration.class);DispatcherServlet servlet = new DispatcherServlet(dispatcherServletConfiguration);//处理所有"/modeler-app/"路径下请求，因为在前端js配置文件app-cfg.js中有基础路径配置//FLOWABLE.CONFIG = {// 'onPremise' : true,// 'contextRoot' : pathname,// 'contextModelerRestRoot' : pathname + '/modeler-app',// 'webContextRoot' : pathname,// 'datesLocalization' : false//};//在请求路配置文件url-config.js中配置请求基本都添加了"/modeler-app",如下// getCloneModelsUrl: function (modelId) {//        return FLOWABLE.CONFIG.contextModelerRestRoot + '/rest/models/' + modelId + '/clone';//    },////    getModelHistoriesUrl: function (modelId) {//        return FLOWABLE.CONFIG.contextModelerRestRoot + '/rest/models/' + modelId + '/history';//    }ServletRegistrationBean<DispatcherServlet> registrationBean = new ServletRegistrationBean<>(servlet, "/modeler-app/*");registrationBean.setName("Flowable Modeler App Servlet");registrationBean.setLoadOnStartup(1);registrationBean.setAsyncSupported(true);multipartConfig.ifAvailable(registrationBean::setMultipartConfig);return registrationBean;}@Beanpublic WebMvcConfigurer modelerApplicationWebMvcConfigurer() {return new WebMvcConfigurer() {@Overridepublic void addViewControllers(@NonNull ViewControllerRegistry registry) {//这个地方让前端"/"访问更路径的时候最终重定向到"/modeler/index.html"if (!ClassUtils.isPresent("org.flowable.ui.task.conf.ApplicationConfiguration", getClass().getClassLoader())) {// If the task application is not present, then the root should be mapped to adminregistry.addViewController("/").setViewName("redirect:/modeler/");}//这个地方让前端"/modeler"或者"/modeler/"访问路径重定向到"/modeler/index.html"，让前端访问的时候使用"/modeler"或者"/modeler/"进行访问//主要目的是在页面发送数据请求时，会在路径后面添加具体路径参数//如：http://localhost:8182/modeler/index.html/flow-app/rest/account//及http://localhost:8182/modeler/index.html/modeler-app/rest/models?filter=processes&modelType=0&sort=modifiedDesc//数据请求都是在http://localhost:8182/modeler/index.html路径后面添加子路径及参数// 所以让前端不通过"/modeler"或者"/modeler/"来访问，方便添加子路径进行路径映射registry.addViewController("/modeler").setViewName("redirect:/modeler/");registry.addViewController("/modeler/").setViewName("forward:/modeler/index.html");}};}

四、添加数据源相关配置

添加flowable-ui-modeler相关依赖后，我们启动应用，发现不能启动，错误如下，大概意思就是没有配置数据源

1、添加数据库配置和依赖

我们使用MySql数据库，所以添加MySQL相关依赖和数据库配置

        <!-- 要使用数据库，需要先添加spring-jdbc--><dependency><groupId>org.springframework</groupId><artifactId>spring-jdbc</artifactId></dependency><!--然偶添加具体数据库的支持--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.28</version></dependency>

#  数据库配置
spring:datasource:hikari:idleTimeout: 300000maxLifetime: 600000maximumPoolSize: 50minimumIdle: 5driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://116.63.182.247:3306/ry_flow?useUnicode=true&characterEncoding=utf8&autoReconnect=true&useSSL=falseusername: rootpassword: LtRoot123

五、配置idm

再次启动服务，发现如下错误

原因是没有进行Flowable默认使用idm授权，需要对idm授权信息进行配置，添加对应idm配置如下

flowable:common:app:
#      目前先设置一个正确但是不一定可用的url地址idm-url: http://localhost:8080/flowable-idm1idm-admin:
#        需要设置一个密码，目前先设置，后期不使用password: test
#        默认user为admin，这个地方可设置可不设置user: admin1

六、绕过Flowable授权

再次启动应用，成功启动，然后访问“http://localhost:8182/modeler”

发现跳转到“http://localhost:8080/flowable-idm1/idm/#/login?redirectOnAuthSuccess=true&redirectUrl=http://localhost:8182/modeler/”

该地址中“http://localhost:8080/flowable-idm1”就是前面我们配置idm认证授权地址。说明要访问页面需要进行授权，在这个地方我们不进行授权，直接配置绕过Flowable中的授权

1、Flowable授权说明

Flowable授权配置在FlowableUiSecurityAutoConfiguration类中，在该类中我们可以看到如下代码，该部分代码说明默认使用“idm”方式进行授权

  @Configuration(proxyBeanMethods = false)@Order(SecurityConstants.FORM_LOGIN_SECURITY_ORDER)@ConditionalOnProperty(prefix = "flowable.common.app.security", name = "type", havingValue = "idm", matchIfMissing = true)public static class FormLoginWebSecurityConfigurerAdapter extends WebSecurityConfigurerAdapter {@Autowiredprotected ObjectProvider<RememberMeServices> rememberMeServicesObjectProvider;@Autowiredprotected FlowableCommonAppProperties commonAppProperties;@Overrideprotected void configure(HttpSecurity http) throws Exception {RememberMeServices rememberMeServices = rememberMeServicesObjectProvider.getIfAvailable();String key = null;if (rememberMeServices instanceof AbstractRememberMeServices) {key = ((AbstractRememberMeServices) rememberMeServices).getKey();}if (rememberMeServices != null) {http.rememberMe().key(key).rememberMeServices(rememberMeServices);}http.exceptionHandling().and().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and().logout(logout -> {DEFAULT_LOGOUT.customize(logout);logout.logoutSuccessUrl("/");logout.addLogoutHandler(new ClearFlowableCookieLogoutHandler());}).csrf().disable() // Disabled, cause enabling it will cause sessions.headers(DEFAULT_HEADERS)// Never persist the security context.securityContext().securityContextRepository(new NullSecurityContextRepository()).and().authorizeRequests(DEFAULT_AUTHORIZE_REQUESTS);http.formLogin().disable();http.apply(new FlowableUiCustomFormLoginConfigurer<>());}}

2、绕过Flowable授权

为了绕过授权，需要添加一个自定义授权配置绕过Flowable的默认idm授权，创建一个授权配置类“SecurityConfiguration”,该类在什么位置都可以，不用覆盖原有授权配置类

@Configuration
public class SecurityConfiguration {@Configuration(proxyBeanMethods = false)//Order配置说明// 这个地方相同会报错//这个地方如果大于则该配置在FlowableUiSecurityAutoConfiguratio中对应项后加载，不能起到绕过授权作用//所以这个地方-1让该配置项在FlowableUiSecurityAutoConfiguratio中对应配置项前加载，以跳过授权@Order(SecurityConstants.FORM_LOGIN_SECURITY_ORDER - 1)public static class FormLoginWebSecurityConfigurerAdapter extends WebSecurityConfigurerAdapter {@Overrideprotected void configure(HttpSecurity http) throws Exception {http//必须要将csrf设置为disable，不然后面发送POST请求时会报403错误.csrf().disable()//为了简单起见，简单粗暴方式直接放行modeler下面所有请求.authorizeRequests().antMatchers("/modeler/**").permitAll();}}
}

七、配置账号信息接口

再次启动并访问“http://localhost:8182/modeler”得到结果如下图

其中报红请求为“http://localhost:8182/modeler-app/rest/account”，该请求为获取当前用户信息接口

1、/rest/account请求说明

“/rest/account”接口在“RemoteAccountResource”类中定义，该类中核心代码如下

@RestController
@RequestMapping({"/app","/"
})
public class RemoteAccountResource implements InitializingBean {/*** GET /rest/account -> get the current user.*/@GetMapping(value = "/rest/account", produces = "application/json")public UserRepresentation getAccount(Authentication authentication) {UserRepresentation userRepresentation = null;for (CurrentUserProvider userProvider : currentUserProviders) {if (userProvider.supports(authentication)) {userRepresentation = userProvider.getCurrentUser(authentication);}if (userRepresentation != null) {break;}}if (userRepresentation == null) {userRepresentation = getCurrentUserRepresentation(authentication.getName());}if (userRepresentation != null) {return userRepresentation;} else {throw new NotFoundException();}}
}

其中getAccount方法就是对应报错请求

2、覆盖RemoteAccountResource类

创建一个类覆盖原来的RemoteAccountResource类（该类所在的包名、类名必须与原类相同弄才能覆盖），在该类中重新实现getAccount方法，直接返回一个用户信息既可。

注意：因为返回的用户信息，前端需要判断角色权限，所以最好该方法中会添加一些角色权限信息返回。直接使用如下代码既可


@RestController
@RequestMapping({"/app","/"
})
public class RemoteAccountResource {/*** GET /rest/account -> get the current user.*/@RequestMapping(value = "/rest/account", method = RequestMethod.GET, produces = "application/json")public UserRepresentation getAccount() {UserRepresentation userRepresentation = new UserRepresentation();userRepresentation.setFirstName("admin");userRepresentation.setLastName("admin");userRepresentation.setFullName("admin");userRepresentation.setId("admin");List<String> pris = new ArrayList<>();pris.add(DefaultPrivileges.ACCESS_MODELER);pris.add(DefaultPrivileges.ACCESS_IDM);pris.add(DefaultPrivileges.ACCESS_ADMIN);pris.add(DefaultPrivileges.ACCESS_TASK);pris.add(DefaultPrivileges.ACCESS_REST_API);userRepresentation.setPrivileges(pris);if (userRepresentation != null) {return userRepresentation;} else {throw new NotFoundException();}}
}

注意： 6.7.2版本中前端请求url-config.js配置文件中的请求地址与前面版本不同，需要注意

Spring Boot 整合 Flowable-ui-modeler 6.7.2相关推荐

Spring Boot 整合 Swagger
一.为什么要用 Swagger 现在的开发模式,一般都是前后端分离的,开发接口文档就显得尤为重要,前端人员需要按照后端的功能文档调用对应的接口.在没有使用 API 文档之前,很多公司都是在纸或者 Ma ...
Spring Boot(十四)：spring boot整合shiro-登录认证和权限管理
Spring Boot(十四):spring boot整合shiro-登录认证和权限管理使用Spring Boot集成Apache Shiro.安全应该是互联网公司的一道生命线,几乎任何的公司都会涉 ...
Spring Boot整合Shiro + Springboot +vue
目录 02 Spring Boot整合Shiro p1.shiro概述 1 什么是Shiro 2 Shiro核心组件 p2.Shiro实现登录认证 AccountRealm.java QueryWra ...
Spring Boot 整合 FreeMarker 实例
前言在之前的文章Spring Boot 整合 Thymeleaf中,我们学习了如何将模板 Thymeleaf 整合到 Spring Boot 中,那今天我们就来看看,另一个老牌的开源免费模板引擎 - ...
spring boot整合spring security笔记
最近自己做了一个小项目,正在进行springboot和spring Security的整合,有一丢丢的感悟,在这里分享一下: 首先,spring boot整合spring security最好是使用T ...
RabbitMQ使用及与spring boot整合
1.MQ 消息队列(Message Queue,简称MQ)--应用程序和应用程序之间的通信方法应用:不同进程Process/线程Thread之间通信比较流行的中间件: ActiveMQ Rabbi ...
Spring Boot 教程（三）： Spring Boot 整合Mybatis
教程简介本项目内容为Spring Boot教程样例.目的是通过学习本系列教程,读者可以从0到1掌握spring boot的知识,并且可以运用到项目中.如您觉得该项目对您有用,欢迎点击收藏和点赞按钮, ...
五、spring boot整合mybatis-plus
spring boot整合mybatis-plus 简介 mybatis 增强工具包,简化 CRUD 操作. 文档 http://mp.baomidou.com http://mybatis.plus ...
spring boot 整合mybatis 无法输出sql的问题
使用spring boot整合mybatis,测试功能的时候,遇到到了sql问题,想要从日志上看哪里错了,但是怎么都无法输出执行的sql,我使用的是log4j2,百度了一下,很多博客都说,加上下面的日 ...
Spring boot 整合 Mybatis 实现增删改查(MyEclipse版)
1.首先搭建好一个Spring boot 程序,编写好启动类. 启动类代码如下: @SpringBootApplication public class Start {public static vo ...

Spring Boot 整合 Flowable-ui-modeler 6.7.2

一、新建Web项目

二、下载前端文件

三、添加Flowable-ui-modeler依赖

四、添加数据源相关配置

五、配置idm

六、绕过Flowable授权

七、配置账号信息接口

Spring Boot 整合 Flowable-ui-modeler 6.7.2相关推荐

最新文章

热门文章