如何使用bpmn-js实现可视化流程管理

介绍

BPMN-JS是一个流行的开源库，用于在Web应用程序中可视化、创建、编辑和分析BPMN（Business Process Model and Notation，业务流程建模与表示法）2.0 图。BPMN是一种国际标准的图形化语言，用于描述企业中的业务流程，包括流程流、任务、事件、网关等元素。有关BPMN-JS的下载已经更多介绍可以访问官网：BPMN.io

组成

BPMN（Business Process Model and Notation）是一种用于绘制业务流程的标准化图形表示法。bpmn-js库由多个组件构成，共同提供了强大的流程图处理能力。以下是其主要功能组成部分：

  1. Modeler: bpmn-js Modeler是库的核心部分，它为用户提供了交互式创建和编辑BPMN图的功能。包括拖拽元素放置、连接线绘制、属性编辑等。这一部分是高度可定制的，允许开发者调整工具栏、快捷方式、自动布局等功能。
  2. Viewer: bpmn-js Viewer则是一个只读版本，用于展示BPMN图表，不允许用户编辑。它适用于那些只需查看流程图而不进行修改的场景，比如流程审核或分享。
  3. Elements: bpmn-js支持BPMN 2.0规范中的所有核心元素，如任务（Task）、网关（Gateway）、事件（Event）、泳道（Lane）和池（Pool）等，以及它们之间的连接关系，确保了模型的兼容性和标准化。
  4. Modelling API: 提供了一套API，使得开发者能够以编程方式创建、读取、更新和删除BPMN模型元素，这对于自动化生成流程图或与后端系统集成特别有用。
  5. Event System: 一个强大的事件系统，允许开发者监听和响应用户操作或模型变化，比如当元素被添加、删除、移动或属性被更改时。
  6. Services: 包括校验服务（Validation Service）来检查模型的语义正确性，以及导入导出服务（Import/Export Service），支持从和到XML格式的转换，这是BPMN模型的标准存储格式。
  7. Extensions: bpmn-js设计上支持扩展，允许开发人员添加自定义元素、行为或与其他库（如表单编辑器）集成。
  8. Diagrams.net Integration: bpmn-js也是Diagrams.net（前身为draw.io）中的BPMN编辑器的基础，这意味着它得到了广泛测试并在真实世界中得到应用。
    综上所述，bpmn-js通过这些组件和功能，为Web应用程序提供了一个强大且灵活的平台，用于处理BPMN流程图，无论是简单的查看需求还是复杂的流程设计和管理。

使用

以上是对bpmn-js的一个结构的基础介绍，下面通过一个bpmn-js的基础使用来近距离了解bpmn-js这个可视化web流程工具：

安装 bpmn-js

首先，你需要通过npm来安装 bpmn-js：

npm install bpmn-js

引入 bpmn-js

在你的 HTML 文件中，你可以通过 <script> 标签引入 bpmn-js(这里使用unpkg的cdn地址)：

    <link rel="stylesheet" href="https://unpkg.com/bpmn-js@13.0.2/dist/assets/diagram-js.css"><link rel="stylesheet" href="https://unpkg.com/bpmn-js@13.0.2/dist/assets/bpmn-font/css/bpmn.css"><script src="https://unpkg.com/bpmn-js@13.0.2/dist/bpmn-modeler.development.js"></script>

或者，如果你在使用模块化 JavaScript，例如 ES6 或 TypeScript，你可以这样引入：

import BpmnModeler from 'bpmn-js/lib/Modeler';

创建一个容器

在你的 HTML 中创建一个容器元素，用来承载 BPMN 图表：

<div id="canvas" style="width: 100%; height: 400px;"></div>

初始化 bpmn-js

在你的 JavaScript 代码中，初始化 bpmn-js 实例并将它附加到容器上：

// 使用 JavaScript 直接初始化
const modeler = new BpmnJS({container: '#canvas'
});// 或者如果你在使用模块化方式
const modeler = new BpmnModeler({container: '#canvas'
});

加载 BPMN XML

