bpmn-js

Java可视化UML工作流系统（Activiti7+SpringBoot）完整无密云盘分享

荒凉一梦 — Wed, 23 Sep 2020 22:04:12 +0000

Java可视化UML工作流系统（Activiti7+SpringBoot）完整无密云盘分享荒凉一梦 2020-09-24 06:04:12

下载地址：百度网盘

Java可视化UML工作流系统（Activiti7+SpringBoot）

“程序是有逻辑的，业务是有流程的”，工作流引擎可以减少硬编码，高效处理业务需求变更，所以领悟工作流引擎背后的思想，将有助于在职场中高效交付工作结果，是助你奠定程序生涯迈向更高平台的“基石”。讲师倾囊相授三大核心：① 以“代码驱动式”教学模式，精讲最新版工作流引擎Activiti7核心组件；② 传授你业务建模或者软件建模的“工程化思维”；③ 基于SpringBoot+Activiti+SpringSecurity 等技术栈，“手把手”带你设计与实战企业级的黑马项目：《通用型可视化UML工作流系统》。

适合人群
有志于成为“程序员”的优秀青年
初入职场Java工程师
对业务建模、UML软件建模感兴趣的人

技术储备要求
熟悉Java基本语法
了解Maven基本使用
MySQL基本的CRUD

章节目录：
第1章清晰的学习目标，让学习更轻松
首先项目演示了解项目整体情况，便于小伙伴通过本课程学习，能够最终做出的怎样的项目效果。同时，明确学习activiti工作流对今后工作的重要性，确立学习目标。
1-1 玩转黑马项目，“技术+业务”能力齐飞试看
第2章开发前准备：环境搭建篇【选修】
所谓“君欲善其事，必先利其器”，因此本章带着小伙伴们将课程所需环境一一构建起来，小伙伴们可以结合自己情况，有选择有重点的去学习。注意：MySQL安装时讲解了如何开启远程访问、设置电脑防火墙；Maven国内镜像仓库修改等。...
2-1 JDK安装
2-2 Maven安装
2-3 MySQL安装
2-4 SpringBoot项目创建
2-5 BPMN插件
第3章项目从git下载与打包部署
很多小伙伴在别的实战课程中的反馈：不知道如何下载源码，在本地或者部署到云等环境中，本章特别采用“倒叙”方式，方便小伙伴正确在仓库中下载源码，并在本地或者云环境部署，感受一下项目再进一步深入学习。
3-1 源码下载与运行
第4章精讲最新版Activiti7核心组件【工程化思维，助你成为不敢想的团队中流砥柱】
所谓“九层之台起于垒土”，想要完成后续大项目《企业级可视化Activiti工作流系统》的开发任务，抓住核心将事半功倍，即：打通antiviti工作流引擎的任督二脉。本章精讲流程发布、启动；任务的创建、流转、完成，查询等，须注意领悟其背后工程化思维。...
4-1 Activiti7介绍
4-2 BPMN2.0标准
4-3 Springboot与Activit7整合试看
4-4 流程部署Deployment
4-5 流程定义ProcessDefinition
4-6 流程实例ProcessInstance
4-7 任务处理Task
4-8 历史任务HistoryService
4-9 UEL表达式(上)
4-10 UEL表达式(中)
4-11 UEL表达式(下)
4-12 流程网关-并行
4-13 流程网关-排他
4-14 流程网关-包容
第5章 Activiti 7 新特性尝鲜
本章开始学点“硬”技能，有难度，希望小伙伴们秉承不抛弃不放弃原则，死磕到底，顺利通关。由于Activiti7集成了SpringSecurity安全框架，因此本章先讲解安全框如何集成、配置，访问权限如何写，请求处理，用户与权限分配等。 ...
5-1 API新特性Proce***untime（上）试看
5-2 API新特性Proce***untime（中）
5-3 API新特性Proce***untime（下）
5-4 API新特性TaskRuntime
5-5 SpringSecurity用户登录
5-6 SpringSecurity配置
5-7 BPMN-JS整合
第6章项目：可视化UML工作流引擎web系统：需求分析与设计
项目开发前的准备，对页面功能使用设计软件绘制原型，并分析需求，规划接口类，类参数与返回值设计，建立数据库，用户表、业务表等功能设计，磨刀不误砍柴工，做好规划在动手写代码，做到胸有成竹。
第7章项目：可视化UML工作流引擎web系统：后端接口设计与实现
本章讲解PostMan接口调试工具，基于调试工具，编写首页、用户、流程定义、流程实例、任务、历史任务这5模块，超过40个功能点的开发。为我们的工作流系统打好坚实的后台基础，穿插分享编程心得，例如SwaggerUI如何与Activit7和安全框架整合等。 ...
第8章项目：可视化UML工作流引擎web系统：前端页面设计与实现
前端主要基于LayUI-mini+BPMN-JS，将掌握LayUI组件使用，ajax请求接口数据并渲染展示到页面上等。BPMN-JS首先基于官网中功能接口，并结合项目扩展官网接口、高亮显示接口可以绘制历史流程，元素点击事件可以绑定表单等操作。
第9章项目：前后端接口联调与部署上线【适用于简历项目演示】
前后端数据绑定，把前端做的静态页面与后台的接口数据，通过前后端分离的主流形式，使用AJAX获取并绑定，以及前端处理后端返回来状态码，正确和异常信息等。将在Linux和Windows上部署，配置外网访问权限，方便小伙伴作为简历项目展示。 ...
第10章项目复盘：企业级常见业务流程设计最佳实践（通用）
针对工作中遇到复杂极端业务流程，给出使用Activiti解决流程的方案，包括但不限于样品与质量控制子流程，网格化系统汇总任务平级审核、上级交办、下级分派、越级上报等场景，让小伙伴们能根据复杂的业务场景举一反三，在日后的工作中无往不利。...
第11章课程总结：他山之石，可以攻玉
对课程的总结，强调课程总最重要的知识点和最容易出错的地方，愿小伙伴们：所学皆有用，扬帆起航，升职加薪，为自己的锦绣前程做铺垫！
本课程持续更新中

