Самый подробный учебный материал по bpmn.js во всей сети - http запрос

внешний интерфейс
Самый подробный учебный материал по bpmn.js во всей сети - http запрос

предисловие

В: Что такое bpmn.js?

"

bpmn.jsЭто набор инструментов рендеринга BPMN2.0 и средство веб-моделирования, которое позволяет выполнять функцию рисования блок-схем во внешнем интерфейсе.

В: Почему я пишу эту серию учебников? 🤔️

"

Из-за потребностей бизнеса компании его необходимо использовать в проектеbpmn.js, Однако из-заbpmn.jsРазработчики игры зарубежные друзья,поэтому отечественных методических материалов мало и нет подробных документов.Поэтому много способов использования и много ям приходится искать самому.Поразмыслив,решил написать серию учебные материалы об этом. чтобы помочь большеbpmn.jsПользователи или разработчики, которые ищут хороший способ рисовать блок-схемы, в то же время для них это еще и своего рода консолидация.

Поскольку это серия статей, она может часто обновляться.Пожалуйста, простите меня, если вы случайно смахнули его, и это не то, что вам нужно😊.

Не просите похвалы👍 не просите сердца❤️ Я просто надеюсь, что смогу вам немного помочь.

статья http-запроса

В предыдущей главе мы представилиbpmn.jsНекоторые базовые знания и введены вvueкак это используется, если правильноbpmn.jsДля тех, кто не знает, перейдите по ссылке:

Эта глава в основном посвященаbpmn.jsКак взаимодействовать с фоном, изучив эту главу, вы сможете узнать:

Получить данные через http запрос и рендерить

Отправить последний bpmn после редактирования в фоновом режиме

После редактирования сохраните его как файл bpmn или файл svg.

Получить данные через http запрос и рендерить

Тот, который использовался в предыдущем случае, всегда был локально жестко закодирован.xmlString, то он точно не будет использоваться в таком виде на практике.

Что сейчас делает наша команда:

  • Внешний интерфейс инициирует запрос и получаетbpmnадрес файла
  • Получив адрес, используйтеaxiosзапросите этот адрес, чтобы получитьxmlстрока (названная здесь какbpmnXmlStr)
  • использоватьimportXMLМетод преобразует строку в графику и отображает ее.

Чтобы смоделировать описанную выше среду выполнения, я следовал примеру проекта из предыдущей главы.bpmn-vue-basicСоздайте файл в папке компонентовaxios.vueфайл и настроить маршруты:

const routes = [
	...
	{
		path: '/axios',
		component: () => import('./../components/axios')
	}
]

Установить в проектaxiosдля фронтальной отправкиhttpпросить:

npm i axios --save-D

первый вHTMLкод для созданияloading, пользовательский интерфейс получаетxmlПредыдущее шоу:

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

затем вjsвведен вaxiosи определитьgetXmlUrlМетод моделирования приобретенияbpmnАдрес файла:

// axios.vue
<script>
...
import axios from 'axios'
import { xmlStr } from '../mock/xmlStr' // 引入一个本地的xml字符串, 若是没有获取到后台的数据则用它

export default {
	...
	data () {
	   return {
		...
		loading: true,
        xmlUrl: '',
        defaultXmlStr: xmlStr
		}
	},
	methods: {
  	async init () {
      this.loading = true
      this.xmlUrl = await this.getXmlUrl()
      console.log(this.xmlUrl)
      this.loading = false
      this.$nextTick(() => { // 等待 DOM 更新之后再对工作流进行初始化
      	this.initBpmn()
    	})
    },
    getXmlUrl () { // 该方法模拟请求后台获取bpmn文件地址
        return new Promise(resolve => {
            setTimeout(() => {
                const url = 'https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/bpmnMock.bpmn' // 模拟网络请求的一个地址
                resolve(url)
            }, 1000)
        })
    },
    initBpmn () {
      ... // 这里是初始化工作流的代码
      this.createNewDiagram()
    },
    async createNewDiagram () {
        const that = this
        let bpmnXmlStr = ''
        if (this.xmlUrl === '') { // 若是后台没有数据则使用默认的一个xml
            bpmnXmlStr = this.defaultXmlStr
            this.transformCanvas(bpmnXmlStr)
        } else {
            let res = await axios({
                method: 'get',
                timeout: 120000,
                url: that.xmlUrl,
                headers: { 'Content-Type': 'multipart/form-data' }
            })
            console.log(res)
            bpmnXmlStr = res['data']
            this.transformCanvas(bpmnXmlStr)
        }
    },
    transformCanvas(bpmnXmlStr) {
      // 将字符串转换成图显示出来
      this.bpmnModeler.importXML(bpmnXmlStr, (err) => {
        if (err) {
          console.error(err)
        } else {
          this.success()
        }
        // 让图能自适应屏幕
        var canvas = this.bpmnModeler.get('canvas')
        canvas.zoom('fit-viewport')
      })
    },
    success () {
        console.log('创建成功!')
    }
    }
}
</script>