你可以加载一个 BPMN XML 字符串来显示图表：

var bpmnXML = `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" targetNamespace="" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd"><collaboration id="sid-c0e745ff-361e-4afb-8c8d-2a1fc32b1424"><participant id="sid-87F4C1D6-25E1-4A45-9DA7-AD945993D06F" name="Customer" processRef="sid-C3803939-0872-457F-8336-EAE484DC4A04" /></collaboration><process id="sid-C3803939-0872-457F-8336-EAE484DC4A04" name="Customer" processType="None" isClosed="false" isExecutable="false"><extensionElements /><laneSet id="sid-b167d0d7-e761-4636-9200-76b7f0e8e83a"><lane id="sid-57E4FE0D-18E4-478D-BC5D-B15164E93254"><flowNodeRef>sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26</flowNodeRef><flowNodeRef>sid-E49425CF-8287-4798-B622-D2A7D78EF00B</flowNodeRef><flowNodeRef>sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138</flowNodeRef><flowNodeRef>sid-E433566C-2289-4BEB-A19C-1697048900D2</flowNodeRef><flowNodeRef>sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9</flowNodeRef><flowNodeRef>SCAN_OK</flowNodeRef></lane></laneSet><task id="sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26" name="Scan QR code"><incoming>sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D</incoming><outgoing>sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A</outgoing></task><task id="sid-E49425CF-8287-4798-B622-D2A7D78EF00B" name="Open product information in mobile  app"><incoming>sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB</incoming><outgoing>sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C</outgoing></task><startEvent id="sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138" name="Notices&#10;QR code"><outgoing>sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD</outgoing></startEvent><endEvent id="sid-E433566C-2289-4BEB-A19C-1697048900D2" name="Is informed"><incoming>sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C</incoming></endEvent><exclusiveGateway id="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9"><incoming>sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD</incoming><incoming>sid-337A23B9-A923-4CCE-B613-3E247B773CCE</incoming><outgoing>sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D</outgoing></exclusiveGateway><exclusiveGateway id="SCAN_OK" name="Scan successful?&#10;"><incoming>sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A</incoming><outgoing>sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB</outgoing><outgoing>sid-337A23B9-A923-4CCE-B613-3E247B773CCE</outgoing></exclusiveGateway><sequenceFlow id="sid-337A23B9-A923-4CCE-B613-3E247B773CCE" name="Yes" sourceRef="SCAN_OK" targetRef="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9" /><sequenceFlow id="sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D" sourceRef="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9" targetRef="sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26" /><sequenceFlow id="sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB" name="No" sourceRef="SCAN_OK" targetRef="sid-E49425CF-8287-4798-B622-D2A7D78EF00B" /><sequenceFlow id="sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C" sourceRef="sid-E49425CF-8287-4798-B622-D2A7D78EF00B" targetRef="sid-E433566C-2289-4BEB-A19C-1697048900D2" /><sequenceFlow id="sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A" sourceRef="sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26" targetRef="SCAN_OK" /><sequenceFlow id="sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD" sourceRef="sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138" targetRef="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9" /></process><bpmndi:BPMNDiagram id="sid-74620812-92c4-44e5-949c-aa47393d3830"><bpmndi:BPMNPlane id="sid-cdcae759-2af7-4a6d-bd02-53f3352a731d" bpmnElement="sid-c0e745ff-361e-4afb-8c8d-2a1fc32b1424"><bpmndi:BPMNShape id="sid-87F4C1D6-25E1-4A45-9DA7-AD945993D06F_gui" bpmnElement="sid-87F4C1D6-25E1-4A45-9DA7-AD945993D06F" isHorizontal="true"><omgdc:Bounds x="83" y="105" width="933" height="250" /><bpmndi:BPMNLabel labelStyle="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b"><omgdc:Bounds x="47.49999999999999" y="170.42857360839844" width="12.000000000000014" height="59.142852783203125" /></bpmndi:BPMNLabel></bpmndi:BPMNShape><bpmndi:BPMNShape id="sid-57E4FE0D-18E4-478D-BC5D-B15164E93254_gui" bpmnElement="sid-57E4FE0D-18E4-478D-BC5D-B15164E93254" isHorizontal="true"><omgdc:Bounds x="113" y="105" width="903" height="250" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26_gui" bpmnElement="sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26"><omgdc:Bounds x="393" y="170" width="100" height="80" /><bpmndi:BPMNLabel labelStyle="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b"><omgdc:Bounds x="360.5" y="172" width="84" height="12" /></bpmndi:BPMNLabel></bpmndi:BPMNShape><bpmndi:BPMNShape id="sid-E49425CF-8287-4798-B622-D2A7D78EF00B_gui" bpmnElement="sid-E49425CF-8287-4798-B622-D2A7D78EF00B"><omgdc:Bounds x="728" y="170" width="100" height="80" /><bpmndi:BPMNLabel labelStyle="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b"><omgdc:Bounds x="695.9285736083984" y="162" width="83.14285278320312" height="36" /></bpmndi:BPMNLabel></bpmndi:BPMNShape><bpmndi:BPMNEdge id="sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A_gui" bpmnElement="sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A"><omgdi:waypoint x="493" y="210" /><omgdi:waypoint x="585" y="210" /><bpmndi:BPMNLabel><omgdc:Bounds x="494" y="185" width="90" height="20" /></bpmndi:BPMNLabel></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB_gui" bpmnElement="sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB"><omgdi:waypoint x="635" y="210" /><omgdi:waypoint x="728" y="210" /><bpmndi:BPMNLabel labelStyle="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581"><omgdc:Bounds x="642" y="185" width="16" height="12" /></bpmndi:BPMNLabel></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD_gui" bpmnElement="sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD"><omgdi:waypoint x="223" y="210" /><omgdi:waypoint x="275" y="210" /><bpmndi:BPMNLabel><omgdc:Bounds x="204" y="185" width="90" height="20" /></bpmndi:BPMNLabel></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D_gui" bpmnElement="sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D"><omgdi:waypoint x="325" y="210" /><omgdi:waypoint x="393" y="210" /><bpmndi:BPMNLabel><omgdc:Bounds x="314" y="185" width="90" height="20" /></bpmndi:BPMNLabel></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C_gui" bpmnElement="sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C"><omgdi:waypoint x="828" y="210" /><omgdi:waypoint x="901" y="210" /><bpmndi:BPMNLabel><omgdc:Bounds x="820" y="185" width="90" height="20" /></bpmndi:BPMNLabel></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="sid-337A23B9-A923-4CCE-B613-3E247B773CCE_gui" bpmnElement="sid-337A23B9-A923-4CCE-B613-3E247B773CCE"><omgdi:waypoint x="611" y="234" /><omgdi:waypoint x="610.5" y="299" /><omgdi:waypoint x="300.5" y="299" /><omgdi:waypoint x="301" y="234" /><bpmndi:BPMNLabel labelStyle="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581"><omgdc:Bounds x="585" y="236" width="21" height="12" /></bpmndi:BPMNLabel></bpmndi:BPMNEdge><bpmndi:BPMNShape id="StartEvent_0l6sgn0_di" bpmnElement="sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138"><omgdc:Bounds x="187" y="192" width="36" height="36" /><bpmndi:BPMNLabel><omgdc:Bounds x="182" y="229" width="46" height="24" /></bpmndi:BPMNLabel></bpmndi:BPMNShape><bpmndi:BPMNShape id="EndEvent_0xwuvv5_di" bpmnElement="sid-E433566C-2289-4BEB-A19C-1697048900D2"><omgdc:Bounds x="901" y="192" width="36" height="36" /><bpmndi:BPMNLabel><omgdc:Bounds x="892" y="231" width="56" height="12" /></bpmndi:BPMNLabel></bpmndi:BPMNShape><bpmndi:BPMNShape id="ExclusiveGateway_1g0eih2_di" bpmnElement="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9" isMarkerVisible="true"><omgdc:Bounds x="275" y="185" width="50" height="50" /><bpmndi:BPMNLabel><omgdc:Bounds x="210" y="160" width="90" height="12" /></bpmndi:BPMNLabel></bpmndi:BPMNShape><bpmndi:BPMNShape id="ExclusiveGateway_0vci1x5_di" bpmnElement="SCAN_OK" isMarkerVisible="true"><omgdc:Bounds x="585" y="185" width="50" height="50" /><bpmndi:BPMNLabel><omgdc:Bounds x="568" y="157" width="88" height="24" /></bpmndi:BPMNLabel></bpmndi:BPMNShape></bpmndi:BPMNPlane><bpmndi:BPMNLabelStyle id="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581"><omgdc:Font name="Arial" size="11" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" /></bpmndi:BPMNLabelStyle><bpmndi:BPMNLabelStyle id="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b"><omgdc:Font name="Arial" size="12" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" /></bpmndi:BPMNLabelStyle></bpmndi:BPMNDiagram>
</definitions>
`modeler.importXML(bpmnXML, function(err) {if (err) {console.error('Error importing XML:', err);} else {console.log('Successfully imported XML');}
});