来源：oschina

链接：https://my.oschina.net/u/4410409/blog/4559382

标签

Spring Security

bpmn-js

maven

mysql

vue项目中使用bpmn-基础篇

青春壹個敷衍的年華 — Fri, 14 Aug 2020 20:36:25 +0000

vue项目中使用bpmn-基础篇青春壹個敷衍的年華 2020-08-15 04:36:25

内容概述

本系列“vue项目中使用bpmn-xxxx”分为七篇，均为自己使用过程中用到的实例，手工原创，目前陆续更新中。主要包括vue项目中bpmn使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。如果转载或通过爬虫直接爬的，格式特别丑，请来原创看：我是作者原文

前情提要

vue项目中的用到流程图bpmn，而bpmn-js官方的文档是英文的，也没有找到api文档。所以只能在使用过程中，自己不断爬坑填坑了。

首先，看一眼效果图

1.安装bpmn-js

npm install bpmn-js --save

2.在main.js中引入样式

import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

3.vue页面引入并使用bpmn

import BpmnModeler from 'bpmn-js/lib/Modeler';
import CustomPaletteProvider from './customPalette';
import camundaExtension from './resources/camunda';

4.基本操作：前进、回退、bpmn文件导入、导出

<template>
    <div class="containerBox">
        <el-button-group>
            <el-button type="primary" size="mini" @click="handleUndo">后退</el-button>
            <el-button type="success" size="mini" @click="handleRedo">前进</el-button>
            <el-button type="warning" size="mini" @click="handleDownload">下载</el-button>
            <el-upload
                    style="display: inline-block;"
                    :file-list="fileList"
                    class="upload-demo"
                    action=""
                    :auto-upload="false"
                    :show-file-list="false"
                    :http-request="httpRequest"
                    :on-change="handleOnchangeFile"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
            >
                <el-button type="danger" size="mini">导入</el-button>
            </el-upload>
        </el-button-group>
        <div id="container"></div>
    </div>
