- 博客(191)
- 收藏
- 关注
原创 bpmn.js的message和sign
这段 BPMN 定义了一个等待“订单创建”消息的中间事件当流程执行到时,会暂停等待。系统监听是否有名为的消息到达。一旦收到该消息,事件被触发,流程继续执行后续节点。这段代码定义了一个名为“签字任务”的人工任务,并通过扩展字段标明该任务需要进行电子签名。在流程管理系统中提示用户需要上传签名文件;在流程引擎中触发特定逻辑(如跳转到签名页面);在 bpmn.js 前端渲染时高亮显示“签字”图标或行为。概念含义示例用途message表示流程中的消息传递,用于跨池通信或事件触发。
2025-07-24 13:37:00
468
原创 bpmn.js+flowable的任务监听器详解
在使用bpmn.js与Flowable集成时,任务监听器(Task Listener)是用于处理流程任务生命周期事件的重要机制。它允许你在任务的特定阶段执行自定义逻辑,比如分配任务、创建任务或完成任务。下面将结合 BPMN 2.0 规范和 Flowable 的实现,详细说明任务监听器的用法及其配置方式。
2025-07-11 11:05:24
253
原创 bnpm.js+flowable实现会签,或签,加签
审批类型前端实现方式会签设置多实例转签添加assignment事件的或签使用+ 条件表达式加签添加create事件的是 BPMN 2.0 规范中用于定义多实例(Multi-Instance)任务的属性,它表示某个任务需要被多次执行。通常用于实现会签、并行审批、批量处理等场景。在 BPMN 中,一个普通任务只能由一个人执行一次。而通过设置多个用户分别执行同一个任务;任务并行或串行执行;所有实例完成后,流程继续往下走。属性用途定义任务的多实例行为collection。
2025-07-11 10:48:05
629
原创 BPMNJS节点实现扩展flowable标签
扩展标签在 Flowable 工作流引擎中的作用主要是增强原生 BPMN 2.0 节点的功能,使其支持更复杂的业务场景和个性化需求。扩展标签的本质是 BPMN 2.0 标准的业务化延伸动态化任务分配(roleCode精细化流程控制(async业务语义化标识(nodeType外部系统集成(formKeyexpression最终提升 Flowable 在复杂企业级流程中的适应性。类别标签核心价值任务分配roleCode实现动态人员分配流程控制async。
2025-07-10 21:48:30
682
原创 bpmn.js的modeling 和 moddle
维度modelingmoddle技术定位图形交互控制器BPMN元模型管理器修改影响范围视图层(SVG元素位置/样式)数据层(XML结构、扩展属性)不可替代性无modeling则无法操作画布无moddle则无法解析/生成BPMN XML⚠️ 关键提示:二者通常协同使用 —— 通过modeling交互修改图形时,moddle自动更新数据模型;反之直接操作moddle后需手动触发视图同步。
2025-07-10 17:34:00
690
原创 Camunda 流程引擎
功能描述加载 Camunda 扩展属性,识别显示属性面板,编辑 Camunda 自定义字段在初始化 bpmn.js 实例时注入 Camunda 模块添加属性面板模块配置项作用对象典型用途加载时机数据类型BPMN 元模型定义扩展或适配 BPMN 元素属性(如 Camunda/Flowable 引擎特有属性)XML 解析/序列化阶段Object键值对bpmn.js 功能模块扩展或覆盖 bpmn.js 的默认行为(如新增工具栏图标、自定义节点渲染逻辑)
2025-07-09 13:01:39
997
原创 bpmn.js的各个模型节点详解
bpmn.js 是一个基于 BPMN 2.0 标准的 JavaScript 库,用于在浏览器中渲染、编辑和操作业务流程模型。它由团队开发并开源,广泛应用于流程建模工具中。
2025-07-09 11:00:17
600
原创 bpmn.js的命名空间
核心模型是指 BPMN 2.0 规范中定义的所有基本建模元素及其语义规则,它们构成了 BPMN 图表的基础结构,支持对业务流程进行标准化建模。在 BPMN 中自定义命名空间时,URL 并不是“随便写”,虽然它不一定要是一个真实可访问的网页地址,但应遵循一定的规范和最佳实践,以确保模型的唯一性、可维护性和跨平台兼容性。命名空间格式要求唯一的(避免与其他模型冲突)可读性强(便于识别用途)推荐使用反向域名方式命名(类似 Java 包名)这个 URL 不需要真实存在,只是作为唯一标识符使用。
2025-07-09 10:51:43
905
原创 docker教程2
场景是否适合使用-it说明调试容器内容✅如查看目录、运行脚本、安装依赖测试语言交互环境✅如 Python、Node.js、Shell运行 Web 服务❌应使用-d后台运行执行一次性脚本❌脚本执行完就退出,无法交互5.Docker容器后台运行,就必须有一个前台进程。在 Docker 容器中,“后台运行”并不意味着容器本身是“守护态”的。Docker 容器本质上是一个进程隔离的环境,它的生命周期依赖于主进程(前台进程)是否存活。场景是否需要前台进程说明容器长期运行✅ 必须有。
2025-07-09 00:15:00
590
原创 bpmn.js如何自定义右侧属性面板
通常是在 BPMN 元素的扩展属性中定义的。这些扩展属性可以通过 BPMN 的节点进行配置。</process>在这个例子中,是一个命名空间前缀,表示这些字段属于某个特定的扩展命名空间。每个name:字段的名称,用于标识该字段。value:字段的值,可以是字符串、数字或其他类型的数据。type(可选):字段的类型,例如stringintegerdate等。(可选):字段的描述信息。
2025-07-08 22:30:00
1267
原创 bpmn.js如何自定义 Renderer
is: 用于判断一个元素是否是特定 BPMN 类型(如getDi: 获取 BPMN 元素对应的 DI(Design Information),即图形信息对象。: 基础渲染器类,继承它以实现自定义绘制逻辑。// 监听元素创建或更新事件});继承:通过继承默认渲染器,可以复用其基础绘图能力,并仅需重写感兴趣的方法。依赖注入参数eventBus: 事件总线,用于监听元素变化等事件。styles: 样式工具,用于处理 SVG 样式。pathMap: 图形路径映射,用于绘制复杂形状。
2025-07-08 22:00:00
811
原创 bpmn.js自定义左侧工具栏
此时按钮将显示在分组下(如果该分组不存在,bpmn.js 会自动创建一个新的分组标签)。在bpmn.js中,自定义 Palette(即你通过继承实现的类)是完全覆盖默认 Palette的行为。当你提供一个自定义的(如),默认的 Palette 条目将被完全替换。:这是 bpmn.js 提供的默认左侧工具栏(Palette)生成器。继承该类:通过继承并重写其方法,可以自定义 Palette 的行为。构造函数参数palette: 调色板模块本身。create: 创建新元素的工具。
2025-07-08 21:30:00
861
原创 bpmn.js如何自定义contextPad
action: {},},向entries中添加一个名为的条目。group: 指定分组,这里是'edit',决定了按钮出现在哪个区域。className: 按钮图标使用的 CSS 类名,这里使用了 bpmn.js 内置的 wrench 图标。title: 鼠标悬停时显示的提示文字。: 点击时执行的回调函数,此处弹出一个包含当前元素信息的alert。group你也可以自定义一个新的group然后你可以为这个新分组设置标题和样式,甚至控制其排序。类型说明string。
2025-07-08 17:11:39
594
原创 docker教程3
数据卷容器是一个普通容器,但它不运行应用,仅作为数据存储和共享的“中介”。方式是否推荐场景数据卷容器(⚠️ 旧版兼容传统项目维护命名卷(✅ 推荐新项目、生产环境步骤操作1. 确认卷是否存在2. 挂载卷到新容器3. 验证数据或访问宿主机路径4. 数据备份直接复制下的内容关键点说明ro容器内只读,适用于配置文件等rw容器内可读写,适用于数据持久化和开发环境推荐使用--mount更清晰、更灵活,支持更多高级参数安全性考虑合理使用ro可提升容器运行的安全性合理使用ro和rw。
2025-07-08 00:45:00
670
原创 docker教程1
容器化技术:Docker 使用容器技术,通过操作系统级别的虚拟化来隔离应用程序。每个容器都是独立运行的,拥有自己的文件系统、网络和进程空间。镜像(Image):Docker 镜像是一个轻量级、独立的可执行包,包含运行某个软件所需的所有内容(代码、运行时环境、库、依赖项等),Docker 镜像(Image)就是一个只读的模板。镜像可以用来创建 Docker 容器,一个镜像可以创建很多容器。它也相当于是一个root文件系统。容器(Container):Docker 容器是镜像的运行实例。
2025-07-07 23:00:00
616
原创 移动端touch详解
场景建议单指滑动验证码使用touches[0]即可多点触控(如放大缩小)遍历touches列表防止页面滚动在touchmove中调用性能优化使用或throttle控制频率兼容性同时绑定touch和mouse事件,适配不同设备。
2025-07-07 10:52:16
360
原创 vue3的getCurrentInstance
特性说明返回实例范围当前组件实例(非根组件)有效作用域仅限于setup()或生命周期钩子内部生产环境安全属性proxy(而非ctx父组件访问(直接父组件)根组件访问需通过递归向上查找。
2025-07-05 23:03:12
600
原创 bpmn.js-基础篇
如果你只是展示流程图→ 用BpmnViewer如果你需要编辑流程图→ 用社区和示例社区讨论:GitHub Issues 和 Discussions 是解决问题的好地方。你可以通过插件机制自定义或隐藏 Palette:1.通过additionalModules覆盖默认模块paletteProvider: ['value', null] // 禁用默认palette模块});2.使用自定义空模块覆盖// 自定义空palette模块modules: [}));
2025-07-04 22:31:46
1019
1
原创 Vue.extend 和 Vue.component
Vue.extend是一个构造器方法,用于创建一个组件“子类”,它本身不会注册组件,只是定义组件的结构。是一个注册方法,用于将组件注册为全局组件,可以在任意其他组件中直接使用。功能Vue.extend类型构造组件的方法注册组件的方法是否注册组件❌ 否✅ 是返回值组件构造器undefined是否可复用✅ 可多次实例化✅ 可全局使用是否支持组件对象或构造器✅ 支持对象✅ 支持对象或构造器典型用途动态创建组件、手动实例化全局注册组件、简化模板使用如果你需要定义组件逻辑。
2025-06-25 23:34:30
245
原创 tsconfig.json常用配置
配置作用设置非相对路径模块的查找起点为当前目录常用于配合paths实现路径别名、简化 import 路径示例你可以创建自己的.d.ts文件,并通过"types"
2025-06-25 14:00:00
1043
原创 在 Vue 3 的响应式系统中,Symbol、WeakMap 和 WeakSet 是构建其核心机制的关键工具
这就是典型的循环引用(circular reference)。无限递归栈溢出重复代理/处理对象内存泄漏数据结构用途是否参与响应式系统Symbol定义唯一键名、迭代标识、元编程✅WeakMap存储对象 → 依赖的映射关系✅WeakSet防止循环引用、临时标记对象✅Map数据结构是否解决循环引用是否防内存泄漏是否推荐用于响应式系统Map❌❌否WeakMap✅✅✅ 推荐Set❌❌否WeakSet✅✅✅ 推荐。
2025-06-24 23:11:05
656
原创 MVVM 和 MVC 的区别
维度MVCMVVM是否支持数据绑定否是(双向绑定)UI 更新方式手动更新自动更新开发复杂度较低略高但更灵活可测试性一般高适用平台Web、后端渲染单页应用、前端框架、桌面应用等因此,MVVM 更适用于现代前端开发,尤其在需要频繁更新 UI 的场景下表现优异;而 MVC 则更适合传统的请求-响应型 Web 应用。
2025-06-24 10:56:25
391
原创 Vite 在开发环境已经不需要打包了,为什么生产环境还要打包?
场景是否需要打包说明开发环境(Dev Server)❌ 否使用原生 ESM,无需打包生产环境(Build)✅ 是提升性能、压缩代码、兼容旧浏览器✅ 是必须通过打包实现部署上线✅ 是需要完整静态资源目录兼容性支持✅ 是需要打包 + 转译。
2025-06-23 15:18:48
693
1
原创 vue3哪些情况下ref会自动解包,哪些情况下不会自动解包
场景是否自动解包示例✅ 模板中使用{{ ref }}或v-model✅ 是✅ 在reactive()包裹的对象中✅ 是✅ 在computed中✅ 是✅ 在v-for中遍历✅ 是❌ 在普通对象中嵌套❌ 否❌ 在MapSet中使用❌ 否❌ 在类实例中使用❌ 否❌ 使用修改嵌套属性❌ 否❌ 使用❌ 否。
2025-06-23 11:28:39
322
原创 shallowReactive,shallowReadonly,toRaw()和markRaw()详解
API响应式层级是否可写是否解包嵌套对象典型用途reactive()深层响应式✅ 可写✅ 自动解包默认首选浅层响应式✅ 可写❌ 不解包性能优化readonly()深层只读❌ 不可写✅ 自动解包数据保护浅层只读❌ 不可写❌ 不解包控制只读范围toRaw()获取原始对象获取非响应式副本markRaw()排除响应式第三方对象、性能优化。
2025-06-23 11:14:40
303
原创 shallowRef,triggerRef和customRef()
API特点适用场景ref深层响应式,自动解包嵌套 ref默认首选,通用响应式shallowRef仅响应.value变化,不处理内部结构性能敏感、大对象优化triggerRef手动触发shallowRef更新修改内部属性后主动刷新完全自定义响应式行为高级定制,如防抖、异步加载。
2025-06-23 11:07:16
332
原创 React.Children
API用途map遍历并映射子节点forEach遍历不返回count计算子节点数量only断言只有一个子节点toArray转成数组操作是开发可复用组件、布局容器、插槽机制时不可或缺的工具,建议熟练掌握其常用方法。
2025-06-23 09:39:26
302
原创 Vue 3 中使用的主要 ES6 技术
ES6 特性是否使用主要用途Proxy✅响应式系统核心Reflect✅更安全地操作对象Symbol✅唯一键名、元编程MapWeakMap✅依赖追踪、缓存SetWeakSet✅去重、循环引用检测letconst✅变量声明箭头函数✅回调函数解构赋值✅参数提取默认参数✅函数参数类⚠️ 部分使用兼容性支持模块化✅导入导出模板字符串✅字符串拼接✅异步控制生成器函数⚠️ 构建时使用工具链。
2025-06-20 14:13:53
792
原创 vue3响应式如何解决的循环引用问题
特性WeakMapWeakSet存储键值对✅(键必须是对象)❌(只存储对象)弱引用✅ 键是“弱引用”✅ 成员是“弱引用”可遍历❌❌垃圾回收影响当键不再被其他地方引用时,自动从 WeakMap 中删除同理💡 它们都只接受对象作为键或成员,不能是原始类型(如字符串、数字等)。数据结构是否可遍历是否支持弱引用推荐用途Map✅❌需要遍历、持久化存储WeakMap❌✅缓存、元数据绑定、响应式系统Set✅❌去重、集合操作WeakSet❌✅标记对象、检测循环引用。
2025-06-20 14:11:09
401
原创 vue的filter过滤器
Vue.filter('filterName', function(value) { // 处理逻辑 return processedValue;});全局过滤器可以在整个 Vue 应用中的任何组件中使用。
2025-06-17 16:42:51
262
原创 Vue 应用的首屏白屏问题
查看浏览器控制台是否有 JS 报错;检查网络面板确认资源是否加载成功;确保 Vue 实例正确挂载到#root;检查路由配置是否正确;处理异步加载逻辑避免空白;如使用 SSR,确认服务端渲染是否正常。
2025-06-17 16:37:03
371
原创 vue-router的路由钩子
{ path: '/dashboard', component: Dashboard, beforeEnter: (to, from, next) => { // 只对该路由生效 } }🔹 适用于某个特定路由的权限控制。执行顺序钩子名称描述1beforeEach全局前置守卫,最早执行2路由级别守卫3组件进入前钩子(无this4createdmounted组件生命周期5所有守卫和异步组件加载完成后触发6afterEach导航完成后触发7参数变化时触发(可选)8离开组件前触发。
2025-06-17 16:05:46
464
原创 vue3的setup
功能选项式 APIsetup()语法糖是否需setup()函数❌✅❌是否需return❌✅❌是否支持await❌✅(需✅是否支持❌❌✅是否支持expose✅✅✅开发体验简单直观更灵活最简洁如果你使用的是 Vue 单文件组件 + TypeScript + Vite/Webpack 构建工具,推荐优先使用语法糖,可以极大提升开发效率和代码组织能力。
2025-06-17 16:02:11
626
原创 Vue 3 的defineComponent
props: {},// 可以使用 setup 函数处理逻辑})id: numberprops: {},// props.id 和 props.title 都有类型提示return {}})id: numberprops: {user: {},return {}})功能说明🧱 结构清晰明确定义组件边界和依赖🧩 类型安全在 TypeScript 中提供良好的类型推导🔁 逻辑复用支持 Composition API 模式下的逻辑拆分🛠️ 工具友好。
2025-06-17 15:55:33
770
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人