交互和事件监听

你可以添加事件监听器来响应用户交互，例如点击、拖拽等：

modeler.on('element.click', function(event) {const element = event.element;console.log('Clicked on element:', element);
});

bpmn-js 提供了广泛的事件，让你能够监听模型的各种变化、元素选择等。以下是一些常用的事件监听示例：

  • Element selected: 当用户选择流程图中的元素时触发。
modeler.on('element:selected', function(event) {const element = event.element;console.log('Selected element:', element.id);
});
  • Element deselected: 当用户取消选择元素时触发。
modeler.on('element:deselected', function(event) {console.log('Deselected element');
});
  • Element click: 监听元素点击事件。
modeler.on('element.click', function(event) {const element = event.element;console.log('元素触发点击⌚️：', element.id);
});
  • Model changed: 模型发生任何改变时触发，包括添加、删除元素或更新属性等。
modeler.on('commandStack.changed', function(event) {console.log('bpmn modeler发生改变');
});
  • Canvas resized: 当画布大小发生变化时触发。
modeler.on('canvas.resized', function(event) {console.log('画布触发重新绘制');
});

除了监听事件，你还可以通过API执行一些交互操作，比如自动布局、导出模型等。

  • Auto layout: 自动布局所有流程。
modeler.get('layouter').layoutTree();
  • Export as XML: 导出当前模型为BPMN 2.0 XML。