</template>
<script>
    import BpmnModeler from 'bpmn-js/lib/Modeler';
    import CustomPaletteProvider from './customPalette';
    import camundaExtension from './resources/camunda';

    export default {
        name: 'index',
        data() {
            return {
                containerEl: null,
                bpmnModeler: null,
                fileList: []
            };
        },
        mounted() {
            this.containerEl = document.getElementById('container');
            this.bpmnModeler = new BpmnModeler({
                container: this.containerEl,
                moddleExtensions: {camunda: camundaExtension},
                additionalModules: [CustomPaletteProvider]
            });
            this.create();
        },
        methods: {
            create() {
                this.bpmnModeler.createDiagram(() => {
                    this.bpmnModeler.get('canvas').zoom('fit-viewport');
                });
            },
            handleRemove(file) {
                for (let i = 0; i < this.fileList.length; i++) {
                    if (file.name === this.fileList[i].name) {
                        this.fileList.splice(i, 1);
                    }
                }
            },
            beforeRemove(file) {
                return this.$confirm(`确定移除 ${file.name}？`);
            },
            // 后退
            handleUndo() {
                this.bpmnModeler.get('commandStack').undo();
            },
            // 前进
            handleRedo() {
                this.bpmnModeler.get('commandStack').redo();
            },
            handleDownload() {
                this.bpmnModeler.saveXML({format: true}, (err, data) => {
                    const dataTrack = 'bpmn';
                    const a = document.createElement('a');
                    const name = `diagram.${dataTrack}`;
                    a.setAttribute(
                        'href',
                        `data:application/bpmn20-xml;charset=UTF-8,${encodeURIComponent(data)}`
                    );
                    a.setAttribute('target', '_blank');
                    a.setAttribute('dataTrack', `diagram:download-${dataTrack}`);
                    a.setAttribute('download', name);
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                });
            },
            handleOnchangeFile(file) {
                const reader = new FileReader();
                let data = '';
                reader.readAsText(file.raw);
                reader.onload = (event) => {
                    data = event.target.result;
                    this.bpmnModeler.importXML(data, (err) => {
                        if (err) {
                            this.$message.info('导入失败');
                        } else {
                            this.$message.success('导入成功');
                        }
                    });
                };
            }
        }
    }
</script>
<style lang="scss">
    .containerBox {
        height: calc(100vh - 220px);
        position: relative;
        #container {
            height: calc(100% - 50px);
        }
    }
</style>

View Code

5.后续

步骤4代码中，有2个import，是我在后面会讲到的，代码没有摘干净就传过来了。感谢 @baogege 发现提醒。

import CustomPaletteProvider from './customPalette';

import camundaExtension from './resources/camunda';

这两句引入的含义：第一个文件 customPalette 是自定义的左侧工具栏，如果不需要自定义，可直接把引入去掉，不影响。如果需要自定义，在我的博客这系列的第五篇里讲到了如何自定义platter，可以借鉴一下。第二个文件是定义各个元素拥有的属性配置。我放在了附件中（点我！我是camunda文件），小伙伴们自己下载一下，下载后改一下后缀，改成.json,（因为上传时，.json格式不支持上传，所以我把后缀改成js传的）。

最近在用这个bpmn组件画图，遇到了很多知识点，例如预览、更新节点名字、更新节点颜色、点击xml获取节点 id、根据id获取元素实例，后续慢慢整理~

可爱的你可能还需要

来源：oschina

链接：https://my.oschina.net/u/4288691/blog/4277185

标签

bpmn-js

javascript

Vue.js