Вы можете напрямую использовать путь, который я смоделировал в случае, чтобы получить адрес:

Пейте XO-blog-1256114407.cos.AP-Shenzhen-fans.No money cloud.com/BP mock каждый год.Не бойтесь…

Адрес кейса Git:Тестовый пример LinDaiDai-bpmn.js axios.vue

Отправить последний bpmn после редактирования в фоновом режиме

Выше мы представили, как получить данные из фона и отобразить их на странице, но этого недостаточно.

Возможно, вам нужно отредактировать последнююbpmnМагазин в фоновом режиме.

Эта функция включаетbpmn.jsПривязка события вxml Информация.

создать новыйsave.vueфайл иaxios.vueСкопируйте содержимое в .

существуетsuccess()добавить методaddBpmnListener()Как связать события:

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

как показано на рисунке:

img2
img2

Адрес кейса Git:Тестовый пример LinDaiDai-bpmn.js save.vue

После редактирования сохраните его как файл bpmn или файл svg.

выше мы слушаемcommandStack.changedПоследние события можно получить в режиме реального времениxmlИнформация.

Получив эту информацию, вы можете запросить серверную часть передавать их последними при каждом изменении графика.xml;

Вы также можете сохранить его в переменной, а затем дать кнопку сохранения на странице, а затем передать ее в фоновый режим при нажатии кнопки.

Возможно, вам вообще не нужно запрашивать фон, но вы хотите иметь возможность загружать его локально какbpmnфайл илиsvgдокумент.

наверхуsave.vueДве кнопки сохранения добавлены на основе случая:

img3
img3

затем изменитьHTMLКод:

// save.vue
<template>
	...
	<ul class="buttons">
    <li>
    	<a ref="saveDiagram" href="javascript:" title="保存为bpmn">保存为bpmn</a>
    </li>
    <li>
    	<a ref="saveSvg" href="javascript:" title="保存为svg">保存为svg</a>
    </li>
  </ul>
</template>

существуетjsДобавьте в код:

// save.vue
<script>
	...
  addBpmnListener () {
      const that = this
      // 获取a标签dom节点
      const downloadLink = this.$refs.saveDiagram
      const downloadSvgLink = this.$refs.saveSvg
        // 给图绑定事件，当图有发生改变就会触发这个事件
      this.bpmnModeler.on('commandStack.changed', function () {
        that.saveSVG(function(err, svg) {
            that.setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg)
        })
        that.saveDiagram(function(err, xml) {
            that.setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml)
        })
      })
  },
  // 下载为SVG格式,done是个函数，调用的时候传入的
  saveSVG(done) {
      // 把传入的done再传给bpmn原型的saveSVG函数调用
      this.bpmnModeler.saveSVG(done)
  },
  // 下载为bpmn格式,done是个函数，调用的时候传入的
  saveDiagram(done) {
      // 把传入的done再传给bpmn原型的saveXML函数调用
      this.bpmnModeler.saveXML({ format: true }, function(err, xml) {
          done(err, xml)
      })
  },
  // 当图发生改变的时候会调用这个函数，这个data就是图的xml
  setEncoded(link, name, data) {
      // 把xml转换为URI，下载要用到的
      const encodedData = encodeURIComponent(data)
      // 下载图的具体操作,改变a的属性，className令a标签可点击，href令能下载，download是下载的文件的名字
      console.log(link, name, data)
      let xmlFile = new File([data], 'test.bpmn')
      console.log(xmlFile)
      if (data) {
        link.className = 'active'
        link.href = 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData
        link.download = name
      }
  }
</script>

Адрес кейса Git:Тестовый пример LinDaiDai-bpmn.js save.vueЕсли вам это нравится, пожалуйста, дайтеStar🌟 Да, спасибо😊

послесловие

Полный каталог серии можно найти здесь:"Самый подробный учебник по bpmn.js во всей сети"

Рекомендации по сериалу:

"Самый подробный учебник по bpmn.js во всей сети - основы"

"Самый подробный учебный материал по bpmn.js во всей сети - мероприятия"

"Самый подробный учебник по bpmn.js во всей сети - рендерер"

"Самый подробный учебник по bpmn.js во всей сети - contextPad"

"Самый подробный учебник по bpmn.js во всей сети - редактирование и удаление узлов"

Категории