modeler.saveXML({ format: true }, function(err, xml) {if (err) {console.error('导出BPMN文件出错：', err);} else {console.log('导出的xml：', xml);}
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/55868.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

BlackMarket_ 1靶机渗透

BlackMarket_ 1靶机渗透

项目地址 plain https://download.vulnhub.com/blackmarket/BlackMarket.zip 实验过程 开启靶机虚拟机 ![](https://img-blog.csdnimg.cn/img_convert/169d964d61ea9660c1104e723f71449e.png) 使用nmap进行主机发现&#xff0c;获取靶机IP地址 plain nmap 192.168.47.1-254…
阅读更多...
图论day57|建造最大岛屿（卡码网）【截至目前，图论的最高难度】

图论day57|建造最大岛屿（卡码网）【截至目前，图论的最高难度】

图论day57|建造最大岛屿&#xff08;卡码网&#xff09;【截至目前所做的题中&#xff0c;图论的最高难度】 思维导图分析 104.建造最大岛屿&#xff08;卡码网&#xff09;【截至目前所做的题中&#xff0c;图论的最高难度】 思维导图分析 104.建造最大岛屿&#xff08;卡码网…
阅读更多...
带你解锁Open_FLUX.1模型的神奇世界！

带你解锁Open_FLUX.1模型的神奇世界！

大家好我是极客菌&#xff01;&#xff01;&#xff01; Open_FLUX.1模型&#xff0c;作为ComfyUI的最新力作&#xff0c;已经在AI绘画领域引起了广泛的关注。这款模型以其独特的艺术风格和强大的创作能力&#xff0c;为艺术家们提供了一个全新的创作平台。今天&#xff0c;就…
阅读更多...
OJ在线评测系统 微服务高级 Gateway网关接口路由和聚合文档 引入knife4j库集中查看管理并且调试网关项目

OJ在线评测系统 微服务高级 Gateway网关接口路由和聚合文档 引入knife4j库集中查看管理并且调试网关项目

Gateway微服务网关接口路由 各个服务之间已经能相互调用了 为什么需要网关 因为我们的不同服务是放在不同的端口上面的 如果前端调用服务 需要不同的端口 8101 8102 8103 8104 我们最好提供一个唯一的 给前端去调用的路径 我们学习技术的时候必须要去思考 1.为什么要用&am…
阅读更多...
百度文心智能体平台开发萌猫科研加油喵

百度文心智能体平台开发萌猫科研加油喵

百度文心智能体平台开发萌猫科研加油喵 在科研的道路上&#xff0c;研究生们常常面临着巨大的压力和挑战。为了给这个充满挑战的群体带来一些鼓励和温暖&#xff0c;我借助百度文心智能体平台开发了一个独特的智能体 《萌猫科研加油喵》。 一、百度文心智能体平台介绍 百度文…
阅读更多...
k8s 的网络通信

k8s 的网络通信

目录 1 k8s通信整体架构 2 flannel 网络插件 2.1 flannel 插件组成 2.2 flannel 插件的通信过程 2.3 flannel 支持的后端模式 3 calico 网络插件 3.1 calico 简介 3.2 calico 网络架构 3.3 部署 calico 1 k8s通信整体架构 k8s通过CNI接口接入其他插件来实现网络通讯。目前比较…
阅读更多...
DOM对象

DOM对象

DOM概述 官方定义&#xff1a; DOM是W3C制定的一个规范(标准)&#xff0c;(Document Object Model&#xff0c;文档对象模型)&#xff0c;是提供了访问和操作网页中各元素的方法&#xff0c;让程序可以动态的修改或改变网页元素的内容、样式、结构。 DOM是W3C制定的一个规范…
阅读更多...
回南天，即使没有除湿机，也能除湿

回南天，即使没有除湿机，也能除湿

前几天收到网友私信&#xff0c;询问烘干机干衣吹热风&#xff0c;这个比较好理解&#xff0c;热气吹到衣服上加速水分蒸发。但空调除湿为什么不吹热风了&#xff0c;而吹冷风呢&#xff1f;以及除湿机的原理等的问题。 因为我在南京总是觉得干&#xff0c;加湿器24小时不停&a…
阅读更多...
The 2024 ICPC Kunming Invitational Contest K. Permutation（交互 期望）

The 2024 ICPC Kunming Invitational Contest K. Permutation（交互 期望）

在知乎内查看 题目 思路来源 题解 首先特判n1的情况&#xff0c;其实也不用问 分治&#xff0c;假设当前解决到[l,r]&#xff0c;要递归的vector是x&#xff0c; 维护两个vector L、R&#xff0c;代表下一步要在[l,mid]和[mid1,r]分治的vector 每次将x random_shuffle后&a…
阅读更多...
易基因：J Hazard Mater/IF12.2：RRBS揭示农药诱导胰腺全基因组DNA甲基化跨代改变与代谢表型相关

易基因：J Hazard Mater/IF12.2：RRBS揭示农药诱导胰腺全基因组DNA甲基化跨代改变与代谢表型相关

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 人造化学品的不当使用会对生物多样性和人类健康构成重大威胁&#xff0c;某些化学物质&#xff08;如农药&#xff09;可能通过表观遗传机制&#xff08;如DNA甲基化&#xff09;对代谢健…
阅读更多...
如何批量找到企业联系电话

如何批量找到企业联系电话

在拓展业务的过程中&#xff0c;找到企业的联系电话是必不可少的一步。然而&#xff0c;手动查找不仅耗时费力&#xff0c;效率也低下。对于需要批量获取客户信息的销售人员或企业来说&#xff0c;寻找一种快速、精准的方式批量获取企业联系电话显得尤为重要。本文将为你介绍几…
阅读更多...
MPLS LDP协议

MPLS LDP协议

文章目录 LDP标签分发协议工作原理LDP应用倒数第二跳弹出 LDP标签分发协议 基于FEC自动分配标签构建LSP用于建立动态LSPLDP报文头部结构信息类型 工作原理 LDP工作过程 发送Hello消息用于发现邻居&#xff1b;UDP发送LSR_1主动发起并建立TCP连接&#xff1b;TCP进行建立主动方发…
阅读更多...
怎么利用商品详情API接口实现数据获取与应用？

怎么利用商品详情API接口实现数据获取与应用？

在当今数字化的商业时代&#xff0c;高效获取和利用商品数据对于企业和开发者来说至关重要。商品详情 API 接口为我们提供了一种便捷的方式来获取丰富的商品信息&#xff0c;从而实现各种有价值的应用。本文将深入探讨如何利用商品详情 API 接口实现数据获取与应用。 一、商品…
阅读更多...
STM32 HAL库UART查询方式实例

STM32 HAL库UART查询方式实例

本文中介绍USART编程涵盖了三种主要方法&#xff0c;详细介绍STM32F407微控制器结合HAL库&#xff0c;通过UART的查询方式来实现一个实用的密码验证程序。提示用户键入一个字符作为密码。只有当用户精准地输入字符6时&#xff0c;系统才会反馈“密码正确”的确认信息。反之&…
阅读更多...
【重学 MySQL】五十六、位类型

【重学 MySQL】五十六、位类型

【重学 MySQL】五十六、位类型 定义赋值与使用注意事项应用场景 在MySQL数据库中&#xff0c;位类型&#xff08;BIT类型&#xff09;是一种用于存储位字段值的数据类型。 定义 BIT(n)表示n个位字段值&#xff0c;其中n是一个范围从1到64的整数。这意味着你可以存储从1位到64…
阅读更多...
requestidlecallback与分时函数

requestidlecallback与分时函数

前言 我们知道GUI 渲染线程与 JS 引擎线程是互斥的。当JS程序执行时间过长&#xff0c;会阻塞页面渲染和事件响应。那么针对一些优先级较低的任务&#xff0c;我们可以利用分时函数在主线程空闲时执行&#xff0c;减少卡顿。其本质是将一个长任务拆分成数个短任务&#xff0c;…
阅读更多...
国产工具链GCKontrol-GCAir助力控制律开发快速验证

国产工具链GCKontrol-GCAir助力控制律开发快速验证

前言 随着航空领域技术的不断发展&#xff0c;飞机的飞行品质评估和优化成为了航空领域的一个重要任务&#xff0c;为了确保飞行器在各种复杂条件下的稳定性&#xff0c;控制律设计过程中的模型和数据验证需要大量仿真和测试。 本文将探讨基于世冠科技的国产软件工具链GCKont…
阅读更多...
Leetcode 37. 解数独

Leetcode 37. 解数独

1.题目基本信息 1.1.题目描述 编写一个程序&#xff0c;通过填充空格来解决数独问题。 数独的解法需 遵循如下规则&#xff1a; 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 33 宫内只能出现一次。&#xff08;请参考…
阅读更多...
如何设置 GitLab 密码长度？

如何设置 GitLab 密码长度？

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 学习极狐GitLab 的相关资料&#xff1a; 极狐GitLab 60天专业…
阅读更多...
cudnn8编译caffe过程（保姆级图文全过程，涵盖各种报错及解决办法）

cudnn8编译caffe过程（保姆级图文全过程，涵盖各种报错及解决办法）

众所周知，caffe是个较老的框架，而且只支持到cudnn7，但是笔者在复现ds-slam过程中又必须编译caffe，我的cuda版本是11.4，最低只支持到8.2.4，故没办法，只能编译了 在此记录过程、报错及解决办法如下; 首先安装依赖： sudo apt-get install git sudo apt-get install lib…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023