http请求
前言
上一章节我们介绍了bpmn.js的一些基础知识点以及项目的需求与效果图, 要是对bpmn.js不了解的小伙伴请移步
bpmn.js + vue + vuex的业务实现
这一章节主要讲解的是关于bpmn.js如何与后台进行交互的问题, 通过学习此章节你可以学习到通过http请求获取数据并渲染
开源链接
gitee：gitee.com/zh-howe/bpm…
方法
我们团队现在采用的做法是:
- 前端发起请求, 使用
axios请求这个地址得到xml的字符串(这里命名为resourceXml) - 使用
importXML方法将字符串转化为图形并渲染.
在customRenderer.vue用项目中二次封装好的axios方法发送http请求，获得xml的字符串的resourceXml字段并且渲染
//customRenderer.vue
// 获取到属性ref为“canvas”的dom节点
const canvas = this.$refs.canvas;
// 建模
this.bpmnModeler = new BpmnModeler({
container: canvas,
});
this.bpmnModeler
.importXML(resourceXml)
.then(() => {
// 让图能自适应屏幕居中
const canvas = this.bpmnModeler.get('canvas');
canvas.zoom('fit-viewport', 'auto'); //画布自适应居中
canvas.zoom(0.8); //放大至2倍
// 这里是成功之后的回调, 可以在这里做一系列事情
this.success();
})
.catch(err => {
if (err) {
console.error(err);
}
});
完整文件目录展示
- custom 文件用于编写自定义renderer
- utils用于存储图片及文字数据
- customRenderer.vue是用于渲染流程图
