bpmn.js在vue中发送http请求

喜欢ヅ旅行 2022-10-28 04:57 219阅读 0赞

> 之前使用的是本地写死的 `xml` 字符串来渲染流程图，实际开发中肯定不满足我们的需求，那么我们应该如何解决这个问题呢？

常用的做法是：前端发送 `axios` 请求，获取到 `xml` 的字符串，然后使用 `bpmn.js` 中的 `importXML` 的方法将 `xml` 字符串转换为图形在页面上渲染出来。

接下来进入正题啦~

# bpmn.js在vue中发送http请求 #

## 通过http请求获取并渲染数据 ##

还是在之前创建好的项目 `vue-bpmn` 的基础上添加代码

先在项目中安装 `axios` 用于发送 `http` 请求

npm i axios --save-D

然后在 `views` 文件夹下新建 `axios.vue` 的文件，并配置好路由规则

// axios.vue
    <template>
      <div class="container">
        <template v-if="loading">
          <div class="loading">
            Loading
          </div>
        </template>
        <template v-else>
          <div class="canvas" ref="canvas"></div>
          <div id="js-properties-panel" class="panel"></div>
        </template>
      </div>
    </template>

`css` 部分的样式

然后在 `js` 部分引入 `axios` 并模拟向后端发送请求获取并渲染数据

效果演示

![在这里插入图片描述][20210205170403486.gif]

请求接口来源 [多谢][Link 1]

## 编辑之后将最新的bpmn发送给后台 ##

> 仅仅涉及到数据渲染是远远不够的，如果我们修改了数据，该怎么把数据发送给后台并存储呢？

这个问题就涉及到 `bpmn.js` 中的事件绑定，需要给图形绑定一个事件 来检测到图形的改变，并获取到最新的 `xml` 信息发送给后台

在 `views` 文件夹下新建一个 `save.vue` 文件，并将 `axios.vue` 中的内容复制到 `save.vue` 中，同时记得配置路由哦  
在 `success()` 方法中新增一个 `addBpmnListener()` 的方法

// save.vue
    <script>
        success () { 
          console.log('创建成功')
          this.addBpmnListener()
        },
        // 添加绑定事件
        addBpmnListener () { 
          // 给图绑定事件，当图有发生改变的时候就会触发这个事件
          this.bpmnModeler.on('commandStack.changed', () => { 
            this.saveDiagram((err, xml) => { 
              console.log(xml) // 这里获取到的就是最新的 xml 信息
            })
          })
        },
        // 下载为 bpmn 格式，done 是个函数，调用的时候传入的
        saveDiagram (done) { 
          // 把传入的 done 再传给 bpmn 原型的 saveXML 函数调用
          this.bpmnModeler.saveXML({  format: true }, (err, xml) => { 
            done(err, xml)
          })
        }
    </script>

编辑图后，就能获得最新的 `xml` 内容

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]

## 编辑完后保存为bpmn文件或svg文件 ##

通过监听 `commandStack.changed` 事件我们就能获取到修改完成之后最新的 `xml` 信息了  
我们可以了最新的 `xml` 信息传递给后台，也可以直接下载为 `bpmn/svg` 文件

在 `views` 文件夹下新建 `download.vue` 并配置好路由规则，把 `save.vue` 的内容复制到 `download.vue` 中  
先给添加两个按钮，这两个按钮先隐藏（因为此时 `href` 中没有连接），待图更新完后显示出来供用户下载

<template v-else>
          <a href="javascript:;" ref="saveBpmn" class="hidden">保存为bpmn</a>
          <a href="javascript:;" ref="saveSvg" class="hidden">保存为svg</a>
          <div class="canvas" ref="canvas"></div>
          <div id="js-properties-panel" class="panel"></div>
        </template>

然后修改 `js` 部分的代码

效果演示

![在这里插入图片描述][20210206101345243.gif]

[20210205170403486.gif]: /images/20221024/16408288f8f84bbaa5a6547dd6ab782c.png
[Link 1]: https://juejin.cn/post/6844904017592614919
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]: /images/20221024/008551f33a7d48dabfaaf16adb77d370.png
[20210206101345243.gif]: /images/20221024/ccdb79c1129847d1bb237ba0aa35fd41.png