前言
Q: bpmn.js是什么? ️
bpmn.js是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成.
Q: 我为什么要写该系列的教材? ️
因为公司业务的需要因而要在项目中使用到bpmn.js,但是由于bpmn.js的开发者是国外友人, 因此国内对这方面的教材很少, 也没有详细的文档. 所以很多使用方式很多坑都得自己去找.在将其琢磨完之后, 决定写一系列关于它的教材来帮助更多bpmn.js的使用者或者是期于找到一种好的绘制流程图的开发者. 同时也是自己对其的一种巩固.
由于是系列的文章, 所以更新的可能会比较频繁, 您要是无意间刷到了且不是您所需要的还请谅解.
不求赞不求心❤️. 只希望能对你有一点小小的帮助.
所有教材的github地址: 《bpmn-chinese-document》
http请求篇
上一章节我们介绍了bpmn.js的一些基础知识点以及介绍了在vue是如何使用的, 要是对bpmn.js不了解的小伙请移步:
这一章节主要讲解的是关于bpmn.js如何与后台进行交互的问题, 通过学习此章节你可以学习到:
通过http请求获取数据并渲染
将编辑之后的最新bpmn发送给后台
编辑完保存为bpmn文件或svg文件
通过http请求获取数据并渲染
在之前的案例中使用的一直都是本地写死的一个xml字符串, 那么实际使用上肯定不会以这种方式.
我们团队现在采用的做法是:
- 前端发起请求, 获取到一个
bpmn文件的地址 - 拿到地址之后, 使用
axios请求这个地址得到xml的字符串(这里命名为bpmnXmlStr) - 使用
importXML方法将字符串转化为图形并渲染.
为了模拟上面的执行环境我接着上一章节的项目案例bpmn-vue-basic在components文件夹下创建一个axios.vue的 文件并配置好路由:
const routes = [
...
{
path: '/axios',
component: () => import('./../components/axios')
}
]
同时在项目中安装axios以用于前端发送http请求:
npm i axios --save-D
首先在HTML代码中作出一个loading的效果, 用户前端在获取到xml之前的一个展示:
// axios.vue
Loading...
然后在js中引入axios并定义一个getXmlUrl方法模拟获取bpmn文件地址:
// axios.vue
你可以直接用我在案例中模拟获取地址的那个路径:
https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/bpmnMock.bpmn
案例Git地址: LinDaiDai-bpmn.js测试案例axios.vue
将编辑之后的最新bpmn发送给后台
上面我们介绍了如何从后台那里拿到数据并渲染到页面上, 但这样是不够的.
可能你需要将编辑之后的最新bpmn存储到后台.
该功能就涉及到了bpmn.js中的事件绑定, 也就是前端需要给图形绑定一个事件来检测到图形的改变, 并获取到最新的xml 信息.
新建一个save.vue文件并将axios.vue里的内容复制进来.
在success()方法中添加一个addBpmnListener()绑定事件的方法:
// save.vue
如图所示:
案例Git地址: LinDaiDai-bpmn.js测试案例save.vue
编辑完保存为bpmn文件或svg文件
在上面我们监听commandStack.changed事件就能实时获取到最新的xml信息.
拿到这些信息之后你可以选择在每次图形改变的时候就请求给后台传递给他们最新的xml;
也可以选择将其保存到一个变量中, 然后在页面中给一个保存按钮, 当点击按钮的时候再传递给后台.
或许你可能完全不需要再请求给后台, 而是希望本地就能够下载为bpmn文件或者svg文件.
在上面save.vue案例的基础上增加两个保存按钮:
然后修改HTML代码:
// save.vue
...
在js代码中加上:
// save.vue
案例Git地址: LinDaiDai-bpmn.js测试案例save.vue 喜欢的小伙伴请给个Star呀, 谢谢
后语
系列全部目录请查看此处: 《全网最详bpmn.js教材》
系列相关推荐:
《全网最详bpmn.js教材-基础篇》
《全网最详bpmn.js教材-事件篇》
《全网最详bpmn.js教材-renderer篇》
《全网最详bpmn.js教材-contextPad篇》
《全网最详bpmn.js教材-编辑、删除节点篇》